/* "Your little garden" — the daily check-in card inside the Today hero (js/gardenView.js), drawn as
   a small pastel garden: cream sky, soft mint hills, tiny plants that fill in with the streak, the
   ONE plant companion (js/companion.js; its slot is sized in css/companion.css) standing tall on
   the hill, four garden spots for today and the seven days as a path of leaves.
   Layout (round 3): the big plant has its own column, as tall as the drawing; Today's greeting, the
   name + About, the streak, today's action and the four spots stack beside it (together about as
   tall as the plant, so they cost no extra height) and the leaf path runs under both. The plant's box is reserved —
   no text, spot, leaf or button ever sits under it.
   Its own near-opaque cream surface and text colour, so it stays readable on every hero palette
   (the night hero is navy with light text) and above the ambient weather layer. Animations only
   move transform/opacity, play once, and are off with reduced motion (OS or html[data-motion]). */
.garden-card {
  --g-ink: #1F2A24; --g-muted: #56635B; --g-leaf: #3E9A66; --g-leaf-soft: #8FCFA6; --g-peach: #F4A98A; --g-line: #B9D9C4;
  --g-text: #1F6340;  /* ≥ 4.5:1 (about 6:1) on the cream card, its peach corner and the hills, and with white text (WCAG AA) */
  --g-bg: linear-gradient(170deg, #FFFBF2 0%, #FFF8EF 55%, #F6FAF1 100%);
  --g-hill-back: #E6F4E9; --g-hill-front: #D5EDDC; --g-grass: #6DBB8A; --g-stem: #5DAF7C;
  --g-scene-w: var(--dc-today-w, 100px); --g-land-h: 88px; --g-pad-x: 12px; --g-pad-b: 3px;
  position: relative; z-index: 2; color: var(--g-ink);
  background: radial-gradient(110% 80% at 0% 0%, rgba(255, 214, 168, 0.30), transparent 55%), var(--g-bg);
  border-radius: 22px; padding: 7px var(--g-pad-x) var(--g-pad-b); margin: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 18px rgba(43, 60, 46, 0.09);
}
/* Night: moonlit — cool lavender cream sky, blue-mint hills. */
html[data-time-theme="night"]:not([data-period]) .garden-card { /* css/living.css paints each period */
  --g-ink: #1E2440; --g-muted: #4C5474; --g-leaf: #4F9C7E; --g-leaf-soft: #9DCDBB; --g-line: #C3CBEA;
  --g-text: #23604C;
  --g-bg: linear-gradient(170deg, #F6F5FF 0%, #F0F1FF 60%, #ECF2F4 100%);
  --g-hill-back: #E3E8F7; --g-hill-front: #D3DCEF; --g-grass: #74AE9A; --g-stem: #6AA893;
  background: radial-gradient(56px 56px at 90% 10%, rgba(255, 224, 143, 0.30), transparent 70%), var(--g-bg);
}

/* ---- The scene: hills behind the plant, the spots and the leaf path ---- */
.garden-scape { position: relative; }
.garden-land { position: absolute; left: calc(-1 * var(--g-pad-x)); right: calc(-1 * var(--g-pad-x)); bottom: calc(-1 * var(--g-pad-b)); height: var(--g-land-h); border-radius: 0 0 22px 22px; overflow: hidden; pointer-events: none; }
.garden-land svg { display: block; width: 100%; height: 100%; }
.gl-hill-back { fill: var(--g-hill-back); }
.gl-hill-front { fill: var(--g-hill-front); }
/* Two columns: the plant (exactly its slot's width) and the copy. The copy column is a flex stack —
   name + About at the top (level with the leaves), the spots at the bottom (on the hill). */
.garden-top { position: relative; display: grid; grid-template-columns: var(--g-scene-w) minmax(0, 1fr); grid-template-areas: "scene copy"; column-gap: 8px; row-gap: 0; align-items: stretch; }
.garden-scene { grid-area: scene; position: relative; width: var(--g-scene-w); align-self: stretch; display: flex; align-items: flex-end; justify-content: center; }
.garden-plant { position: relative; display: flex; justify-content: center; margin-bottom: 0; }
.gs-plants { position: absolute; left: -4px; right: -4px; bottom: -2px; height: 24px; pointer-events: none; }
.gs-plants-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gp-grass { fill: none; stroke: var(--g-grass); stroke-width: 1.3; stroke-linecap: round; }
.gp-stem { fill: none; stroke: var(--g-stem); stroke-width: 1.2; stroke-linecap: round; }
.gp-leaf { fill: #7CC897; }
.gp-bud { fill: #FFB3C7; }
.gp-flower.gp-peach circle { fill: #FFC7A8; }
.gp-flower.gp-pink circle { fill: #FFB8CB; }
.gp-heart { fill: #FFD166; }
.gp-spark { fill: #FFD166; }
.gp-sway { transform-box: fill-box; transform-origin: 50% 100%; }
/* A rest day is welcome: a small moon and stars keep the plant company (no "missed", no shame). */
.gs-rest { position: absolute; top: auto; bottom: calc(var(--dc-today-h, 150px) - 36px); right: -4px; width: 20px; height: 20px; pointer-events: none; } /* in the sky beside the leaves (placed from the plant's height) */
.gs-rest-moon { fill: #FFE7A3; stroke: #E0B85A; stroke-width: 0.8; }
.gs-rest-star { fill: #C9C2F2; }
/* Beside the plant: Today's greeting (the page's h1, moved here by js/gardenView.js), then the copy —
   the name row, the streak, today's action, and the spots at the bottom (on the hill). */
.garden-side { grid-area: copy; position: relative; min-width: 0; display: flex; flex-direction: column; }
.garden-greet:empty { display: none; }
.garden-greet .today-greet { position: relative; z-index: auto; display: block; min-height: 0; padding: 0; }
.garden-greet .greeting { margin: 0 0 1px; font-family: var(--font-display); font-size: 16px; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: var(--g-ink); text-wrap: balance; overflow-wrap: anywhere; }
.garden-copy { position: relative; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.garden-copy-main { position: relative; min-width: 0; margin-top: 3px; }

/* The card's name: a small soft heading (no uppercase band of its own any more). */
.garden-label-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 18px; margin: 1px 0 0; }
.garden-label { margin: 0; font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: -0.005em; line-height: 1.3; color: var(--g-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* The About toggle keeps a 44 px tap area without making its row 44 px tall. */
.garden-what { margin: -2px -8px -26px 0; min-height: 44px; padding: 0 8px 24px; /* the 44 px tap box grows down, never over the greeting above */ font-size: 12.5px; font-weight: 700; color: var(--g-text); background: none; text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
/* The same drawn chevron as every other disclosure (css/app.css .dh-disclosure). */
.garden-what::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: -3px 0 0 5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; transform: rotate(45deg); transition: transform 150ms ease; }
.garden-what[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }
.garden-head-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.garden-head { margin: 0; display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.garden-count { font-family: var(--font-display); font-size: 27px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.garden-unit { font-size: 13.5px; font-weight: 700; color: var(--g-muted); }
.garden-headline { font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1.25; }
.garden-line { margin: 1px 0 0; font-size: 13px; line-height: 1.35; color: var(--g-muted); }
.garden-next { margin: 1px 0 0; font-size: 12.5px; font-weight: 700; color: var(--g-text); }
.garden-done-row { display: flex; align-items: center; gap: 0 8px; flex-wrap: wrap; }
.garden-done { margin: 1px 0 0; font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--g-ink); outline: none; }
/* A day logged in the Diary shows "✓ Today counts" (its leaf says how); a check-in shows "✓ Rest day" /
   "✓ Checked in" next to its Undo. The hidden words are still read out. */
.garden-done[data-kind="logged"] .gd-sep, .garden-done[data-kind="logged"] .garden-done-how,
.garden-done:not([data-kind="logged"]) .gd-counts, .garden-done:not([data-kind="logged"]) .gd-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.garden-done:not([data-kind="logged"]) .garden-done-how { display: inline-block; }
.garden-done:not([data-kind="logged"]) .garden-done-how::first-letter { text-transform: uppercase; }
.garden-tick { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: var(--g-text); color: #fff; font-size: 10.5px; margin-right: 3px; vertical-align: -2px; }
.garden-undo { margin: -10px 0; min-height: 44px; padding: 0 6px; font-size: 13px; font-weight: 700; color: var(--g-text); background: none; }

/* ---- Four garden spots for today: water, food, movement, sleep (they open the Diary) ---- */
.garden-bed { list-style: none; display: flex; gap: 2px; margin: auto -4px 0; padding: 4px 0 0; }
.garden-bed li { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; margin: 0; padding: 0; border: 0; background: none; }
.gb-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; max-width: 64px; min-width: 44px; min-height: 44px; margin: 0; padding: 1px 0;
  border: 0; border-radius: 14px; background: transparent; color: var(--g-muted); font: inherit; box-shadow: none; cursor: pointer; }
.gb-item:hover { background: rgba(255, 255, 255, 0.55); transform: none; }
.gb-item:focus-visible { outline: 3px solid var(--g-text); outline-offset: 1px; }
.gb-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1.5px rgba(86, 99, 91, 0.32); }
.gb-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gb-label { font-size: 10.5px; font-weight: 700; line-height: 1.15; color: #3F4B44; }
/* Not logged yet: a dashed ring and a plain outline (shape, not colour alone). */
.gb-item:not(.is-logged) .gb-icon { background: rgba(255, 255, 255, 0.5); box-shadow: none; border: 1.5px dashed rgba(86, 99, 91, 0.45); }
/* Logged today: a filled spot in its own soft colour, the shape filled, and a small tick. */
.gb-item.is-logged .gb-icon { box-shadow: 0 1px 3px rgba(43, 60, 46, 0.12); }
.gb-item.is-logged .gb-icon svg path:not(.gb-stroke) { fill: currentColor; fill-opacity: 0.28; }
.gb-water.is-logged { color: #2F78AE; } .gb-water.is-logged .gb-icon { background: #E1F0FB; }
.gb-food.is-logged { color: #B85A36; } .gb-food.is-logged .gb-icon { background: #FDE9DC; }
.gb-move.is-logged { color: #2A7549; } .gb-move.is-logged .gb-icon { background: #DDF2E4; }
.gb-sleep.is-logged { color: #5A4FB8; } .gb-sleep.is-logged .gb-icon { background: #ECE8FB; }
.gb-tick { position: absolute; right: -4px; top: -3px; width: 11px; height: 11px; }
.gb-tick circle { fill: var(--g-text); stroke: #fff; stroke-width: 1.2; }
.gb-tick path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- The seven days: a path of leaves over the hills ---- */
.garden-path { position: relative; margin: 0 -6px; }
.garden-vine { position: absolute; left: 2%; right: 2%; top: 2px; width: 96%; height: 24px; pointer-events: none; }
.garden-vine path { fill: none; stroke: var(--g-line); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 6; }
.garden-week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
.garden-week li { display: flex; justify-content: center; border: 0; padding: 0; margin: 0; background: none; font-size: inherit;
  /* higher in the middle: follows the vine */
  padding-top: calc((var(--i) - 3) * (var(--i) - 3) * 0.3px); }
.garden-leaf { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0;
  width: 100%; max-width: 46px; min-height: 44px; margin: 0; padding: 1px 0 0; border: 0; border-radius: 14px; background: transparent; color: var(--g-muted);
  font: inherit; font-size: 10.5px; font-weight: 700; box-shadow: none; cursor: pointer; }
button.garden-leaf:hover { background: rgba(255, 255, 255, 0.5); transform: none; }
button.garden-leaf:focus-visible, .garden-checkin:focus-visible, .garden-rest:focus-visible, .garden-what:focus-visible, .garden-undo:focus-visible { outline: 3px solid var(--g-text); outline-offset: 2px; }
.garden-leaf svg { width: 24px; height: 24px; display: block; }
.gl-day { line-height: 1.1; }
.gl-today .gl-day { color: var(--g-ink); font-weight: 800; }
.gl-fill { fill: var(--g-leaf); }
.gl-fill.gl-soft { fill: var(--g-leaf-soft); }
.gl-vein { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gl-mark { fill: #fff; }
.gl-rest .gl-mark { fill: #FFE7A3; stroke: #D9A93E; stroke-width: 0.8; }
.gl-open { fill: rgba(255, 255, 255, 0.8); stroke: var(--g-leaf); stroke-width: 1.8; stroke-dasharray: 3 2.4; }
.gl-plus { stroke: var(--g-leaf); stroke-width: 2; stroke-linecap: round; }
.gl-seed { fill: rgba(255, 255, 255, 0.85); stroke: #8E9C93; stroke-width: 1.6; }
.gl-before { fill: #A9B5AD; }
.gl-missed .gl-day, .gl-before .gl-day { color: #505C55; font-weight: 600; }
.gl-before { cursor: default; }

/* ---- Today's action, errors, About ---- */
.garden-foot-area { position: relative; }
.garden-actions { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; margin-top: 6px; }
.garden-checkin { margin: 0; width: auto; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; white-space: nowrap; background: var(--g-text); color: #fff; box-shadow: 0 6px 14px rgba(42, 117, 73, 0.22); }
.garden-checkin:hover { background: #22603C; }
.garden-checkin[aria-disabled="true"] { opacity: .8; cursor: progress; }
.garden-rest { margin: 0; min-height: 44px; padding: 0 6px; color: var(--g-text); font-weight: 700; font-size: 14px; white-space: nowrap; background: none; }
.garden-rest[aria-disabled="true"] { opacity: .6; cursor: progress; }
.garden-note { margin: 2px 0 4px; font-size: 12.5px; color: var(--g-muted); }
.garden-error { margin: 6px 0 4px; font-size: 13px; color: #9A2D1F; background: #FFF1EC; border-radius: 10px; padding: 6px 9px; }
.garden-what-panel { margin: 6px 0 4px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.82); font-size: 13px; line-height: 1.45; color: var(--g-ink); }
.garden-what-panel p { margin: 4px 0; }
.garden-month-line { margin: 2px 0 6px; font-weight: 700; color: var(--g-text); }
.garden-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.garden-loading { margin: 0; padding: 18px 0 0; font-size: 14px; color: var(--g-muted); }

/* ---- Check-in moment: today's leaf grows in, a brief bloom around the plant ---- */
.garden-bloom { position: absolute; inset: 0; pointer-events: none; }
.garden-bloom i { position: absolute; left: 50%; top: 38%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; opacity: 0; background: var(--g-peach); }
.garden-bloom i:nth-child(even) { background: #FFD66B; }

/* ---- Responses to a real save for today (js/gardenView.js playFx; one short play, then gone) ---- */
.gs-fx { position: absolute; inset: -6px -4px 0; pointer-events: none; }
.gs-fx i { position: absolute; display: block; opacity: 0; }
.fx-drop { left: 20%; top: 12%; width: 9px; height: 9px; border-radius: 0 50% 50% 50%; background: #7CC0EC; transform: rotate(45deg); }
.fx-ripple { left: calc(20% - 7px); bottom: 6px; width: 24px; height: 8px; border-radius: 50%; border: 1.5px solid #7CC0EC; }
.fx-spark { width: 10px; height: 10px; background: #FFC857; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
.fx-spark.fs1 { left: 12%; top: 18%; } .fx-spark.fs2 { right: 10%; top: 8%; width: 8px; height: 8px; background: #FF9E86; } .fx-spark.fs3 { right: 18%; top: 44%; width: 7px; height: 7px; }
.fx-fruit { right: 4%; bottom: 14px; width: 9px; height: 9px; border-radius: 50%; background: #FF9E7A; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.08); }
.fx-wind { left: -10%; height: 0; width: 34%; border-top: 2px solid rgba(255, 255, 255, 0.95); border-radius: 50%; filter: drop-shadow(0 0 1px rgba(86, 140, 110, 0.5)); }
.fx-wind.fw1 { top: 26%; } .fx-wind.fw2 { top: 48%; width: 26%; } .fx-wind.fw3 { top: 66%; width: 30%; }
.fx-moon { right: 2px; top: 4px; width: 16px; height: 16px; border-radius: 50%; box-shadow: 5px -2px 0 0 #FFE08F; transform: rotate(-12deg); }
.fx-fly { width: 5px; height: 5px; border-radius: 50%; background: #FFE59A; box-shadow: 0 0 6px 2px rgba(255, 221, 120, 0.7); }
.fx-fly.ff1 { left: 14%; bottom: 30%; } .fx-fly.ff2 { left: 78%; bottom: 44%; } .fx-fly.ff3 { left: 60%; bottom: 18%; }

@media (prefers-reduced-motion: no-preference) {
  .gl-new svg { animation: g-leaf-in 700ms cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 50% 90%; }
  .garden-bloom-on .garden-bloom i { animation: g-bloom 900ms ease-out both; }
  .garden-bloom-on .garden-bloom i:nth-child(1) { --dx: -34px; --dy: -18px; }
  .garden-bloom-on .garden-bloom i:nth-child(2) { --dx: 32px; --dy: -24px; animation-delay: 40ms; }
  .garden-bloom-on .garden-bloom i:nth-child(3) { --dx: -28px; --dy: 16px; animation-delay: 80ms; }
  .garden-bloom-on .garden-bloom i:nth-child(4) { --dx: 34px; --dy: 12px; animation-delay: 60ms; }
  .garden-bloom-on .garden-bloom i:nth-child(5) { --dx: 0; --dy: -40px; animation-delay: 20ms; }
  .garden-bloom-on .garden-bloom i:nth-child(6) { --dx: 6px; --dy: 26px; animation-delay: 100ms; }
  .fx-drop { animation: g-drop 700ms cubic-bezier(.55, 0, .9, .6) both; }
  .fx-ripple { animation: g-ripple 700ms ease-out 620ms both; }
  .fx-spark { animation: g-spark 900ms ease-out both; }
  .fx-spark.fs2 { animation-delay: 120ms; } .fx-spark.fs3 { animation-delay: 240ms; }
  .fx-fruit { animation: g-pop 1100ms ease-out 150ms both; }
  .fx-wind { animation: g-wind 1100ms ease-in-out both; }
  .fx-wind.fw2 { animation-delay: 140ms; } .fx-wind.fw3 { animation-delay: 260ms; }
  .gs-breeze .gp-sway { animation: g-breeze 1300ms ease-in-out both; }
  .fx-moon { animation: g-moon 1600ms ease-in-out both; }
  .fx-fly { animation: g-fly 1500ms ease-in-out both; }
  .fx-fly.ff2 { animation-delay: 180ms; } .fx-fly.ff3 { animation-delay: 360ms; }
  .gb-pulse .gb-icon { animation: g-pulse 700ms ease-out both; }
}
@keyframes g-leaf-in { 0% { transform: scale(0.2) rotate(-18deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes g-bloom { 0% { transform: translate(0, 0) scale(0.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
@keyframes g-drop { 0% { transform: translateY(-14px) rotate(45deg); opacity: 0; } 20% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(58px) rotate(45deg); opacity: 0; } }
@keyframes g-ripple { 0% { transform: scale(0.3); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes g-spark { 0% { transform: scale(0.2) rotate(0); opacity: 0; } 35% { transform: scale(1.1) rotate(30deg); opacity: 1; } 100% { transform: scale(0.6) rotate(70deg); opacity: 0; } }
@keyframes g-pop { 0% { transform: translateY(6px) scale(0.2); opacity: 0; } 30% { transform: translateY(0) scale(1.1); opacity: 1; } 75% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes g-wind { 0% { transform: translateX(0) scaleX(0.4); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: translateX(260%) scaleX(1); opacity: 0; } }
@keyframes g-breeze { 0%, 100% { transform: none; } 30% { transform: rotate(9deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
@keyframes g-moon { 0% { transform: translateY(6px) rotate(-12deg); opacity: 0; } 30%, 70% { transform: rotate(-12deg); opacity: 1; } 100% { transform: rotate(-12deg); opacity: 0; } }
@keyframes g-fly { 0% { transform: translate(0, 4px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translate(4px, -22px); opacity: 0; } }
@keyframes g-pulse { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
html[data-motion="reduced"] .garden-card *, html[data-motion="off"] .garden-card * { animation: none !important; }

/* ---- Narrow phones: keep everything on the card, no sideways scroll ---- */
@media (max-width: 380px) {
  .garden-card { --g-land-h: 82px; --g-pad-x: 10px; --g-pad-b: 4px; padding-top: 7px; }
  .garden-top { column-gap: 6px; }
  .garden-count { font-size: 25px; }
  .garden-greet .greeting { font-size: 15.5px; }
  .garden-leaf svg { width: 22px; height: 22px; }
  .garden-bed { margin-left: -3px; margin-right: -3px; gap: 0; }
  .gb-item { min-width: 44px; }
  .garden-checkin { padding: 0 14px; }
  .garden-path { margin-left: -6px; margin-right: -6px; }
}
/* Very narrow (320 px): the four spots take two rows rather than shrinking under 44 px. */
@media (max-width: 340px) {
  .garden-bed { flex-wrap: wrap; row-gap: 2px; }
  .garden-bed li { flex: 0 0 50%; }
  .garden-label-row { gap: 2px; }
  .garden-label { font-size: 12px; letter-spacing: -0.01em; }
  .garden-what { padding: 0 4px 24px; margin-right: -4px; }
}
@media (min-width: 700px) {
  .garden-card { --g-land-h: 96px; --g-pad-x: 16px; --g-pad-b: 6px; padding-top: 10px; }
  .garden-count { font-size: 30px; }
  .garden-label { font-size: 13.5px; }
  .garden-bed { justify-content: flex-start; gap: 6px; margin-left: -6px; }
  .garden-bed li { flex: 0 0 64px; }
  /* Wide cards: one centred block, framed by the hills on both sides (no empty right half): the tall
     plant on the left, and beside it the name, the streak, the spots and the leaf path, so the big
     plant costs as little height as possible. .garden-top steps aside (display: contents) so its
     parts join this grid; the hills stay full width. */
  .garden-scape { display: grid; grid-template-columns: minmax(0, 1fr) var(--g-scene-w) minmax(0, 480px) minmax(0, 1fr);
    grid-template-areas: ". scene copy ." ". scene path ." ". scene quote ."; column-gap: 18px; align-items: end; }
  .garden-top { display: contents; }
  .garden-scene { align-self: end; }
  .garden-side { align-self: stretch; }
  .garden-greet .greeting { font-size: 20px; margin-bottom: 2px; }
  .garden-path { grid-area: path; margin: 4px 0 0; max-width: none; }
  .garden-what-panel, .garden-error, .garden-note { max-width: 622px; margin-left: auto; margin-right: auto; }
}