/* Grow to Gobble - warm garden palette: forest green, terracotta, marigold, on cream paper. */
/* Look: "Allotment Planner" - crisp app, numbers first, leaf green with amber and sky for status.
   Light by default; dark follows the phone, or the toggle (data-theme on <html>) overrides it either way. */
:root {
  --bg: #f3f5f2; --bg-2: #e9eee8; --card: #ffffff; --ink: #10231a; --muted: #66746b; --line: #e1e7e0;
  --forest: #157a42; --forest-2: #1e9e5a; --leaf: #1e9e5a; --sage: #dff3e7; --sage-2: #c4e7d2;
  --terra: #c8413a; --terra-soft: #fde6e3; --marigold: #e3961f; --marigold-soft: #fcefd9;
  --plum: #8a4f7d; --plum-soft: #f4e8f1; --sky: #2f6fdb; --sky-soft: #e4edfc; --soil: #7a5a3a; --soil-soft: #f2ece4;
  --on-primary: #ffffff; --warn-ink: #8f5a07;
  --shadow: 0 1px 2px rgba(16, 35, 26, .05); --shadow-lift: 0 10px 28px -14px rgba(16, 35, 26, .28);
  --radius: 16px;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :root:not([data-theme="light"]) {
  --bg: #0d1511; --bg-2: #131d18; --card: #16201b; --ink: #e7eee9; --muted: #98a99d; --line: #25322b;
  --forest: #7fd6a3; --forest-2: #34c17a; --leaf: #45c983; --sage: #16301f; --sage-2: #1d4130;
  --terra: #ff8b7c; --terra-soft: #3a1f1c; --marigold: #f2b34c; --marigold-soft: #382b12;
  --plum: #dba6d0; --plum-soft: #33212e; --sky: #85abf5; --sky-soft: #15233b; --soil: #d6b08a; --soil-soft: #2b241c;
  --on-primary: #06140c; --warn-ink: #f2b34c; --shadow: none; --shadow-lift: 0 10px 28px -14px rgba(0, 0, 0, .6); color-scheme: dark;
} }
:root[data-theme="dark"] :root:not([data-theme="light"]) {
  --bg: #0d1511; --bg-2: #131d18; --card: #16201b; --ink: #e7eee9; --muted: #98a99d; --line: #25322b;
  --forest: #7fd6a3; --forest-2: #34c17a; --leaf: #45c983; --sage: #16301f; --sage-2: #1d4130;
  --terra: #ff8b7c; --terra-soft: #3a1f1c; --marigold: #f2b34c; --marigold-soft: #382b12;
  --plum: #dba6d0; --plum-soft: #33212e; --sky: #85abf5; --sky-soft: #15233b; --soil: #d6b08a; --soil-soft: #2b241c;
  --on-primary: #06140c; --warn-ink: #f2b34c; --shadow: none; --shadow-lift: 0 10px 28px -14px rgba(0, 0, 0, .6); color-scheme: dark;
}
:root[data-theme="dark"] {
  --bg: #0d1511; --bg-2: #131d18; --card: #16201b; --ink: #e7eee9; --muted: #98a99d; --line: #25322b;
  --forest: #7fd6a3; --forest-2: #34c17a; --leaf: #45c983; --sage: #16301f; --sage-2: #1d4130;
  --terra: #ff8b7c; --terra-soft: #3a1f1c; --marigold: #f2b34c; --marigold-soft: #382b12;
  --plum: #dba6d0; --plum-soft: #33212e; --sky: #85abf5; --sky-soft: #15233b; --soil: #d6b08a; --soil-soft: #2b241c;
  --on-primary: #06140c; --warn-ink: #f2b34c; --shadow: none; --shadow-lift: 0 10px 28px -14px rgba(0, 0, 0, .6); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(900px 500px at 110% -10%, rgba(236, 164, 43, .16), transparent 60%),
    radial-gradient(700px 500px at -20% 10%, rgba(63, 143, 79, .12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
a { color: var(--forest-2); }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; margin: 0 0 .4em; font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: 30px; color: var(--forest); } h2 { font-size: 22px; } h3 { font-size: 18px; }
p { margin: 0 0 .7em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
[hidden] { display: none !important; }

/* ---- chrome ---- */
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--forest); text-decoration: none; }
.brand em { font-style: normal; color: var(--terra); font-size: 15px; font-weight: 500; }
.brand svg { width: 30px; height: 30px; }
.top-me {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 22px; text-decoration: none; background: var(--marigold-soft); box-shadow: inset 0 0 0 2px var(--marigold);
}
.view { max-width: 760px; margin: 0 auto; padding: 16px; }
.tabs {
  position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 6;
  max-width: 560px; margin: 0 auto; display: flex; justify-content: space-around; gap: 2px; padding: 6px;
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lift);
}
.tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px;
  text-decoration: none; color: var(--muted); font-size: 11.5px; font-weight: 800; border-radius: 18px; transition: background .2s;
}
.tabs a span { font-size: 23px; line-height: 1.1; filter: grayscale(.7); opacity: .75; transition: transform .2s; }
.tabs a.on { color: #fff; background: linear-gradient(160deg, var(--forest-2), var(--forest)); }
.tabs a.on span { filter: none; opacity: 1; transform: translateY(-1px) scale(1.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs a.on { color: #10210f; } }
:root[data-theme="dark"] .tabs a.on { color: #10210f; }

/* ---- building blocks ---- */
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 14px; border: 1px solid var(--line);
}
.card.tint-leaf { background: linear-gradient(145deg, var(--sage), color-mix(in srgb, var(--sage) 45%, var(--card))); border-color: var(--sage-2); }
.card.tint-sun { background: linear-gradient(145deg, var(--marigold-soft), color-mix(in srgb, var(--marigold-soft) 45%, var(--card))); border-color: color-mix(in srgb, var(--marigold) 35%, transparent); }
.card.tint-soil { background: linear-gradient(145deg, var(--soil-soft), color-mix(in srgb, var(--soil-soft) 45%, var(--card))); border-color: color-mix(in srgb, var(--soil) 22%, transparent); }
.card.tint-sky { background: linear-gradient(145deg, var(--sky-soft), color-mix(in srgb, var(--sky-soft) 45%, var(--card))); border-color: color-mix(in srgb, var(--sky) 25%, transparent); }
.card.tint-tomato { background: linear-gradient(145deg, var(--terra-soft), color-mix(in srgb, var(--terra-soft) 45%, var(--card))); border-color: color-mix(in srgb, var(--terra) 25%, transparent); }
.card.tint-plum { background: linear-gradient(145deg, var(--plum-soft), color-mix(in srgb, var(--plum-soft) 45%, var(--card))); border-color: color-mix(in srgb, var(--plum) 22%, transparent); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 2px 10px; }
.section-title h2 { margin: 0; color: var(--forest); }
.section-title a { font-weight: 800; font-size: 14px; text-decoration: none; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 16px; padding: 12px 18px; border-radius: 16px;
  background: var(--sage); color: var(--forest); text-decoration: none; min-height: 48px; transition: transform .08s, box-shadow .08s;
}
.btn.primary { background: linear-gradient(170deg, var(--forest-2), var(--forest)); color: #fff; box-shadow: 0 4px 0 #143f28, 0 10px 20px -10px rgba(20, 63, 40, .6); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #143f28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { color: #0f2014; box-shadow: none; } }
:root[data-theme="dark"] .btn.primary { color: #0f2014; box-shadow: none; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.danger { background: var(--terra-soft); color: var(--terra); }
.btn.sun { background: linear-gradient(170deg, #f4b845, var(--marigold)); color: #3b2800; box-shadow: 0 3px 0 #b77b12; }
.btn.small { min-height: 38px; padding: 8px 12px; font-size: 14px; border-radius: 12px; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.stack > * + * { margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; background: var(--sage); color: var(--forest); white-space: nowrap;
}
.chip.l1 { background: var(--sage); color: var(--forest); }
.chip.l2 { background: var(--marigold-soft); color: #94600a; }
.chip.l3 { background: var(--terra-soft); color: var(--terra); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.l2 { color: var(--marigold); } }
:root[data-theme="dark"] .chip.l2 { color: var(--marigold); }
.chip.grey { background: var(--bg-2); color: var(--muted); }
.chip.sky { background: var(--sky-soft); color: var(--sky); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin-bottom: 10px; scrollbar-width: none; }
.filter::-webkit-scrollbar { display: none; }
.filter button {
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 800;
  font-size: 14px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; cursor: pointer;
}
.filter button.on { border-color: transparent; background: linear-gradient(170deg, var(--forest-2), var(--forest)); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .filter button.on { color: #0f2014; } }
:root[data-theme="dark"] .filter button.on { color: #0f2014; }
input[type=text], input[type=email], input[type=password], select {
  width: 100%; font: inherit; font-size: 17px; padding: 13px 14px; border-radius: 14px;
  border: 2px solid var(--line); background: var(--card); color: var(--ink);
}
input:focus, select:focus { outline: none; border-color: var(--leaf); box-shadow: 0 0 0 4px color-mix(in srgb, var(--leaf) 18%, transparent); }
label.field { display: block; font-weight: 800; font-size: 15px; margin: 12px 0 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; margin-top: 14px; }
.check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--forest-2); }
.error { background: var(--terra-soft); color: var(--terra); padding: 10px 14px; border-radius: 12px; font-weight: 700; margin-top: 12px; }

/* ---- illustrated garden scene ---- */
.scene { display: block; width: 100%; height: auto; }
.hello {
  position: relative; overflow: hidden; padding: 0; border: 0;
  background: linear-gradient(180deg, #d9ecf0 0%, #eaf3e2 55%, var(--card) 100%);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hello { background: linear-gradient(180deg, #1c2b33 0%, #1d2a1e 60%, var(--card) 100%); } }
:root[data-theme="dark"] .hello { background: linear-gradient(180deg, #1c2b33 0%, #1d2a1e 60%, var(--card) 100%); }
.hello-text { padding: 18px 18px 0; position: relative; z-index: 1; }
.hello-text h1 { margin-bottom: 4px; font-size: 28px; }
.hello-text p { margin: 0; color: var(--muted); font-weight: 700; font-size: 15px; }

/* ---- welcome ---- */
.hero { text-align: center; padding: 22px 6px 6px; }
.hero .big { font-size: 60px; line-height: 1; margin-bottom: 10px; }
.hero h1 { font-size: 38px; }
.hero p { font-size: 18px; color: var(--muted); max-width: 30em; margin: 0 auto 18px; }
.hero-scene { border-radius: 28px; overflow: hidden; margin: 0 0 18px; box-shadow: var(--shadow-lift); background: linear-gradient(180deg, #d9ecf0, #eaf3e2); }
.journey { display: flex; justify-content: space-between; gap: 4px; margin: 18px 0; position: relative; }
.journey div { flex: 1; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); position: relative; z-index: 1; }
.journey b {
  display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; width: 50px; height: 50px; border-radius: 50%;
  font-size: 26px; background: var(--card); border: 2px solid var(--line);
}
.journey div.on { color: var(--forest); }
.journey div.on b { background: var(--sage); border-color: var(--leaf); }
.journey div.off b { filter: grayscale(1); opacity: .45; }
.journey::before { content: ""; position: absolute; left: 10%; right: 10%; top: 25px; border-top: 3px dotted var(--line); }
.auth-card { max-width: 420px; margin: 0 auto; }

/* ---- jobs ---- */
.job { display: flex; gap: 12px; align-items: flex-start; }
.job + .job { border-top: 1.5px dashed var(--line); padding-top: 14px; margin-top: 14px; }
.job-emoji {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1; background: var(--sage); position: relative;
}
.job-emoji small {
  position: absolute; right: -6px; bottom: -6px; font-size: 15px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--card); box-shadow: 0 0 0 2px var(--line);
}
.k-sow_in { background: var(--sky-soft); } .k-sow_out { background: var(--sage); } .k-plant_out { background: var(--soil-soft); }
.k-harvest, .k-eat { background: var(--marigold-soft); } .k-care { background: var(--sky-soft); } .k-buy { background: var(--plum-soft); } .k-batch { background: var(--sage); }
.job-body { flex: 1; min-width: 0; }
.job-title { font-weight: 900; font-size: 17.5px; line-height: 1.25; }
.job-when { font-size: 14px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.job-when.hot { color: var(--terra); }
.steps { margin: 10px 0 4px; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 8px 0 8px 44px; font-size: 16px; }
.steps li + li { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 7px; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(160deg, var(--forest-2), var(--forest)); color: #fff; font-family: var(--display); font-weight: 600;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
details.how summary { cursor: pointer; font-weight: 800; color: var(--forest-2); font-size: 15px; margin-top: 6px; list-style: none; }
details.how summary::-webkit-details-marker { display: none; }
details.how summary::before { content: "👉 "; }
details.how[open] summary::before { content: "👇 "; }
.tick {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 16px; border: 2.5px solid var(--leaf); background: var(--card);
  font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--leaf); transition: transform .1s;
}
.tick:hover { background: var(--sage); }
.tick:active { transform: scale(.92); }
.tick.done { background: linear-gradient(160deg, var(--forest-2), var(--forest)); border-color: transparent; color: #fff; }
.empty { text-align: center; padding: 22px 10px; color: var(--muted); }
.empty .big { font-size: 46px; }

/* ---- plants grid ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tile {
  position: relative; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 14px 10px 12px; text-align: center; cursor: pointer; font: inherit; color: var(--ink); box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.blob {
  width: 76px; height: 76px; margin: 0 auto 6px; border-radius: 50% 46% 52% 48% / 48% 52% 46% 50%;
  display: flex; align-items: center; justify-content: center; font-size: 42px; line-height: 1;
}
.blob.l1 { background: radial-gradient(circle at 35% 30%, #fff8, transparent 55%), var(--sage-2); }
.blob.l2 { background: radial-gradient(circle at 35% 30%, #fff8, transparent 55%), color-mix(in srgb, var(--marigold) 35%, var(--marigold-soft)); }
.blob.l3 { background: radial-gradient(circle at 35% 30%, #fff8, transparent 55%), color-mix(in srgb, var(--terra) 28%, var(--terra-soft)); }
.tile .n { font-weight: 900; display: block; margin: 2px 0 6px; line-height: 1.2; }
.tile.picked { border-color: var(--leaf); background: var(--sage); }
.tile.picked::after {
  content: "✓"; position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(160deg, var(--forest-2), var(--forest)); color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center;
}
.tile .have { position: absolute; top: 8px; left: 10px; font-size: 18px; }

/* "plant now" strip */
.strip { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip .tile { flex: 0 0 138px; scroll-snap-align: start; padding: 12px 8px 10px; }
.strip .blob { width: 62px; height: 62px; font-size: 34px; }
.strip .when { display: block; font-size: 12px; font-weight: 700; color: var(--muted); line-height: 1.25; }

/* ---- plant detail / sheet ---- */
.sheet { position: fixed; inset: 0; z-index: 20; background: rgba(20, 30, 18, .5); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; }
.sheet-card {
  background: var(--bg); width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; border-radius: 28px 28px 0 0;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); animation: up .24s ease-out;
}
.sheet-card::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: -6px auto 10px; }
@keyframes up { from { transform: translateY(40px); opacity: .5; } }
@media (min-width: 700px) { .sheet { align-items: center; } .sheet-card { border-radius: 28px; } .sheet-card::before { display: none; } }
.sheet-close { float: right; font-size: 20px; background: var(--card); border: 1px solid var(--line); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: var(--ink); }
.plant-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.plant-head .e { font-size: 50px; line-height: 1; }
.plant-head .blob { width: 88px; height: 88px; font-size: 50px; margin: 0; flex-shrink: 0; }
.plant-head h2 { font-size: 26px; color: var(--forest); }
.months { display: grid; grid-template-columns: 70px repeat(12, 1fr); gap: 3px; font-size: 11px; font-weight: 800; align-items: center; }
.months .lab { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.months .m { text-align: center; color: var(--muted); }
.months .m.now { color: var(--terra); }
.months .cell { height: 20px; border-radius: 6px; background: var(--bg-2); }
.months .cell.sow_in { background: linear-gradient(180deg, #5b9bc4, var(--sky)); }
.months .cell.sow_out { background: linear-gradient(180deg, #5aa86a, var(--leaf)); }
.months .cell.plant_out { background: linear-gradient(180deg, #8c6443, var(--soil)); }
.months .cell.harvest { background: linear-gradient(180deg, #f5bf5a, var(--marigold)); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; font-weight: 700; margin-top: 10px; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 5px; vertical-align: -1px; }
.method { display: flex; gap: 10px; align-items: center; padding: 12px; border: 2px solid var(--line); border-radius: 16px; cursor: pointer; background: var(--card); margin-bottom: 8px; }
.method.on { border-color: var(--leaf); background: var(--sage); }
.method input { accent-color: var(--forest-2); width: 20px; height: 20px; }
.shop-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pip { display: flex; gap: 12px; align-items: flex-start; }
.pip-face { flex-shrink: 0; width: 46px; height: 46px; }
.pip ul { margin: 0; padding-left: 18px; }

/* ---- year planner ---- */
.planner .months { grid-template-columns: minmax(104px, 1.6fr) repeat(12, minmax(14px, 1fr)); gap: 2px; }
.planner .lab { font-size: 13px !important; white-space: normal; line-height: 1.15; }
.planner .lab { font-size: 14px; color: var(--ink); font-weight: 800; }
.planner .m .long { display: none; }
@media (min-width: 560px) { .planner .months { gap: 3px; } .planner .m .long { display: inline; } .planner .m .short { display: none; } }
.planner .cell { height: 26px; position: relative; }
.planner .cell.split { background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.planner .m.now { color: var(--terra); }

/* ---- garden ---- */
.space-head { display: flex; align-items: center; gap: 12px; }
.space-head .e { font-size: 28px; width: 50px; height: 50px; border-radius: 16px; background: var(--soil-soft); display: flex; align-items: center; justify-content: center; }
.space-head h3 { margin: 0; flex: 1; font-size: 20px; }
.crop-row { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1.5px dashed var(--line); cursor: pointer; }
.crop-row .e { font-size: 26px; width: 42px; height: 42px; border-radius: 14px; background: var(--sage); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.crop-row .n { flex: 1; font-weight: 800; }
.stage { display: flex; gap: 2px; font-size: 14px; }
.stage span { filter: grayscale(1); opacity: .3; }
.stage span.on { filter: none; opacity: 1; }
.progress { height: 12px; border-radius: 999px; background: var(--bg-2); overflow: hidden; margin: 10px 0; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--leaf), var(--forest-2)); border-radius: 999px; transition: width .3s; }
.nodig-step { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.nodig-step + .nodig-step { border-top: 1.5px dashed var(--line); }
.nodig-step .e { font-size: 26px; width: 46px; height: 46px; border-radius: 15px; background: var(--soil-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.suggest { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.suggest button { font: inherit; font-weight: 800; font-size: 15px; border: 1.5px solid var(--leaf); color: var(--forest); background: var(--card); padding: 7px 13px; border-radius: 999px; cursor: pointer; }

/* ---- badges ---- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.badge { text-align: center; padding: 14px 6px 12px; border-radius: 20px; background: var(--card); border: 1.5px solid var(--line); }
.badge .e {
  font-size: 34px; width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
}
.badge b { display: block; font-size: 14px; }
.badge small { color: var(--muted); font-size: 12px; display: block; line-height: 1.25; }
.badge.locked .e { filter: grayscale(1); opacity: .35; }
.badge.locked b { color: var(--muted); }
.badge.got { border-color: color-mix(in srgb, var(--marigold) 60%, transparent); background: linear-gradient(160deg, var(--marigold-soft), var(--card)); }
.badge.got .e { background: radial-gradient(circle at 35% 30%, #fffc, transparent 55%), var(--marigold); box-shadow: 0 0 0 4px var(--marigold-soft), 0 0 0 6px color-mix(in srgb, var(--marigold) 50%, transparent); }
.celebrate { text-align: center; padding: 10px 0; }
.celebrate .e { font-size: 90px; display: block; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.3); } }

.toast {
  position: fixed; left: 50%; bottom: calc(104px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  background: var(--forest); color: #fff; padding: 12px 18px; border-radius: 16px; font-weight: 800; max-width: 90vw; text-align: center; box-shadow: var(--shadow-lift);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { color: #0f2014; } }
:root[data-theme="dark"] .toast { color: #0f2014; }
.confetti { position: fixed; top: -20px; font-size: 26px; z-index: 40; pointer-events: none; animation: fall 1.8s linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .celebrate .e, .sheet-card { animation: none; } }

/* onboarding choices */
.choice { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.choice .e { font-size: 30px; width: 54px; height: 54px; border-radius: 18px; background: var(--soil-soft); display: flex; align-items: center; justify-content: center; }
.counter { display: flex; align-items: center; gap: 6px; }
.counter b { min-width: 22px; text-align: center; font-size: 20px; font-family: var(--display); }
.counter .btn { width: 40px; padding: 0; font-size: 22px; }

/* neighbours */
.nbs { display: grid; gap: 8px; }
.nb {
  display: flex; gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--ink); cursor: pointer;
  background: var(--sage); border: 1.5px solid transparent; border-radius: 16px; padding: 8px 12px;
}
.nb .e { font-size: 26px; }
.nb small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.nb em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--forest); background: var(--card); padding: 1px 7px; border-radius: 999px; }
.nb.bad { background: var(--terra-soft); }
.nb.bad em { color: var(--terra); }
.nb.near { border-color: var(--leaf); }
.nb.bad.near { border-color: var(--terra); }

/* quantity stepper and fit check */
.counter.qty input { width: 76px; text-align: center; font-family: var(--display); font-size: 20px; padding: 8px 4px; }
.counter.qty input::-webkit-inner-spin-button { display: none; }
.checkbox { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sage); display: grid; gap: 6px; font-size: 15px; }
.checkbox.warn { background: var(--terra-soft); }
.use { margin-top: 10px; }
.use .progress { margin: 6px 0 2px; }
.use.tight .progress i { background: linear-gradient(90deg, #f5bf5a, var(--marigold)); }
.use.over .progress i { background: linear-gradient(90deg, #e07a52, var(--terra)); }
.k-store { background: var(--plum-soft); }
.checkbox .plan { font-weight: 800; color: var(--forest); }
.suggest button.full { border-color: var(--line); color: var(--muted); }
.k-prep { background: var(--soil-soft); }
.k-protect { background: var(--sky-soft); }

/* two-way switch (calendar tabs) */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--bg-2); border-radius: 16px; margin: 4px 0 12px; }
.seg button { flex: 1; border: 0; background: transparent; font: inherit; font-weight: 800; font-size: 15px; color: var(--muted); padding: 10px 8px; border-radius: 12px; cursor: pointer; }
.seg button.on { background: var(--card); color: var(--forest); box-shadow: var(--shadow); }
.daterow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-weight: 800; }
.daterow input { width: auto; font: inherit; padding: 8px 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--ink); }

/* bed details form */
.kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kind { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 12px 6px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); cursor: pointer; font-size: 14px; }
.kind .e { font-size: 30px; }
.kind input, .soilopt input { position: absolute; opacity: 0; pointer-events: none; }
.kind.on, .soilopt.on { border-color: var(--leaf); background: var(--sage); }
.size-row { display: flex; align-items: flex-end; gap: 10px; }
.times { font-size: 28px; font-weight: 800; color: var(--muted); padding-bottom: 14px; }
.big-num { flex: 1; display: block; position: relative; }
.big-num span { display: block; font-weight: 800; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.big-num input { width: 100%; font-family: var(--display); font-size: 34px; padding: 14px 40px 14px 16px; border-radius: 18px; border: 2px solid var(--line); background: var(--card); color: var(--ink); text-align: center; }
.big-num input:focus { outline: none; border-color: var(--leaf); }
.big-num em { position: absolute; right: 16px; bottom: 20px; font-style: normal; font-weight: 800; color: var(--muted); font-size: 18px; }
.area { margin: 10px 0 0; font-size: 18px; color: var(--forest); min-height: 1em; }
.soils { display: flex; flex-wrap: wrap; gap: 8px; }
.soilopt { position: relative; padding: 8px 12px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font-weight: 800; font-size: 14px; }
.checkbox input[type=text] { font-size: 14px; padding: 8px 10px; margin: 6px 0; }
.kinds.two { grid-template-columns: repeat(2, 1fr); }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before { content: "▸ "; color: var(--muted); }
details.card[open] > summary::before { content: "▾ "; }
.lay-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1.5px dashed var(--line); }
.lay-row:first-of-type { border-top: 0; }
.lay-row .e { font-size: 26px; width: 38px; text-align: center; }
.lay-row select { width: auto; max-width: 44%; font-size: 14px; padding: 8px; }
.unplace { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); font-size: 15px; font-weight: 900; cursor: pointer; }
.unplace:hover { border-color: var(--terra); color: var(--terra); }

.hello.slim .scene { max-height: 90px; object-fit: cover; }
.hello.slim .hello-text h1 { font-size: 24px; }
.link-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; margin-bottom: 14px; }
.sticky-tabs { position: sticky; top: -18px; z-index: 2; margin: 8px -4px 12px; }
.sticky-tabs button { font-size: 14px; padding: 9px 4px; }

/* bird's-eye plot */
.plot-wrap { border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); margin-bottom: 10px; touch-action: pan-y; }
svg.plot { display: block; width: 100%; height: auto; font-family: var(--display); user-select: none; -webkit-user-select: none; }
svg.plot .grass { fill: #cfe3b4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) svg.plot .grass { fill: #24341f; } }
:root[data-theme="dark"] svg.plot .grass { fill: #24341f; }
svg.plot .bed { fill: #7a5230; stroke: #5b3c22; stroke-width: 0.04; }
svg.plot .bed.unbuilt { fill: #b8956e; stroke-dasharray: 0.12 0.08; }
svg.plot .bed.over { stroke: #c65a32; stroke-width: 0.07; }
svg.plot .pot { fill: #c46b3f; stroke: #8f4524; stroke-width: 0.05; }
svg.plot .hit { fill: transparent; }
svg.plot .label { fill: #1f2a1c; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) svg.plot .label { fill: #eef2e4; } }
:root[data-theme="dark"] svg.plot .label { fill: #eef2e4; }
svg.plot .plus { fill: #f6efdf; opacity: .7; }
svg.plot .crop, svg.plot .space { cursor: pointer; }
svg.plot .crop:hover rect, svg.plot .crop:hover circle { filter: brightness(1.08); }
svg.plot .space.movable { cursor: grab; }
svg.plot .space.movable .hit { fill: rgba(255,255,255,.25); stroke: #3a7ca5; stroke-width: .05; stroke-dasharray: .15 .1; }
svg.plot .space.target .hit { fill: rgba(255,255,255,.35); stroke: #2e7a4d; stroke-width: .06; }
svg.plot .space.nope { opacity: .45; }
.month-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.month-row b { white-space: nowrap; min-width: 92px; }
.month-row input[type=range] { flex: 1; accent-color: var(--forest-2); }
.suggest button.on { background: var(--forest-2); color: #fff; }
.fillrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

.plot-wrap { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 75vh; }
.plot-wrap.moving { touch-action: none; }
.plot-wrap svg.plot { max-width: none; }
svg.plot .gridline { fill: none; stroke: rgba(46, 90, 40, .18); stroke-width: 0.012; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) svg.plot .gridline { stroke: rgba(200, 230, 190, .12); } }
:root[data-theme="dark"] svg.plot .gridline { stroke: rgba(200, 230, 190, .12); }
svg.plot .scalebar path { stroke: #1f2a1c; stroke-width: 0.04; fill: none; }
svg.plot .scalebar text { fill: #1f2a1c; font-weight: 600; }
.zoom { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: -2px 0 6px; }

/* garden planner */
.plan-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.plan-bar .zoom { margin: 0; display: flex; gap: 4px; }
.plot-wrap { overflow: auto; max-height: 72vh; background: var(--bg-2); }
.plot-wrap svg.plot { display: block; width: auto !important; height: auto; max-width: none; margin: 0 auto; }
svg.plot .outside { fill: #e9e1cd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) svg.plot .outside { fill: #1a1f18; } }
:root[data-theme="dark"] svg.plot .outside { fill: #1a1f18; }
svg.plot .fence { fill: none; stroke: #8a6a45; stroke-width: 0.08; stroke-dasharray: 0.3 0.12; }
svg.plot .label.dim { fill: #6a6f5d; font-weight: 600; }
svg.plot .feat { stroke: rgba(0,0,0,.18); stroke-width: 0.03; }
svg.plot .feat.tree, svg.plot .feat.bush { opacity: .85; }
svg.plot .feat.greenhouse { stroke: #7fb4c4; stroke-width: 0.05; }
svg.plot .feat.path, svg.plot .feat.patio { stroke-dasharray: 0.1 0.08; }
svg.plot .item { cursor: pointer; }
.moving svg.plot .item { cursor: grab; }
.moving svg.plot .item .hit { fill: rgba(255,255,255,.18); stroke: #3a7ca5; stroke-width: .04; stroke-dasharray: .15 .1; }
svg.plot .item.sel > :first-child, svg.plot .item.sel .hit { stroke: #e4572e !important; stroke-width: .08 !important; stroke-dasharray: none !important; }
.adds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sel-card { border: 2px solid var(--terra); }
.mini { display: flex; flex-direction: column; font-size: 12px; font-weight: 800; color: var(--muted); gap: 2px; flex: 1; }
.mini input { padding: 8px; font-size: 16px; }
.map { height: 58vh; min-height: 300px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-2); }
.leaflet-container { font-family: inherit; }
svg.plot .pathstrip { fill: #e3d8bf; stroke: #c9b996; stroke-width: 0.02; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) svg.plot .pathstrip { fill: #4a4335; stroke: #5d543f; } }
:root[data-theme="dark"] svg.plot .pathstrip { fill: #4a4335; stroke: #5d543f; }
.angle { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.angle input[type=range] { flex: 1; accent-color: var(--forest-2); }

.plot-inner { position: relative; display: inline-block; min-width: 100%; }
.plan-bar .toggles { display: flex; gap: 4px; margin-left: auto; }
.seltools { position: absolute; z-index: 3; display: flex; align-items: center; gap: 4px; padding: 6px; width: 300px;
  background: var(--card); border: 1.5px solid var(--terra); border-radius: 14px; box-shadow: var(--shadow-lift); }
.seltools .btn.small { min-height: 34px; padding: 6px 8px; font-size: 13px; }
.seltools input[type=range] { flex: 1; min-width: 50px; accent-color: var(--forest-2); }
.seltools b { font-size: 13px; min-width: 34px; text-align: center; }
svg.plot .dims text { fill: #3d4a37; font-weight: 700; paint-order: stroke; stroke: rgba(255,255,255,.8); stroke-width: 0.03; }
svg.plot .dims.edge text { fill: #6e4a2e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) svg.plot .dims text { fill: #eef2e4; stroke: rgba(0,0,0,.6); } }
:root[data-theme="dark"] svg.plot .dims text { fill: #eef2e4; stroke: rgba(0,0,0,.6); }
.plot-wrap { text-align: center; }
.plot-inner { min-width: 0; text-align: left; vertical-align: top; }
.plot-inner svg.plot { margin: 0; }
.seltools { flex-wrap: wrap; }
.seltools .copyrow { display: flex; align-items: center; gap: 4px; width: 100%; border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; font-size: 13px; font-weight: 800; color: var(--muted); }
.seltools .copyrow span { margin-right: auto; }

/* editing the garden's outline */
svg.plot .bedge { stroke: transparent; cursor: pointer; }
svg.plot .bedge.on { stroke: rgba(228, 87, 46, .35); }
svg.plot .bmid circle { fill: #fff; stroke: #2e7a4d; stroke-width: 0.03; opacity: .9; }
svg.plot .bmid text { fill: #2e7a4d; font-weight: 800; pointer-events: none; }
svg.plot .bmid { cursor: copy; }
svg.plot .bvtx { fill: #e4572e; stroke: #fff; stroke-width: 0.04; cursor: grab; }
svg.plot .bvtx.on { fill: #f2b01e; }
.btools input { width: 74px; padding: 6px; font-size: 15px; }
/* corner markers on the satellite map */
.vtx-icon { background: #e4572e; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.mid-icon { background: rgba(255,255,255,.85); border: 2px solid #2e7a4d; border-radius: 50%; color: #2e7a4d; font-weight: 900; font-size: 14px; line-height: 14px; text-align: center; }
svg.plot .grass.seethru { fill-opacity: 0.08; }
svg.plot .sat image { opacity: 0.95; }
svg.plot .fence { vector-effect: non-scaling-stroke; stroke-width: 2.5px; stroke-dasharray: 8 4; }
svg.plot.withsat .fence { stroke: #ffd34d; stroke-width: 3px; }
svg.plot.withsat .label { fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.65); stroke-width: 0.04; }
svg.plot.withsat .gridline { stroke: rgba(255,255,255,.18); }
.grouptools { width: auto !important; max-width: calc(100% - 16px); gap: 6px; border-color: #3a7ca5; }
.grouptools b { white-space: nowrap; }
.seltools .sizerow { display: flex; align-items: center; gap: 4px; width: 100%; border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 2px; font-size: 13px; font-weight: 800; }
.seltools .sizerow input { width: 64px; padding: 6px; font-size: 15px; text-align: center; }
.btn.groupbtn { background: var(--sky-soft); color: var(--sky); border: 1.5px solid var(--sky); }
.btn.groupbtn.on { background: var(--sky); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.groupbtn.on { color: #0f2014; } }
:root[data-theme="dark"] .btn.groupbtn.on { color: #0f2014; }
.plan-bar { flex-wrap: wrap; }

/* fruit trees and bushes */
.fruit-list { display: grid; gap: 8px; }
.fruit-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: 14px; background: var(--card); color: inherit; font: inherit; cursor: pointer; }
.fruit-opt:hover, .fruit-opt:focus-visible { border-color: var(--terra); }
.fruit-opt .fe { font-size: 28px; }
.fruit-opt > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.fruit-now { background: #fff1c9; color: #6b4a00; border-radius: 10px; padding: 6px 10px; font-weight: 800; margin: 0 0 8px; }
.fruit-card { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.fruit-card summary { cursor: pointer; }

/* companion plants, flowers and bed shapes */
.nb.comp { cursor: default; align-items: flex-start; }
.kinds.shapes { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
.kinds.shapes .kind { padding: 10px 4px; }
.kinds.shapes .kind .e { font-size: 26px; }
.combo h3 { margin-bottom: 4px; }
.combo .zone { margin-top: 8px; }
.combo .zone .chips { margin-top: 4px; gap: 6px; }
.fdiagram { display: block; width: 100%; max-height: 260px; margin: 4px 0; }
.fdiagram .fd-bed { fill: #6b4a2e; }
.fdiagram .fd-z0 { fill: #6f8f4e; } .fdiagram .fd-z1 { fill: #86a85e; } .fdiagram .fd-z2 { fill: #a3c27a; }
.fdiagram .fd-lab { fill: var(--muted); font-weight: 800; }
.tile .when { font-size: 12px; }

/* varieties and sowing together */
.varieties { display: grid; gap: 6px; margin-top: 6px; }
.variety { display: block; text-align: left; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card);
  color: inherit; font: inherit; cursor: pointer; }
.variety.on { border-color: var(--leaf); background: var(--sage); }
.variety b { margin-right: 6px; }
.variety small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.vt { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 7px; margin: 0 3px 2px 0; border-radius: 999px; background: var(--sage); color: var(--forest); }
.vname { font-weight: 700; color: var(--muted); font-size: .9em; }
.mix-step { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.mix-step .e { font-size: 28px; }
.mix-step + .mix-step { border-top: 1px dashed var(--line); }

/* bed planting plan and costs */
.bp-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; }
.bp-row + .bp-row { border-top: 1px dashed var(--line); }
.bp-row .e { font-size: 26px; }
.bp-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--forest-2); color: #fff; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; margin-top: 4px; }
.bp-cost { white-space: nowrap; }
.bp-total { border-top: 2px solid var(--line); margin-top: 6px; padding-top: 10px; font-size: 16px; }
.fdiagram .bp-n circle { fill: #fff; stroke: #2e7a4d; stroke-width: 0.02; }
.fdiagram .bp-n text { fill: #2e7a4d; font-weight: 800; }
.costcard { text-align: left; font: inherit; color: inherit; cursor: pointer; border: none; }
.costline { margin-top: 8px; }
#sheet-card .fdiagram { max-height: 340px; }

/* photos instead of emoji */
.blob.has-pic, .e.has-pic, .fe.has-pic { overflow: hidden; padding: 0; background: var(--sage-2); }
.blob.has-pic { border-radius: 22px; }
.blob .pic, .e .pic, .fe .pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.crop-row .e.has-pic { width: 40px; height: 40px; border-radius: 12px; flex: none; }
.fruit-opt .fe.has-pic { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.hero-pic { margin: -4px 0 12px; position: relative; }
.hero-pic img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 18px; display: block; background: var(--sage-2); }
.hero-pic figcaption { position: absolute; right: 8px; bottom: 8px; max-width: 80%; }
.hero-pic figcaption a { font-size: 11px; color: #fff; background: rgba(0,0,0,.55); padding: 2px 8px; border-radius: 999px; text-decoration: none;
  display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sheet-close { position: relative; z-index: 5; }  /* stay on top of a photo at the top of the pop-up */

/* pot sizes */
.potsizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.potsize { padding: 8px 4px; gap: 2px; font: inherit; color: inherit; }
.potsize .e { height: 36px; display: flex; align-items: flex-end; }
.potsize b { font-size: 13px; }
.potsize .small { font-size: 11px; }
.potdraw { fill: #c0714a; stroke: #8e4f30; stroke-width: 1.5; }

/* ======================================================================================================
   The "Allotment Planner" look: flat white cards, Bricolage headings, Figtree text, status in chips.
   Kept as one layer at the end so it wins over the older, rounder styles above.
   ====================================================================================================== */
body { background: var(--bg); font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
h1 { font-size: 26px; } h2 { font-size: 19px; } h3 { font-size: 16px; }
.section-title h2 { color: var(--ink); }
.section-title a, .section-title .btn.ghost { color: var(--forest-2); font-weight: 600; }
.ic { stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* top bar and tabs */
.topbar { background: color-mix(in srgb, var(--bg) 90%, transparent); border-bottom: 1px solid var(--line); padding-block: calc(10px + env(safe-area-inset-top)) 10px; }
.brand { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--ink); letter-spacing: -.01em; }
.brand em { font-size: inherit; font-weight: 800; color: inherit; }
.brand .g { color: var(--forest-2); }
.brand svg { width: 28px; height: 28px; }
.top-right { display: flex; align-items: center; gap: 8px; }
.theme-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.theme-btn svg { width: 19px; height: 19px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; } :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; } :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; } }
.top-me { width: 36px; height: 36px; font: 700 13px "Figtree", sans-serif; background: var(--sage); color: var(--forest); box-shadow: none; }
.tabs { left: 0; right: 0; bottom: 0; max-width: none; border-radius: 0; border: 0; border-top: 1px solid var(--line); box-shadow: none;
  background: color-mix(in srgb, var(--card) 94%, transparent); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); justify-content: center; }
.tabs a { max-width: 110px; font-size: 11px; font-weight: 600; gap: 3px; padding: 5px 0 3px; border-radius: 10px; }
.tabs a svg { width: 24px; height: 24px; }
.tabs a.on, :root[data-theme="dark"] .tabs a.on { background: none; color: var(--forest-2); font-weight: 800; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabs a.on { background: none; color: var(--forest-2); } }
.tabs a:focus-visible, .btn:focus-visible, .tick:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; }

/* cards, buttons, chips, inputs */
.card { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
.card.tint-leaf { background: color-mix(in srgb, var(--sage) 60%, var(--card)); border-color: color-mix(in srgb, var(--sage-2) 70%, var(--line)); }
.card.tint-sun { background: color-mix(in srgb, var(--marigold-soft) 70%, var(--card)); border-color: color-mix(in srgb, var(--marigold) 25%, var(--line)); }
.card.tint-soil { background: color-mix(in srgb, var(--soil-soft) 70%, var(--card)); border-color: var(--line); }
.card.tint-sky { background: color-mix(in srgb, var(--sky-soft) 70%, var(--card)); border-color: color-mix(in srgb, var(--sky) 18%, var(--line)); }
.card.tint-tomato { background: color-mix(in srgb, var(--terra-soft) 70%, var(--card)); border-color: color-mix(in srgb, var(--terra) 18%, var(--line)); }
.card.tint-plum { background: color-mix(in srgb, var(--plum-soft) 70%, var(--card)); border-color: var(--line); }
.btn { font-weight: 700; font-size: 15px; border-radius: 12px; min-height: 44px; background: var(--sage); color: var(--forest); }
.btn.small { font-weight: 600; font-size: 13.5px; border-radius: 10px; min-height: 36px; }
.btn.primary, :root[data-theme="dark"] .btn.primary { background: var(--forest-2); color: var(--on-primary); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn.primary { background: var(--forest-2); color: var(--on-primary); } }
.btn.primary:hover { background: color-mix(in srgb, var(--forest-2) 88%, var(--ink)); }
.btn.primary:active { transform: translateY(1px); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.sun { background: var(--marigold); color: #2b1d00; box-shadow: none; }
.chip { font-weight: 700; font-size: 12px; padding: 3px 9px; }
.chip.l2 { color: var(--warn-ink); }
.filter button { font-weight: 600; border-width: 1px; font-size: 13.5px; padding: 7px 13px; }
.filter button.on, :root[data-theme="dark"] .filter button.on { background: var(--ink); color: var(--card); border-color: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .filter button.on { background: var(--ink); color: var(--card); } }
.seg { border-radius: 12px; }
input[type=text], input[type=email], input[type=password], input[type=number], select { border-width: 1.5px; border-radius: 12px; font-size: 16px; }
label.field { font-weight: 700; font-size: 14px; }
.toast { border-radius: 12px; font-weight: 600; }

/* plants: rounded squares, not blobs */
.blob, .blob.l1, .blob.l2, .blob.l3 { border-radius: 16px; background: var(--sage); }
.blob.l2 { background: var(--marigold-soft); } .blob.l3 { background: var(--terra-soft); }
.tile { border: 1px solid var(--line); border-radius: var(--radius); }
.tile .n { font-weight: 700; }
.tile.picked::after { background: var(--forest-2); }

/* jobs */
.job + .job { border-top: 1px solid var(--line); }
.job-emoji { width: 44px; height: 44px; border-radius: 12px; font-size: 24px; }
.job-title { font-weight: 700; font-size: 16px; }
.job-when { font-weight: 500; font-size: 13.5px; }
.tick { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); color: var(--forest-2); font-size: 20px; }
.tick:hover { border-color: var(--forest-2); background: var(--sage); }
.tick.done { background: var(--forest-2); color: var(--on-primary); }
.steps li::before { background: var(--sage); color: var(--forest); font-family: var(--display); font-weight: 800; font-size: 14px; width: 28px; height: 28px; top: 8px; }
.steps li { padding-left: 40px; }
details.how summary::before { content: "▸ "; } details.how[open] summary::before { content: "▾ "; }
.stage span { filter: grayscale(1); opacity: .35; } .stage span.on { filter: none; opacity: 1; }

/* Today: the date, then your numbers */
.today-head { margin: 4px 2px 12px; }
.today-head small { display: block; color: var(--muted); font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.today-head h1 { margin: 0; font-size: 26px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-decoration: none; color: var(--ink); display: block; min-width: 0; }
.stat b { display: block; font: 800 22px var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat span { font-size: 12px; color: var(--muted); font-weight: 600; }
.stat .ring { width: 34px; height: 34px; float: right; }
.stat .ring .bg { stroke: var(--line); } .stat .ring .fg { stroke: var(--forest-2); }
.stat.warn b { color: var(--warn-ink); }
@media (max-width: 380px) { .stat b { font-size: 19px; } .stat .ring { display: none; } }

/* tidier: folded variety list, link rows */
details.vfold { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
details.vfold summary { cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
details.vfold summary::-webkit-details-marker { display: none; }
details.vfold summary::after { content: "›"; color: var(--muted); transform: rotate(90deg); }
details.vfold[open] summary::after { transform: rotate(-90deg); }
button.link-row { font: inherit; cursor: pointer; text-align: left; }
.costcard { background: var(--card); }

/* remove a plant straight from its job */
.job-body { position: relative; padding-right: 26px; }
.job-x { position: absolute; top: -2px; right: 0; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--muted);
  font-size: 13px; cursor: pointer; opacity: .65; }
.job-x:hover, .job-x:focus-visible { opacity: 1; background: var(--bg-2); color: var(--terra); }
.crop-row .stage { display: none; }  /* the crop's own page shows how far along it is - lists stay tidy */

details.later > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.later > summary::-webkit-details-marker { display: none; }
details.later > summary::after { content: "›"; color: var(--muted); font-size: 20px; transform: rotate(90deg); }
details.later[open] > summary { margin-bottom: 12px; }
details.later[open] > summary::after { transform: rotate(-90deg); }

/* bed details: a save button that stays at the top, and lights up when something's changed */
.savebar { position: sticky; top: 30px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 12px; margin-bottom: 12px; box-shadow: var(--shadow-lift); }
#save.dirty, #save-top.dirty { box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest-2) 30%, transparent); }
#save-top.dirty::after { content: "changes"; }  /* the button's gap supplies the space */

/* a planting sown together: one box in the bed */
.mixbox { border: 1px solid color-mix(in srgb, var(--forest-2) 35%, var(--line)); background: color-mix(in srgb, var(--sage) 45%, var(--card));
  border-radius: 12px; padding: 8px 10px 2px; margin-bottom: 10px; }
.mixbox .mixhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-bottom: 4px; }
.mixbox .crop-row { background: transparent; }
.mixnote { padding-bottom: 10px; margin-top: 4px; }

/* plants page tabs scroll sideways on a phone rather than squashing */
.seg.scroll-seg { display: flex; overflow-x: auto; scrollbar-width: none; }
.seg.scroll-seg::-webkit-scrollbar { display: none; }
.seg.scroll-seg button { flex: 1 0 auto; padding-inline: 14px; white-space: nowrap; }
/* your plants list */
.myrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.myrow:first-of-type { border-top: 0; }
.myrow .e { font-size: 24px; } .myrow .n { flex: 1; min-width: 0; font-weight: 600; }
.job-x.static { position: static; width: 32px; height: 32px; opacity: 1; flex: none; }
details.later .month-head { margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); font: 800 14px var(--display); display: flex; justify-content: space-between; }
details.later .month-head:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }

/* choosing a bed */
.bedpick { display: grid; gap: 8px; }
.bedopt { text-align: left; font: inherit; color: inherit; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: grid; gap: 2px; }
.bedopt.on { border-color: var(--forest-2); background: color-mix(in srgb, var(--sage) 55%, var(--card)); }
.adv-bad { color: var(--terra); font-weight: 600; }
.adv-good { color: var(--forest); }
.adv-box { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); display: grid; gap: 2px; }

.bedpick .changebed { display: none; justify-self: start; }
.bedpick.picked .bedopt:not(.on) { display: none; }
.bedpick.picked .changebed { display: inline-flex; }
.bedpick { scroll-margin-top: 50px; }

/* groups on the garden plan */
svg.plot .grp-outline { fill: none; stroke: #fff; stroke-dasharray: 0.08 0.05; pointer-events: none; opacity: .9; }
svg.plot .grp-tag { fill: #fff; font-weight: 800; paint-order: stroke; stroke: rgba(30, 50, 30, .65); stroke-width: 0.035; pointer-events: none; }

/* side view: what a bed will look like */
.sideview { display: block; width: 100%; height: auto; border-radius: 12px; }
.sideview .sv-sky { fill: #e9f3f8; } .sideview .sv-soil { fill: #8a6242; }
.sideview .sv-rule { stroke: #6b7c70; stroke-width: 1; } .sideview .sv-rule-t { fill: #4d5d52; font: 600 8px "Figtree", sans-serif; }
:root[data-theme="dark"] .sideview .sv-sky { fill: #1b2a33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sideview .sv-sky { fill: #1b2a33; } }
:root[data-theme="dark"] .sideview .sv-rule-t { fill: #b9c6bc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sideview .sv-rule-t { fill: #b9c6bc; } }
.scene-ctl { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.scene-ctl input { flex: 1; accent-color: var(--forest-2); }
.scene-ctl span { min-width: 76px; text-align: right; font-weight: 700; }

/* no room in a bed */
.noroom { border: 1.5px solid color-mix(in srgb, var(--terra) 45%, var(--line)); background: color-mix(in srgb, var(--terra-soft) 60%, var(--card)); border-radius: 12px; padding: 10px 12px; }
.noroom-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.use.tight .progress i { background: var(--marigold); }
.use.over .progress i { background: var(--terra); }

/* setup quiz and starter plan */
.quiz { max-width: 520px; margin: 0 auto; }
.quiz-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.quiz h1 { margin-top: 18px; outline: none; }
.quiz-opts { display: grid; gap: 10px; margin: 16px 0; }
.quiz-opt { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 64px; text-align: left; font: inherit; font-size: 17px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.quiz-opt .e { font-size: 28px; }
.quiz-opt.on { border-color: var(--forest-2); background: color-mix(in srgb, var(--sage) 60%, var(--card)); }
.quiz-opt:focus-visible { outline: 2px solid var(--forest-2); outline-offset: 2px; }
.quiz-bottom { display: grid; gap: 6px; margin-top: 8px; }
.starter { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0;
  border-bottom: 1px solid var(--line); padding: 10px 0; cursor: pointer; }
.starter:last-of-type { border-bottom: 0; }
.starter .e { font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center; flex: none; border-radius: 12px; overflow: hidden; }
.starter .t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mini-cal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-top: 4px; }
.mini-cal span { font-size: 9px; text-align: center; border-radius: 3px; background: var(--bg-2); color: var(--muted); line-height: 14px; }
.mini-cal span.sow { background: var(--leaf); color: #fff; } .mini-cal span.pick { background: var(--marigold); color: #2b1d00; }
.mini-cal span.now { outline: 1.5px solid var(--ink); }
.legend i.sow { background: var(--leaf); } .legend i.pick { background: var(--marigold); }

/* the guided tour */
#tour { position: fixed; inset: 0; z-index: 50; }
#tour .tour-block { position: absolute; inset: 0; }
#tour .tour-ring { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(10, 20, 14, .55); border: 2px solid var(--forest-2); pointer-events: none; transition: all .25s; }
#tour .tour-bubble { position: fixed; left: 12px; right: 12px; max-width: 380px; margin: 0 auto; background: var(--card); color: var(--ink); border-radius: 16px;
  padding: 14px 16px; box-shadow: var(--shadow-lift); border: 1px solid var(--line); }
#tour .tour-bubble h3 { margin: 4px 0; }
#tour .tour-bubble p { margin: 0; }
.tour-why summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--forest-2); margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { #tour .tour-ring { transition: none; } }

/* getting started checklist */
.cl-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cl-row .n { flex: 1; } .cl-row.done .n { color: var(--muted); text-decoration: line-through; }
.cl-tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 13px; color: var(--on-primary); flex: none; }
.cl-row.done .cl-tick { background: var(--forest-2); border-color: var(--forest-2); }

/* sample garden banner */
.samplebar { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  max-width: 760px; margin: 8px auto 0; padding: 8px 12px; border-radius: 12px; background: var(--marigold-soft); border: 1px solid color-mix(in srgb, var(--marigold) 40%, var(--line));
  font-size: 14px; width: calc(100% - 32px); }

/* moving demos */
.clip-box { margin: 10px 0 2px; }
.clip { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--bg-2); }
.clip .clip-plan { fill: #cfe5b8; } .clip .clip-grid { stroke: rgba(60, 100, 40, .18); stroke-width: 1; }
.clip .clip-card { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.clip .clip-btn { fill: var(--sage); } .clip .clip-primary { fill: var(--forest-2); }
.clip .clip-input { fill: var(--bg); stroke: var(--line); }
.clip .clip-bed { fill: #7a5230; } .clip .clip-strip { fill: #f2a564; }
.clip .clip-hi { fill: none; stroke: var(--forest-2); stroke-width: 3; }
.clip .clip-t { font: 600 10px "Figtree", sans-serif; fill: var(--ink); } .clip .clip-t.b { font-weight: 800; font-size: 11.5px; }
.clip .clip-t.s { font-size: 9px; } .clip .clip-t.w { fill: var(--on-primary); font-weight: 800; } .clip .clip-t.ok { fill: var(--forest); font-weight: 700; }
.clip .clip-tap { fill: var(--forest-2); }
.clip .clip-band { fill: var(--card); } .clip .clip-cap { font: 800 12px "Figtree", sans-serif; fill: var(--ink); }
.clip .clip-sat { fill: #56703f; } .clip .clip-sat2 { fill: #6c8a4b; } .clip .clip-roof { fill: #a9a39a; } .clip .clip-road { stroke: #c8c2b6; stroke-width: 8; }
.clip .clip-dot { fill: #f2b01e; stroke: #fff; stroke-width: 2; }
.clip .clip-outline { fill: #f2b01e; stroke: #f2b01e; stroke-width: 3; }
.clip .clip-pot { fill: #c0714a; stroke: #8e4f30; stroke-width: 1.5; }
.clip-pair { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
@media (min-width: 640px) { .clip-pair { grid-template-columns: 1fr 1fr; } }
.clip-steps { margin: 8px 0 0; }
#tour .tour-bubble { max-height: calc(100vh - 16px); overflow-y: auto; }
:root[data-theme="dark"] .clip .clip-plan { fill: #2c4a26; }

.clip .clip-tree { fill: #2f6b2a; stroke: #1d4a1a; } .clip .clip-shed { fill: #8a6a4a; stroke: #5d4630; } .clip .clip-compost { fill: #4a3a28; stroke: #2e2418; }
/* the front-page reel */
.reel-wrap { max-width: 520px; margin: 4px auto 16px; text-align: left; }
.reel { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: var(--shadow); }
.reel-screen { aspect-ratio: 320 / 236; display: flex; flex-direction: column; justify-content: center; }
.reel-title { font: 800 15px var(--display); text-align: center; margin: 0 0 6px; color: var(--forest); }
.reel-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; border-radius: 12px;
  background: linear-gradient(160deg, var(--forest-2), var(--forest)); color: #fff; padding: 20px; animation: reel-in .5s ease-out; }
.reel-card b { font: 800 clamp(20px, 5vw, 28px)/1.15 var(--display); } .reel-card span { font-weight: 700; opacity: .9; }
@keyframes reel-in { from { opacity: 0; transform: scale(.97); } }
.reel-bar { display: flex; gap: 4px; margin-top: 10px; } .reel-bar span { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.reel-bar i { display: block; height: 100%; width: 0; background: var(--forest-2); }
.reel-play { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); border: 0; border-radius: 999px; padding: 10px 18px;
  font: 800 14px "Figtree", sans-serif; background: #fff; color: var(--forest); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); cursor: pointer; }
.reel.still { padding: 14px 18px; }
.clip .clip-attr { font: 600 7px "Figtree", sans-serif; fill: #fff; opacity: .85; }
.clip .clip-crop-garlic { fill: #efe3c2; } .clip .clip-crop-beans { fill: #8cc96f; }
.outline-box summary { cursor: pointer; list-style: revert; } .outline-box[open] summary { margin-bottom: 4px; }
.clip .clip-crop-corn { fill: #f3d36b; } .clip .clip-crop-squash { fill: #f0a14e; } .clip .clip-cost { fill: var(--sage); }

/* the welcome title, in the same style as the header's brand */
.hero { padding-top: 26px; }
.hero-mark { display: flex; justify-content: center; margin-bottom: 10px; }
.hero-mark svg { width: 52px; height: 52px; filter: drop-shadow(0 6px 14px rgba(20, 63, 40, .25)); }
.hero h1.hero-title { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 11vw, 56px); line-height: 1; letter-spacing: -.035em; color: var(--ink); margin: 0 0 12px; }
.hero-title .g { color: var(--forest-2); }
.hero p.hero-sub { font-size: 16.5px; line-height: 1.5; max-width: 25em; margin: 0 auto 18px; }
.hero-sub b { color: var(--ink); font-weight: 800; }

/* the reel's finish */
.reel-finale { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; border-radius: 12px; padding: 14px 12px;
  color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .18), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(242, 179, 76, .35), transparent 60%), linear-gradient(160deg, #1e9e5a, #0f5e34); }
.fin-veg { display: flex; gap: 4px; font-size: clamp(22px, 6.5vw, 30px); line-height: 1; }
.fin-veg span { display: inline-block; animation: fin-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.fin-title { font: 800 clamp(22px, 6.4vw, 30px)/1.05 var(--display); letter-spacing: -.02em; animation: fin-up .5s .55s ease-out both; }
.fin-title span { color: #ffd479; display: inline-block; }
.fin-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.fin-chips span { font: 700 11.5px "Figtree", sans-serif; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 4px 9px; animation: fin-up .45s ease-out both; }
.fin-chips span:nth-child(1) { animation-delay: 1s; } .fin-chips span:nth-child(2) { animation-delay: 1.25s; } .fin-chips span:nth-child(3) { animation-delay: 1.5s; }
.fin-cta { background: #fff; color: var(--forest); font: 800 15px "Figtree", sans-serif; text-decoration: none; border-radius: 999px; padding: 10px 20px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .15), 0 12px 24px -10px rgba(0, 0, 0, .5); animation: fin-up .45s 1.9s ease-out both, fin-pulse 1.6s 2.6s ease-in-out infinite; }
@keyframes fin-pop { from { transform: scale(0) rotate(-20deg); opacity: 0; } }
@keyframes fin-up { from { transform: translateY(10px); opacity: 0; } }
@keyframes fin-pulse { 50% { transform: scale(1.05); } }
.reel.ended .reel-play { left: auto; right: 22px; bottom: 34px; transform: none; width: 34px; height: 34px; padding: 0; font-size: 17px; background: rgba(255, 255, 255, .22); color: #fff; border: 1px solid rgba(255, 255, 255, .4); box-shadow: none; }

/* ---- Build It ---- */
.build-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .build-grid { grid-template-columns: 1fr 1fr; } }
.build-card { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.build-thumb { flex: 0 0 112px; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.build-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .build-t b { font-family: var(--display); font-size: 16px; }
.build-for { color: var(--forest); font-weight: 700; }
.build-hero { border-radius: 16px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.build-step { display: grid; gap: 10px; } .build-step p { margin: 0; display: flex; gap: 10px; align-items: flex-start; }
.build-step-art { border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.step-n { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--forest-2); color: #fff; display: grid; place-items: center; font-size: 13px; }
@media (min-width: 640px) { .build-step { grid-template-columns: 260px 1fr; align-items: center; } }
.mats .mat { padding: 10px 0; border-bottom: 1px solid var(--line); } .mat-row { display: flex; justify-content: space-between; gap: 10px; }
.mat-choice { margin: 8px 0 0 10px; padding-left: 10px; border-left: 3px solid var(--sage-2); }
.mat-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mat-links a { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--sage); color: var(--forest); text-decoration: none; }
.mat-total { padding-top: 10px; }
/* the drawings */
.ba { display: block; width: 100%; height: auto; }
.ba .ba-soil { fill: #8a6243; } .ba .ba-soil-top { stroke: #6e4c32; stroke-width: 2; }
.ba .ba-bed { fill: #6e4c32; }
.ba .ba-cane { stroke: #c9a35a; stroke-width: 3.2; stroke-linecap: round; } .ba .ba-cane-s { stroke: #c9a35a; stroke-width: 2.4; stroke-linecap: round; }
.ba .ba-string { fill: none; stroke: #7a5a33; stroke-width: 1.4; }
.ba .ba-tie { fill: none; stroke: #7a5a33; stroke-width: 2.4; } .ba .ba-tie8 { fill: none; stroke: #7a5a33; stroke-width: 1.8; }
.ba .ba-mark { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 6 5; opacity: .85; }
.ba .ba-stem { fill: none; stroke: #3f8f3a; stroke-width: 2.2; stroke-linecap: round; } .ba .ba-leaf { fill: #5bb04f; }
.ba .ba-flower-red { fill: #e2453c; } .ba .ba-flower-white { fill: #fff; } .ba .ba-tomato { fill: #e2453c; }
.ba .ba-net { stroke: #2f6b2a; stroke-width: .7; opacity: .7; } .ba .ba-netbox { fill: none; stroke: #2f6b2a; stroke-width: 1.4; }
.ba .ba-wood { fill: #c79a62; stroke: #8e6838; stroke-width: 1.2; } .ba .ba-wood-side { fill: #b4864f; stroke: #8e6838; stroke-width: 1.2; } .ba .ba-seam { stroke: #8e6838; stroke-width: 1.2; }
.ba .ba-pipe { fill: none; stroke: #2b2b2b; stroke-width: 3.2; stroke-linecap: round; }
.ba .ba-cover { fill: rgba(255, 255, 255, .5); stroke: #fff; stroke-width: 1.5; }
.ba .ba-brick { fill: #b5523b; }
.ba .ba-bottle { fill: rgba(200, 230, 255, .45); stroke: #6aa0c8; stroke-width: 1.6; } .ba .ba-lid { fill: #2f7fd0; }
.ba .ba-labelpaper { fill: #f2b01e; } .ba .ba-cutline { stroke: #e2453c; stroke-width: 2; stroke-dasharray: 4 3; }
.ba .ba-poly { fill: rgba(210, 235, 255, .55); stroke: #c79a62; stroke-width: 3; }
.ba .ba-sun { fill: #f6c445; }
.ba .ba-label { font: 700 10px "Figtree", sans-serif; fill: var(--ink); paint-order: stroke; stroke: var(--bg-2); stroke-width: 3px; }
.ba .ba-new .ba-cane, .ba .ba-new .ba-cane-s { stroke: #f2a516; } .ba .ba-new .ba-pipe { stroke: #f2a516; }
.ba .ba-new .ba-wood, .ba .ba-new .ba-wood-side { stroke: #f2a516; stroke-width: 2.4; } .ba .ba-new .ba-string, .ba .ba-new .ba-tie, .ba .ba-new .ba-tie8 { stroke: #f2a516; }
.ba .ba-new { animation: ba-in .6s ease-out both; }
@keyframes ba-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ba .ba-new { animation: none; } }
.ba-plain .ba-label { display: none; }
.ba .ba-grass { fill: #7fae5a; } .ba .ba-compost { fill: #3d2a1c; } .ba .ba-card { fill: #c9a77a; } .ba .ba-level { fill: #f2b01e; stroke: #8e6a10; } .ba .ba-bubble { fill: #9be07a; }
.ba .ba-slat { fill: #d8b27c; stroke: #8e6838; stroke-width: .8; } .ba .ba-tray { fill: #333; } .ba .ba-potclay { fill: #c0714a; stroke: #8e4f30; }
.ba .ba-pallet { fill: #d2b07c; stroke: #9a7442; stroke-width: .8; } .ba .ba-pallet-bar { fill: #b8915a; stroke: #9a7442; stroke-width: .8; }
.ba .ba-tieblk { fill: #222; } .ba .ba-bare { fill: #5e4130; } .ba .ba-green { fill: #6fae4a; } .ba .ba-brown { fill: #a77b4d; } .ba .ba-carpet { fill: #8a3b3b; }
.ba .ba-new .ba-pallet, .ba .ba-new .ba-slat { stroke: #f2a516; stroke-width: 1.4; }
.ba .ba-flower-sweet { fill: #ec6fa8; } .ba .ba-flower-purple { fill: #8a5cc9; } .ba .ba-potrim { fill: #b5653f; } 
.ba .ba-wall { fill: #d9c2a8; } .ba .ba-brickline { stroke: #c4a98b; stroke-width: 1; } .ba .ba-downpipe { fill: #555; } .ba .ba-block { fill: #a9a9a3; stroke: #85857f; }
.ba .ba-butt { fill: #2f6b3a; } .ba .ba-butt-top { fill: #3b8048; } .ba .ba-lid-top { fill: #23552d; } .ba .ba-tap { fill: #222; } .ba .ba-diverter { fill: #333; }
.ba .ba-hose { fill: none; stroke: #222; stroke-width: 3; } .ba .ba-can { fill: #2f7fd0; } .ba .ba-can-spout { stroke: #2f7fd0; stroke-width: 3; } .ba .ba-rain { stroke: #6aa0c8; stroke-width: 1.6; }
.ba .ba-new .ba-diverter, .ba .ba-new .ba-block { stroke: #f2a516; stroke-width: 2; }
.build-links { display: grid; gap: 8px; } .build-link { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px; }
.build-link-art { flex: 0 0 84px; border-radius: 8px; overflow: hidden; background: var(--bg-2); } .build-link b { display: block; } .build-link small { color: var(--muted); }
.build-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; font-size: 13px; font-weight: 700; color: var(--muted); }
.build-strip a { padding: 5px 11px; border-radius: 999px; background: var(--soil-soft, #f3ebe1); color: var(--ink); text-decoration: none; border: 1px solid var(--line); }
.ba .ba-pod { fill: none; stroke: #4f8f3a; stroke-width: 3.5; stroke-linecap: round; } .build-role { margin: 10px 0 6px; } .build-note { display: block; color: var(--forest) !important; font-weight: 600; }

/* Build It: the 3D drawings */
.iso-wrap { background: radial-gradient(120% 90% at 30% 10%, #fffaf0 0%, #f3e8d4 70%, #eadbc2 100%); border-radius: inherit; }
:root[data-theme="dark"] .iso-wrap { background: radial-gradient(120% 90% at 30% 10%, #3a342a, #2a251d 80%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .iso-wrap { background: radial-gradient(120% 90% at 30% 10%, #3a342a, #2a251d 80%); } }
.iso { display: block; width: 100%; height: auto; max-height: 340px; }
.build-thumb .iso-wrap, .build-link-art .iso-wrap { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.build-thumb .iso { max-height: 110px; } .build-link-art .iso { max-height: 70px; }

/* Build It: steps like Mill Makes - a big picture, the instruction, a check before moving on */
.build-progress .progress { height: 8px; }
.bstep { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin: 0 0 14px; box-shadow: var(--shadow); }
.bstep.done { opacity: .75; }
.bstep-art { background: var(--bg-2); } .bstep-art .iso { max-height: 380px; }
.bstep-body { padding: 14px 16px 16px; } .bstep-body p { margin: 0 0 12px; display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; }
.bstep-check { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14.5px; cursor: pointer; }
.bstep-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--forest-2); flex: 0 0 auto; }
.bstep-check small { display: block; font-size: 10.5px; letter-spacing: .08em; font-weight: 800; color: var(--forest); margin-bottom: 2px; }
.workshop { position: fixed; inset: 0; z-index: 3000; background: var(--bg); display: flex; flex-direction: column; overflow-y: auto; }
.ws-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 0; }
.ws-dots { display: flex; gap: 5px; padding: 8px 14px; } .ws-dots i { flex: 1; height: 5px; border-radius: 3px; background: var(--line); } .ws-dots i.done { background: var(--sage-2); } .ws-dots i.on { background: var(--forest-2); }
.ws-art { background: var(--bg-2); } .ws-art .iso { max-height: 38vh; }
.ws-body { padding: 14px 18px; flex: 1; } .ws-n { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
.ws-text { font-size: clamp(20px, 5.4vw, 26px); line-height: 1.35; font-weight: 600; margin: 6px 0 16px; font-family: var(--display); }
.ws-check { font-size: 16px; }
.ws-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); position: sticky; bottom: 0; background: var(--bg); }