/* tiarella: a nursery field guide. Moss leads; paper, linen and terracotta support. */
:root {
  /* Refresh 2026-11-02: a nursery field guide rather than a gadget. Warm paper, moss-green ink, terracotta for pots,
     a plum kept only for flowers; square-ish corners and hairlines instead of pills and glows. */
  --bg: #F7F3EB;
  --linen: #EFE9DD;
  --card: #FFFDF8;
  --ink: #1E241D;
  --muted: #5C6258;
  --faint: #6A6F64;
  --plum: #2F4B35;
  --plum-deep: #213826;
  --on-plum: #FFFFFF;
  --lilac-soft: #E7EEE1;
  --bloom: #7A5698;
  /* The sky over the plant: sage in shade, a pale straw at noon (mixed by --day, 0 shade to 1 full sun). */
  --sky-shade: #D7E0D0; --sky-sun: #F1E7C9; --dapple: rgba(58, 96, 52, .18); --sun-core: #E9B347; --sun-pale: #E9E4D2;
  --seg-thumb: #FFFDF8;
  --terracotta: #B8704E;
  --line: #E3DBCD;
  --line-strong: #CEC3B0;
  --oak: #E3CFAE;
  --oak-edge: #C9AE86;
  --bar: rgba(247, 243, 235, .86);
  /* One type scale for every page: page title, section heading. */
  --h1: clamp(38px, 4.6vw, 60px);
  --h2: clamp(26px, 2.6vw, 32px);
  --r: 4px;
  --r-sm: 3px;
  --r-pill: 4px;
  --btn: var(--plum);
  --on-btn: #FFFFFF;
  --shadow-sm: 0 1px 0 rgba(40, 30, 20, .05);
  --shadow: 0 1px 2px rgba(40, 30, 20, .06), 0 10px 28px rgba(40, 30, 20, .07);
  --display: 'Libre Caslon Display', Georgia, serif;
  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans: 'Libre Franklin', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --glide: cubic-bezier(.32, .72, 0, 1);
  --shadow-soft: 0 1px 2px rgba(40, 30, 20, .05), 0 12px 30px -12px rgba(40, 30, 20, .14);
  --spring: cubic-bezier(.34, 1.36, .5, 1);
  --gutter: clamp(20px, 5vw, 48px);
  --max: 1200px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1D1A; --linen: #24261F; --card: #2A2C25; --ink: #F2EDE3; --muted: #B5AFA3; --faint: #9A958B;
    --plum: #C3D6A8; --plum-deep: #B2C893; --on-plum: #18200F; --btn: #55744B; --on-btn: #F4F1E8; --lilac-soft: #2C2F27;
    --sky-shade: #1F2A22; --sky-sun: #3E3522; --dapple: rgba(0, 0, 0, .35); --sun-core: #E9B44C; --sun-pale: #4A4C42; --seg-thumb: #3D4137;
    --bloom: #C9A8E0; --line: #34362F; --line-strong: #44473E; --oak: #5B4A37; --oak-edge: #3F3326; --bar: rgba(28, 29, 26, .78);
    --shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 18px 40px rgba(0, 0, 0, .35);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .2), 0 8px 24px -6px rgba(0, 0, 0, .3), 0 28px 60px -18px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
a { color: inherit; }
html { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: -.012em; line-height: 1.04; }
h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 14px; z-index: 60; border-radius: 8px; }
.skip:focus { left: 8px; }

/* Controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border: 0; border-radius: var(--r-pill); background: var(--btn); color: var(--on-btn); font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .25s, transform .25s var(--ease), box-shadow .25s; }
.btn:hover { background: color-mix(in srgb, var(--btn) 86%, #000); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:active { transform: scale(.97); }
.btn-light { background: #fff; color: var(--plum); }
.btn-light:hover { background: #F4EFF8; }
.chev { font-size: 15px; color: var(--plum); text-decoration: none; }
.chev::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: translateY(-1px) rotate(45deg); }
.chev:hover { text-decoration: underline; text-underline-offset: 3px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); text-decoration: none; }
.back::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); margin-right: 2px; }
.back:hover { color: var(--ink); }
.two-tone { font-size: var(--h2); line-height: 1.12; letter-spacing: -.01em; }
.two-tone b { font-weight: 400; color: var(--ink); }
.two-tone span { color: var(--faint); }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--muted); }

/* Bar */
.bar { position: sticky; top: 0; z-index: 40; background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.bar-inner { max-width: var(--max); margin: 0 auto; height: 56px; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { justify-self: start; }
.brand img { height: 28px; width: auto; }
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: block; } }
.nav { display: flex; gap: 34px; }
.nav a { font-size: 14px; text-decoration: none; color: var(--muted); transition: color .2s; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.bar-end { justify-self: end; display: flex; align-items: center; gap: 18px; }
.where { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.where svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.where select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 4px 0;
  font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.where select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bag { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; text-decoration: none; transition: background .2s; }
.bag:hover { background: var(--lilac-soft); }
.bag-icon { width: 18px; height: 16px; background: var(--terracotta); clip-path: polygon(0 18%, 100% 18%, 84% 100%, 16% 100%); border-radius: 2px; position: relative; }
.bag-icon::before { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 4px; background: #D69878; }
.bag-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--plum); color: var(--on-plum); font: 600 10px/16px var(--sans); text-align: center; }
.bag.bump { animation: bump .5s var(--spring); }
@keyframes bump { 40% { transform: scale(1.18); } }

/* Live turntable */
.stage { position: absolute; inset: 0; view-transition-name: stage; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; transition: opacity .32s ease-out; }
.ghost { position: fixed; left: 0; top: 0; z-index: 45; margin: 0; object-fit: contain; object-position: bottom; pointer-events: none; will-change: transform; }
.stage canvas:active { cursor: grabbing; }
.stage canvas:focus-visible { outline-offset: -6px; border-radius: var(--r); }
.stage-fallback { position: absolute; inset: 6% 14%; width: 72%; height: 88%; object-fit: contain; }
.stage-slot { position: relative; }
.stage-hint { position: absolute; z-index: 2; left: 50%; bottom: 8px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; line-height: 1; color: var(--muted); background: color-mix(in srgb, var(--card) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .8s; pointer-events: none; white-space: nowrap; }
.hint-ico { width: 14px; height: 6px; border: 1.5px solid currentColor; border-top: 0; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.touched .stage-hint { opacity: 0; }
.stage-slot.loading::after { content: ""; position: absolute; left: 50%; top: 48%; width: 24px; height: 24px; margin: -12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--plum); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- HOME */
.hero { max-width: var(--max); margin: 0 auto; padding: clamp(32px, 6vh, 64px) var(--gutter) 0; text-align: center; }
.hero h1 { font-size: clamp(44px, 5.4vw, 68px); line-height: 1; letter-spacing: -.02em; margin: 0 auto 16px; max-width: 14ch; text-wrap: balance; }
.hero .lede { max-width: 30em; margin: 0 auto clamp(32px, 5vh, 48px); text-wrap: balance; }

/* Pot or ground: two equal halves and one white thumb that glides between them. */
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.seg::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--r-pill); background: var(--seg-thumb); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 3px 10px rgba(0, 0, 0, .06); transition: transform .5s var(--glide); }
.seg:empty::before { display: none; }
.seg:has([data-mode="ground"][aria-checked="true"])::before { transform: translateX(100%); }
.seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: transparent; font-size: 15px; font-weight: 500; color: var(--muted); white-space: nowrap; cursor: pointer; transition: color .3s; }
.seg button[aria-checked="true"] { color: var(--ink); }
.seg-ico { width: 16px; height: 14px; display: inline-block; }
.seg-pot { background: var(--terracotta); clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); }
.seg-ground { background: linear-gradient(transparent 62%, #7A5A3E 62%); position: relative; }
.seg-ground::before { content: ""; position: absolute; left: 7px; top: 0; width: 2px; height: 10px; background: #6F8F4E; border-radius: 1px; }
.seg-ground::after { content: ""; position: absolute; left: 3px; top: 2px; width: 10px; height: 5px; border-radius: 50%; border: 2px solid #6F8F4E; border-bottom: 0; }

/* The showcase is a little piece of weather: a sky with a sun to tap, the plant lit by it, and pot or ground as two
   objects to tap. Nothing is boxed in; the sky fades into the page. The caption sits beside the plant (wide) or
   beneath it, never over it. Spacing is on an 8px scale. */
.showcase { --day: .6; --sky: color-mix(in oklab, var(--sky-sun) calc(var(--day) * 100%), var(--sky-shade));
  position: relative; isolation: isolate; display: grid; grid-template-areas: "sky" "stage" "months" "choose"; justify-items: center;
  max-width: 1120px; margin: 0 auto; padding: 0 0 40px; }
.sky { grid-area: sky; position: relative; z-index: 1; width: 100%; height: 104px; cursor: pointer; user-select: none; -webkit-user-select: none; }
/* The sky's colour has no edges: it fades out at the sides and into the page below. */
.sky::before, #slot-home::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.sky::before { background: linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--sky) 70%, var(--bg))); }
/* The sun stays in the middle of its sky. Bright and gold in full sun, smaller and paler with less, leaves drifting
   across it when dappled and nearly hiding it, greyed, in full shade. Until the first tap it breathes, as if to say
   it can be touched. */
.sun { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: none; transform: translate(-50%, -50%); cursor: pointer; }
.sun span { position: absolute; inset: calc(16px - var(--day) * 6px); border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #FFF6DA, color-mix(in oklab, var(--sun-core) calc(30% + var(--day) * 70%), var(--sun-pale)) 62%);
  box-shadow: 0 0 calc(6px + var(--day) * 34px) calc(var(--day) * 10px) color-mix(in oklab, var(--sun-core) calc(var(--day) * 60%), transparent);
  transition: transform .3s var(--spring), filter .6s, opacity .6s; }
.sun:not(.used) span { animation: sun-breathe 2.8s ease-in-out 1s 3; }
@keyframes sun-breathe { 50% { transform: scale(1.14); } }
.sun:hover span { transform: scale(1.1); }
.sun.tapped span { animation: sun-tap .5s var(--spring); }
@keyframes sun-tap { 40% { transform: scale(.82); } }
.sun:focus-visible { outline-offset: -4px; border-radius: 50%; }
[data-light="shade"] .sun span { filter: grayscale(.85); opacity: .55; }
/* Full sun alone has rays. */
.sun::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; opacity: 0; transform: rotate(0) scale(.8);
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--sun-core) 80%, transparent) 0 5deg, transparent 5deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 64%, #000 66%, #000 92%, transparent 94%); mask-image: radial-gradient(closest-side, transparent 64%, #000 66%, #000 92%, transparent 94%);
  transition: opacity .6s, transform .9s var(--glide); }
[data-light="sun"] .sun::before { opacity: 1; transform: rotate(15deg) scale(1); }
/* Two leaves, out of sight until the light drops. */
.sun-leaf { position: absolute; width: 30px; height: 17px; border-radius: 0 100% 0 100%; background: #5F7F44; opacity: 0; pointer-events: none;
  transition: opacity .6s, transform .7s var(--glide); }
.sun-leaf:nth-of-type(1) { left: 30px; top: 30px; transform: translate(14px, 10px) rotate(-20deg); }
.sun-leaf:nth-of-type(2) { left: 6px; top: 16px; transform: translate(-14px, -6px) rotate(150deg) scale(.9); background: #6F8F4E; }
[data-light="dappled"] .sun-leaf:nth-of-type(1) { opacity: .9; transform: translate(0, 0) rotate(-20deg); }
[data-light="shade"] .sun-leaf { opacity: .95; }
[data-light="shade"] .sun-leaf:nth-of-type(1) { transform: translate(-8px, -6px) rotate(-20deg) scale(1.25); }
[data-light="shade"] .sun-leaf:nth-of-type(2) { transform: translate(8px, 6px) rotate(150deg) scale(1.15); }
@media (prefers-reduced-motion: reduce) { .sun span { animation: none !important; } }
/* The light it gives, in words, beside it. */
#slot-home { grid-area: stage; width: 100%; height: clamp(360px, 48vh, 520px); isolation: isolate; }
#slot-home::after { background: linear-gradient(180deg, color-mix(in oklab, var(--sky) 70%, var(--bg)), var(--bg) 92%); }
/* Shade is dappled: small soft leaf shadows over the plant, drifting slowly, fading out as the sun climbs. */
#slot-home::before { content: ""; position: absolute; inset: -4% 6%; z-index: 0; pointer-events: none; opacity: var(--dapples, 0); transition: opacity .6s;
  background: radial-gradient(7% 4.5% at 20% 26%, var(--dapple), transparent), radial-gradient(5% 3.5% at 31% 18%, var(--dapple), transparent),
    radial-gradient(8% 5% at 72% 22%, var(--dapple), transparent), radial-gradient(5% 3% at 82% 40%, var(--dapple), transparent),
    radial-gradient(9% 5.5% at 76% 66%, var(--dapple), transparent), radial-gradient(6% 4% at 24% 60%, var(--dapple), transparent),
    radial-gradient(5% 3% at 14% 78%, var(--dapple), transparent), radial-gradient(7% 4% at 60% 82%, var(--dapple), transparent);
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent);
  animation: dapple 16s ease-in-out infinite alternate; }
@keyframes dapple { to { transform: translate(2.5%, 1.5%) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { #slot-home::before { animation: none; } }
.stage { z-index: 1; }
/* Pot or ground: two small objects, the chosen one lifted. */
.choose { grid-area: choose; display: flex; flex-direction: column; align-items: center; width: 100%; }
.grow-in { display: flex; gap: 32px; justify-content: center; margin-top: 4px; }
.grow-in button { display: grid; justify-items: center; gap: 6px; min-width: 72px; min-height: 64px; padding: 4px 8px; border: 0; background: none; font-size: 14px; color: var(--faint); cursor: pointer; transition: color .3s; }
.grow-in button[aria-checked="true"] { color: var(--ink); }
.obj { position: relative; display: block; width: 34px; height: 28px; opacity: .5; transition: transform .45s var(--spring), opacity .3s, filter .3s; filter: grayscale(.6); }
.grow-in button:hover .obj { opacity: .8; }
.grow-in button[aria-checked="true"] .obj { opacity: 1; filter: none; transform: translateY(-4px); }
.grow-in button[aria-checked="true"] .obj::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -8px; height: 5px; border-radius: 50%; background: rgba(40, 30, 20, .18); filter: blur(2px); }
.obj-pot::before { content: ""; position: absolute; inset: 4px 3px 0; background: var(--terracotta); clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%); border-radius: 2px; }
.obj-pot { background: linear-gradient(#D69878, #D69878) 0 2px / 100% 6px no-repeat; border-radius: 2px; }
.obj-ground::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13px; border-radius: 50% 50% 4px 4px / 100% 100% 4px 4px; background: #7A5A3E; }
.obj-ground { background: radial-gradient(circle at 50% 100%, #6F8F4E 0 1.5px, transparent 2px) 50% 0 / 2px 16px no-repeat; }
/* The months, right under the pot: initials over a thin band coloured by what the plant does then; drag along it. */
.months { grid-area: months; position: relative; z-index: 2; width: min(100% - 48px, 340px); margin: -12px auto 8px; text-align: center; }
/* While the year plays the months stay faint; held, they fade up to be slid along. */
.months-track { transition: opacity .6s; }
.months:not(.held) .months-track { opacity: .35; }
.months:not(.held) .months-track:hover { opacity: .8; }
.months-track { display: grid; grid-template-columns: repeat(12, 1fr); padding: 4px 0; touch-action: none; cursor: ew-resize; user-select: none; -webkit-user-select: none; border-radius: 8px; }
.mo { display: grid; justify-items: center; gap: 5px; }
.mo b { font: 400 12px/1 var(--serif); color: var(--faint); transition: color .2s, transform .3s var(--spring); }
.mo i { width: 100%; height: 3px; background: color-mix(in srgb, #6F8F4E 40%, transparent); transition: height .3s var(--spring), border-radius .3s; }
.mo:first-child i { border-radius: 2px 0 0 2px; } .mo:last-child i { border-radius: 0 2px 2px 0; }
.mo.grow i { background: color-mix(in srgb, #6F8F4E 22%, transparent); }
.mo.bloom i { background: var(--plum); }
.mo.fruit i { background: #B08A5A; }
.mo.turn i { background: #B4793F; }
.mo.bare i { background: color-mix(in srgb, #8a7458 28%, transparent); }
.mo.on b { color: var(--ink); font-weight: 700; transform: translateY(-2px) scale(1.15); }
.mo.on i { height: 7px; border-radius: 3px; box-shadow: 0 0 0 2px var(--bg); }
.months-note { margin-top: 6px; font: italic 400 15px/1.4 var(--serif); color: var(--muted); }
.months-note b { font-style: normal; font-weight: 400; color: var(--ink); }
/* Hold this month, or play the year again: a small link after the words. */
.months-auto { margin-left: 10px; min-height: 32px; padding: 0 2px; border: 0; background: none; font: 400 13px/1 var(--sans); color: var(--plum); cursor: pointer; text-decoration: underline 1px; text-underline-offset: 3px; }
.months.held .mo.on i { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--ink); }
/* In a pot: five clay pots that grow with their size (too small ones fade back), and one, two or three plants.
   Shares a row with the soil swatches; only one of them is ever open. */
.pot-pick { display: grid; justify-items: center; gap: 4px; max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transition: max-height .5s var(--glide), opacity .3s, margin .5s var(--glide), visibility 0s .5s; }
body[data-mode="pot"] .pot-pick { max-height: 180px; opacity: 1; visibility: visible; margin-top: 4px; transition: max-height .5s var(--glide), opacity .45s .1s, margin .5s var(--glide); }
.pot-sizes, .pot-count { display: flex; align-items: flex-end; gap: 6px; }
.pot-sizes button, .pot-count button { display: grid; justify-items: center; align-content: end; gap: 5px; min-width: 48px; min-height: 60px; padding: 4px 2px 0; border: 0; background: none; font-size: 13px; color: var(--faint); cursor: pointer; transition: color .3s; }
.pot-sizes button[aria-checked="true"], .pot-count button[aria-checked="true"] { color: var(--ink); }
.pot-glyph { display: block; width: calc(8px + var(--s) * .9px); height: calc(7px + var(--s) * .8px); background: var(--terracotta); opacity: .45;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); border-top: 3px solid #D69878; transition: transform .45s var(--spring), opacity .3s; }
.pot-sizes button[aria-checked="true"] .pot-glyph { opacity: 1; transform: translateY(-3px); }
.pot-sizes button:hover .pot-glyph { opacity: .8; }
/* Any size: an empty dashed pot, the plant's own size until they say otherwise. */
.pot-sizes .any .pot-glyph { --s: 14; background: none; border: 1.5px dashed var(--terracotta); clip-path: none; border-radius: 2px 2px 5px 5px; }
.pot-count { gap: 14px; }
.sprigs { display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.sprigs i { display: block; width: 6px; height: 16px; border-radius: 6px 6px 1px 1px; background: #6F8F4E; opacity: .4; transition: opacity .3s, transform .45s var(--spring); }
.sprigs i:nth-child(2) { height: 21px; } .sprigs i:nth-child(3) { height: 13px; }
.pot-count button[aria-checked="true"] .sprigs i { opacity: 1; transform: translateY(-3px); }
/* In the ground, how wet the soil stays: three swatches of soil that unfold under the objects. */
.soil-pick { display: flex; gap: 20px; justify-content: center; max-height: 0; opacity: 0; overflow: hidden; visibility: hidden;
  transition: max-height .5s var(--glide), opacity .3s, margin .5s var(--glide), visibility 0s .5s; }
body[data-mode="ground"] .soil-pick { max-height: 96px; opacity: 1; visibility: visible; margin-top: 8px; transition: max-height .5s var(--glide), opacity .45s .1s, margin .5s var(--glide); }
.soil-pick button { display: grid; justify-items: center; gap: 6px; min-width: 56px; min-height: 64px; padding: 6px 4px 0; border: 0; background: none; font-size: 13px; color: var(--faint); cursor: pointer; transition: color .3s; }
.soil-pick button[aria-checked="true"] { color: var(--ink); }
.swatch { display: block; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .25); transition: transform .45s var(--spring), box-shadow .3s; }
.soil-pick button[aria-checked="true"] .swatch { transform: translateY(-3px); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .25), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.swatch-dry { background: repeating-linear-gradient(38deg, transparent 0 6px, rgba(110, 80, 45, .4) 6px 7px), repeating-linear-gradient(-52deg, transparent 0 9px, rgba(110, 80, 45, .3) 9px 10px), linear-gradient(#D6C19B, #BFA37A); }
.swatch-average { background: radial-gradient(circle at 30% 40%, #9A7752 0 1.5px, transparent 2px) 0 0 / 7px 7px, linear-gradient(#80603F, #6A4C31); }
.swatch-moist { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .45), transparent 28%), linear-gradient(#3E2A1B, #24170E); }
/* Flower colour: a row of paint chips. The chosen one swells and takes a ring; the words below say which. */
.palette { display: grid; justify-items: center; gap: 2px; margin-top: 12px; }
.palette-chips { display: flex; }
.palette button { width: 40px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.palette button::before { content: ""; display: block; width: 24px; height: 24px; margin: auto; border-radius: 50%; background: var(--chip);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 -3px 5px rgba(0, 0, 0, .12); transition: transform .4s var(--spring), box-shadow .3s; }
.palette button:hover::before { transform: scale(1.12); }
.palette button[aria-pressed="true"]::before { transform: scale(1.22); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }

.caption { width: 100%; max-width: 440px; margin: 8px 0 32px; padding: 0 24px; }
.cap-why { margin: 12px auto 0; max-width: 34ch; font-size: 15.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.cap-name { font-size: clamp(32px, 3.2vw, 42px); line-height: 1.04; text-wrap: balance; }
.cap-sci { margin-top: 8px; font: italic 400 16px/1.4 var(--serif); color: var(--muted); }
/* Back to the plant they just had, on to another: either side under the name, big enough for a thumb. */
.cap-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; }
.nav-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; font: 400 15px/1 var(--sans); color: var(--plum); cursor: pointer; }
.nav-btn::before, .nav-btn.next::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); }
.nav-btn.next { margin-left: auto; }
.nav-btn.next::before { content: none; }
.nav-btn.next::after { transform: rotate(-135deg); }
.nav-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
/* Through the year: twelve months as one bar to tap or drag along, each coloured by what the plant is doing then. */
.seasons { margin-top: 18px; width: 100%; max-width: 360px; margin-inline: auto; }
.year { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; touch-action: pan-y; cursor: pointer; user-select: none; border-radius: 8px; }
.month { display: grid; justify-items: center; gap: 4px; font: 500 11px/1 var(--sans); color: var(--faint); }
.month i { display: block; width: 100%; height: 14px; border-radius: 4px; background: color-mix(in srgb, #6F8F4E 45%, transparent); transition: transform .2s var(--ease); }
.month.grow i { background: color-mix(in srgb, #6F8F4E 25%, transparent); }
.month.bloom i, .k.bloom { background: var(--bloom); }
.month.fruit i, .k.fruit { background: #B08A5A; }
.month.bare i, .k.bare { background: color-mix(in srgb, #8a7458 35%, transparent); }
.month.turn i, .k.turn { background: #A4784A; }
.k.grow { background: color-mix(in srgb, #6F8F4E 25%, transparent); }
.month.on { color: var(--ink); font-weight: 700; }
.month.on i { box-shadow: 0 3px 0 -1px var(--ink); }
.month.on { text-decoration: underline 2px; text-underline-offset: 4px; }
.year-key { margin-top: 10px; font-size: 11.5px; color: var(--faint); display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; }
.k { display: inline-block; width: 10px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
.season-note { margin-top: 10px; min-height: 1.45em; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.season-note a { color: inherit; }
.season-each { display: block; margin-top: 4px; }
#year-block { max-width: none; margin-inline: 0; }
#year-block .year { max-width: 420px; }
#year-block .year-key { justify-content: flex-start; }
.cap-actions { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 24px; }
.more-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0; border: 0; background: none; font: 400 15px/1 var(--sans); color: var(--plum); cursor: pointer; }
.more-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.more-btn::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .5s var(--glide); }
.more-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
/* Details unfold beneath the caption, in place. */
.cap-more { display: grid; grid-template-rows: 0fr; opacity: 0; text-align: left; transition: grid-template-rows .55s var(--glide), opacity .2s; }
.cap-more > div { overflow: hidden; min-height: 0; padding: 0 4px 4px; margin: 0 -4px; }
.caption.open .cap-more { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .55s var(--glide), opacity .45s .12s; }
.cap-more .facts { margin: 24px 0 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent); grid-template-columns: 72px 1fr; gap: 8px 16px; }
.cap-more .chev { font-size: 14.5px; }
.tag-photo { position: relative; margin: 0 0 16px; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--linen); }
.tag-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tag-photo figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 10px 6px; text-align: right; font-size: 10.5px; line-height: 1.2; color: rgba(255, 255, 255, .86); background: linear-gradient(transparent, rgba(20, 16, 12, .42)); }
.tag-photo figcaption a { color: inherit; text-decoration: none; }
.tag-photo figcaption a:hover { text-decoration: underline; }
.tag-sci { margin: 4px 0 16px; font: italic 400 14px var(--serif); color: var(--muted); }
.facts { margin: 0 0 14px; display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; font-size: 14px; line-height: 1.4; }
.facts dt { color: var(--faint); font-size: 13px; }
.facts dd { margin: 0; }
.tag-note { font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 16px; }
/* Wide: the plant takes the larger share on the left; the choice and caption sit as one block, centred beside it. */
@media (min-width: 960px) {
  .showcase { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); }
  .hero h1 { max-width: none; font-size: clamp(48px, 4.4vw, 64px); }
  .hero .lede { max-width: 40em; }
  .showcase { grid-template-rows: auto auto auto 1fr; grid-template-areas: "sky choose" "stage choose" "months choose" ". choose";
    justify-items: start; column-gap: 32px; padding: 0 64px 16px 0; }
  .sky { height: 112px; }
  .grow-in { margin: 0 0 24px -8px; }
  .soil-pick { justify-content: flex-start; margin-left: -8px; }
  .pot-pick { justify-items: start; margin-left: -8px; }
  body[data-mode="pot"] .pot-pick { margin-bottom: 24px; }
  .palette { justify-items: start; margin-bottom: 32px; }
  .months { margin-top: -20px; }
  body[data-mode="ground"] .soil-pick { margin-bottom: 32px; }
  /* The whole showcase fits the first screen under the headline. */
  #slot-home { height: clamp(360px, calc(100svh - 490px), 520px); }
  .choose { align-self: center; align-items: flex-start; }
  .caption { max-width: 400px; margin: 0 0 32px; padding: 0; text-align: left; }
  .cap-why { margin-inline: 0; }
  .cap-actions { justify-content: flex-start; }
}

/* Rails, shelves and paddles */
.shelf-all { margin-top: 8px; font-size: 15px; }
.shelf-block, .season { max-width: var(--max); margin: 0 auto; padding: 72px var(--gutter) 0; }
.shelf-block .two-tone, .season .two-tone { margin-bottom: 18px; }
.shelf-block .row-head { margin-bottom: 18px; }
.rail { position: relative; }
.paddle { position: absolute; z-index: 3; top: 40%; width: 40px; height: 40px; margin-top: -20px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: var(--shadow-sm), 0 4px 14px rgba(0, 0, 0, .08); cursor: pointer; opacity: 0; transition: opacity .3s; backdrop-filter: blur(8px); }
.paddle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border: solid var(--ink); border-width: 1.6px 1.6px 0 0; transform: translate(-65%, -50%) rotate(45deg); }
.paddle.prev { left: -20px; }
.paddle.prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.paddle.next { right: -20px; }
.rail:hover .paddle:not([disabled]) { opacity: 1; }
.paddle[disabled] { pointer-events: none; }
.shelf { display: flex; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px 0 4px; }
.shelf::-webkit-scrollbar, .cards::-webkit-scrollbar, .comp-grid::-webkit-scrollbar, .jump::-webkit-scrollbar { display: none; }

.potcard { flex: 0 0 auto; width: 156px; padding: 0 3px; scroll-snap-align: start; background: none; border: 0; cursor: pointer; text-align: center; color: inherit; }
.potcard-img { position: relative; display: block; height: 196px; }
.potcard-img img { position: absolute; left: 50%; bottom: 0; width: 150px; height: 188px; margin-left: -75px; object-fit: contain; object-position: bottom; transition: transform .45s var(--spring); }
.potcard-img::after { content: ""; position: absolute; left: -3px; right: -3px; bottom: -7px; height: 8px; background: linear-gradient(var(--oak), var(--oak-edge)); box-shadow: 0 8px 12px -8px rgba(60, 40, 20, .45); }
body[data-mode="ground"] .potcard-img::after { opacity: 0; }
.potcard:first-child .potcard-img::after { border-radius: 8px 0 0 8px; }
.potcard:last-child .potcard-img::after { border-radius: 0 8px 8px 0; }
.potcard-name { display: block; margin-top: 18px; font: 400 15px/1.3 var(--serif); }
.potcard-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.potcard:hover .potcard-img img { transform: translateY(-6px); }
.potcard[aria-selected="true"] .potcard-img img { transform: translateY(-10px); }
.potcard[aria-selected="true"] .potcard-name::after { content: ""; display: block; width: 5px; height: 5px; margin: 6px auto 0; border-radius: 50%; background: var(--plum); }
.potcard[aria-selected="true"] .potcard-meta { display: none; }
/* Plants that don't suit the light step to the back, shown in the wrong light: bleached under full sun, sunk in
   shadow in shade, faded in part sun. Still there, still tappable. */
.potcard .potcard-img img, .potcard-name, .potcard-meta { transition: transform .45s var(--spring), opacity .6s, filter .6s; }
.potcard.off .potcard-img img { opacity: .45; filter: grayscale(.7); }
[data-light="sun"] .potcard.off .potcard-img img { opacity: .6; filter: brightness(1.35) saturate(.25) contrast(.7); }
[data-light="shade"] .potcard.off .potcard-img img { opacity: .8; filter: brightness(.42) saturate(.5); }
.potcard.off .potcard-name, .potcard.off .potcard-meta { opacity: .45; }

/* In flower now */
.cards { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.flower { flex: 0 0 248px; scroll-snap-align: start; text-decoration: none; color: inherit; }
.flower img { width: 248px; height: 310px; object-fit: cover; border-radius: var(--r); background: var(--linen); margin-bottom: 14px; transition: transform .6s var(--ease); }
.flower:hover img { transform: scale(1.015); }
.flower h3 { font-size: 18px; line-height: 1.25; }
.flower p { margin-top: 2px; font: italic 400 14px var(--serif); color: var(--muted); }

.bench { max-width: var(--max); margin: 0 auto; padding: 96px var(--gutter) 0; }
.bench .two-tone { margin-bottom: 26px; }
.tips { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tips li { background: var(--linen); border-radius: var(--r); padding: 30px 28px 32px; }
.tip-n { display: block; font: italic 400 22px var(--serif); color: var(--plum); margin-bottom: 18px; }
.tips h3 { font-size: 22px; margin-bottom: 8px; }
.tips p { color: var(--muted); font-size: 15.5px; }

.plan-card { position: relative; max-width: var(--max); margin: 96px auto 0; padding: clamp(56px, 8vw, 92px) calc(var(--gutter) + 20px); text-align: center; isolation: isolate; }
.plan-card::before { content: ""; position: absolute; inset: 0 var(--gutter); z-index: -1; border-radius: var(--r); background: radial-gradient(120% 140% at 50% 0%, #7A66A0 0%, #5D4A7C 55%, #4B3B66 100%); }
.plan-card h2 { font-size: clamp(32px, 4vw, 48px); color: #fff; margin-bottom: 12px; }
.plan-card p { color: rgba(255, 255, 255, .8); margin: 0 auto 28px; max-width: 30em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-card::before { background: radial-gradient(120% 140% at 50% 0%, #3C4733 0%, #2E3628 60%, #262C21 100%); } }

/* ---------------- PLANTS */
.plants-head { max-width: var(--max); margin: 0 auto; padding: 48px var(--gutter) 22px; }
.plants-head h1 { font-size: var(--h1); letter-spacing: -.02em; margin-bottom: 14px; }
.plants-head .lede { max-width: 36em; }
.jump { position: sticky; top: 56px; z-index: 20; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.jump a { flex: 0 0 auto; font-size: 14px; text-decoration: none; padding: 8px 16px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 5%, transparent); transition: background .2s, color .2s; }
.jump a:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.jump a.on { background: var(--ink); color: var(--bg); }
.row { max-width: var(--max); margin: 0 auto; padding: 52px var(--gutter) 0; scroll-margin-top: 110px; }
.row .two-tone { font-size: var(--h2); margin-bottom: 14px; }
.pop { animation: pop .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms + 120ms); }
@keyframes pop { from { opacity: 0; transform: translateY(22px) scale(.94); } }

/* ---------------- EDITOR */
.config { max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter) 140px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 56px; align-items: start; }
.config-stage { position: sticky; top: 76px; }
#slot-pot { height: min(calc(100vh - 200px), 720px); min-height: 380px; border-radius: var(--r); background: radial-gradient(60% 55% at 50% 45%, rgba(255, 255, 255, .9), transparent 75%), linear-gradient(180deg, var(--lilac-soft), var(--linen)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #slot-pot { background: radial-gradient(60% 55% at 50% 45%, rgba(255, 240, 220, .05), transparent 75%), linear-gradient(180deg, #2A2C26, #22241F); } }
.config-panel { padding-top: 8px; }
.config-panel h1 { font-size: var(--h1); letter-spacing: -.015em; margin: 18px 0 10px; }
.config-sub { color: var(--muted); font-size: 16.5px; }
.step { padding: 30px 0; border-bottom: 1px solid var(--line); }
.step:first-of-type { margin-top: 24px; border-top: 1px solid var(--line); }
.step .two-tone { font-size: 24px; margin-bottom: 16px; }
.step .seg { margin-bottom: 22px; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 18px; text-align: left; border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.choice:hover { border-color: var(--faint); }
.choice[aria-checked="true"] { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); background: var(--card); }
.choice b { display: block; font-weight: 500; font-size: 16px; }
.choice small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.choice .size { font: 400 17px var(--serif); white-space: nowrap; }
.choice.ruled-out { cursor: default; opacity: .55; border-style: dashed; }
.choice.ruled-out:hover { border-color: var(--line-strong); }
.in-pot { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.in-pot li { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-sm); }
.in-pot img { width: 46px; height: 58px; object-fit: contain; object-position: bottom; }
.in-pot .nm { flex: 1; min-width: 0; }
.in-pot .nm b { display: block; font: 400 16px var(--serif); }
.in-pot .nm span { font-size: 13px; color: var(--muted); }
.icon-btn { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.stepper { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.stepper output { min-width: 1.6em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); color: var(--ink); }
.comp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.comp { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 8px; border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.comp:hover { border-color: var(--plum); background: var(--card); }
.comp img { width: 48px; height: 60px; object-fit: contain; object-position: bottom; flex: 0 0 auto; }
.comp .nm { flex: 1; min-width: 0; }
.comp .nm b { display: block; font: 400 15px/1.25 var(--serif); }
.comp .nm span { font-size: 12.5px; color: var(--muted); }
.comp .plus { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--plum); color: var(--on-plum); display: grid; place-items: center; font-size: 17px; line-height: 1; }
.about .tag-photo { margin-bottom: 18px; }
.about h2 { font-size: 26px; }
.about .tag-sci { margin-bottom: 16px; }
.about p:last-child { color: var(--muted); font-size: 15.5px; }

.summary { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--bar); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); padding-bottom: env(safe-area-inset-bottom); }
.summary-inner { max-width: var(--max); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; gap: 16px; }
.summary-thumbs { display: flex; }
.summary-thumbs img { width: 34px; height: 42px; object-fit: contain; object-position: bottom; margin-right: -8px; }
.summary-text { flex: 1; min-width: 0; font-size: 14.5px; margin-left: 8px; }
.summary-text b { font-weight: 500; }
.summary-text span { color: var(--muted); }

/* Footer, toast, reveal */
.foot { margin-top: 110px; border-top: 1px solid var(--line); }
.foot-inner { max-width: var(--max); margin: 0 auto; padding: 22px var(--gutter) 40px; font-size: 12.5px; color: var(--faint); display: grid; gap: 6px; }
body[data-view="pot"] .foot { display: none; }
.toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: var(--r-pill); font-size: 14px; box-shadow: var(--shadow); animation: pop .45s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* View transitions */
::view-transition-group(*) { animation-duration: .62s; animation-timing-function: var(--ease); }
/* The stage changes shape between home and editor: keep the picture in proportion while it moves. */
::view-transition-old(stage), ::view-transition-new(stage) { width: 100%; height: 100%; object-fit: contain; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }

/* ---------------- Tablet */
@media (max-width: 1100px) {
  .config { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .config-stage { position: relative; top: 0; }
  #slot-pot { height: min(62vh, 560px); }
}
/* ---------------- Phone */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .bar-inner { height: 52px; grid-template-columns: auto 1fr auto; }
  .nav { justify-self: end; gap: 18px; margin-right: 14px; }
  .nav a[href*="season"] { display: none; }
  /* The state stays choosable on phones: the select alone, without the pin. */
  .where svg { display: none; }
  .where select { max-width: 8.5em; font-size: 13px; }
  /* The phone is where most people choose: the sun, the plant and its name all on the first screen. */
  .hero { padding-top: 12px; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px); margin-bottom: 6px; }
  .sky { height: 84px; }
  .seg button { padding: 0 16px; font-size: 14.5px; }
  .showcase { margin: 0 calc(12px - var(--gutter)); padding: 0 0 32px; }
  #slot-home { height: min(76vw, 300px); }
  .caption { margin-top: 0; }
  .cap-name { margin-top: 4px; }
  .cap-name { font-size: 32px; }
  .paddle { display: none; }
  .shelf-block, .season { padding-top: 56px; }
  .potcard { width: 128px; }
  .potcard-img { height: 164px; }
  .potcard-img img { width: 124px; height: 156px; margin-left: -62px; }
  .flower { flex-basis: 200px; }
  .flower img { width: 200px; height: 250px; border-radius: var(--r); }
  .bench { padding-top: 72px; }
  .tips { grid-template-columns: 1fr; gap: 12px; }
  .tips li { padding: 24px 22px; }
  .plan-card { margin-top: 72px; }
  .plants-head { padding-top: 32px; }
  .jump { top: 52px; }
  .row { padding-top: 40px; }
  .config { padding-top: 12px; }
  #slot-pot { height: auto; min-height: 0; aspect-ratio: 1 / 1; max-height: 62vh; border-radius: var(--r); }
  .config-panel h1 { margin-top: 10px; }
  .comp-grid { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .comp { flex: 0 0 72%; }
  .summary-inner { gap: 10px; }
  .summary-text { font-size: 13.5px; margin-left: 4px; }
  .summary .btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-light { color: #2E3628; } }

/* The bee that visits the stage: its name on hover, and a sheet with what the records say. */
.visitor-tip { position: absolute; z-index: 3; margin: 0; padding: 8px 12px; max-width: 240px; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); font: 400 13px/1.35 var(--sans); pointer-events: none; transform: translate(-50%, calc(-100% - 18px)); }
.visitor-tip i { font-family: var(--serif); font-size: 15px; }
.visitor-tip span { display: block; color: var(--muted); }
.visitor { width: min(520px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 28px 28px 24px; border: 0; border-radius: var(--r); background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft); }
.visitor::backdrop { background: rgba(28, 24, 32, .35); backdrop-filter: blur(4px); }
.visitor-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); font-size: 22px; cursor: pointer; }
.visitor h2 { margin: 0 40px 2px 0; font: 400 28px/1.15 var(--serif); font-style: italic; }
.visitor .kind { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.visitor p { margin: 0 0 12px; font-size: 16px; }
.visitor h3 { margin: 20px 0 10px; font: 600 13px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.visitor .others, .visitor .also { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.visitor .others button, .visitor .also button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg); color: var(--ink); font: 400 14px/1.2 var(--sans); cursor: pointer; }
.visitor .others button { padding-left: 14px; font-family: var(--serif); font-style: italic; }
.visitor .others button[aria-current] { border-color: var(--plum); color: var(--plum); }
.visitor .also img { width: 32px; height: 40px; object-fit: contain; }
.visitor .fine { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.visitor a { color: var(--plum); }

/* Words kept for screen readers only: the page itself shows objects, not labels. */
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.months-note:empty { display: none; }
.cap-more .cap-sci { margin-top: 20px; }
.cap-more .cap-why { margin-inline: 0; text-align: left; max-width: none; }

/* ---------------- Labels (round 0 of the usability passes): every control says what it is, in a word or two. */
.lbl { display: block; font: 400 12.5px/1.2 var(--sans); white-space: nowrap; }
.grow-in .lbl { font-size: 13.5px; }
/* The sun says the light it gives, and four dots say it is one of four: tap for the next. A thin ring marks it as a button. */
.sun::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); pointer-events: none; transition: border-color .3s; }
.sun:hover::after { border-color: color-mix(in srgb, var(--ink) 34%, transparent); }
.sun .sun-label { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); display: grid; gap: 6px; justify-items: start; white-space: nowrap; pointer-events: none; font-style: normal; }
.sun .sun-label b { font: italic 400 18px/1 var(--serif); color: var(--ink); }
.sun-steps { display: flex; gap: 4px; }
.sun-steps s { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: background .3s, transform .3s var(--spring); }
[data-light="sun"] .sun-steps s:nth-child(1), [data-light="part"] .sun-steps s:nth-child(2),
[data-light="dappled"] .sun-steps s:nth-child(3), [data-light="shade"] .sun-steps s:nth-child(4) { background: var(--ink); transform: scale(1.15); }
/* What the stage shows, in words, under the name: the pot, its companions, and why a hand-picked plant doesn't suit. */
.cap-where { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.cap-where.misfit::first-line { color: #A4502E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cap-where.misfit::first-line { color: #E39A73; } }
/* Any colour: a soft rainbow ring; the colour in words under the chips. */
/* A colour with nothing for this spot: faint, struck through. */
.palette button[aria-disabled]::before { opacity: .3; background: linear-gradient(135deg, transparent 46%, var(--ink) 47% 53%, transparent 54%), var(--chip); cursor: default; }
.palette button[aria-disabled]:hover::before { transform: none; }
.palette .any::before { background: conic-gradient(#E59BB5, #C8343A, #E8853A, #F1C83F, #6F8F4E, #5C7FC9, #8059A8, #E59BB5); -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 56%); mask: radial-gradient(closest-side, transparent 52%, #000 56%); }
.palette:has([aria-pressed="true"]) button.any:not([aria-pressed="true"])::before { opacity: .6; }
.palette-word { font-size: 12.5px; color: var(--muted); }
.months-note { font: 400 13px/1.4 var(--sans); }
.months-note b { font-weight: 600; }
/* The first picture, before the 3D plant has loaded: it fades over to the live plant. */
.stage-fallback.poster { transition: opacity .4s; }
.stage-fallback.gone { opacity: 0; }
body.returning .stage-fallback.poster { opacity: 0; }
/* About the plant: a sheet from the bottom on a phone, a panel from the right when wide. */
.sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 88vh; margin: 0; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: var(--r) 24px 0 0;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft); overflow-y: auto; overscroll-behavior: contain; }
.sheet[open] { animation: sheet-up .42s var(--glide); }
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } }
.sheet::backdrop { background: rgba(28, 24, 32, .35); }
.sheet .tag-photo { margin: 28px 0 16px; }
.sheet h2 { font-size: 30px; line-height: 1.08; margin-right: 44px; }
.sheet h2:first-of-type { margin-top: 8px; }
.sheet .cap-sci { margin: 6px 0 0; }
.sheet .facts { margin: 20px 0 16px; padding-top: 16px; border-top: 1px solid var(--line); grid-template-columns: 72px 1fr; gap: 8px 16px; font-size: 15px; }
.sheet .tag-note { font-size: 15px; }
.sheet-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
@media (min-width: 960px) {
  .sheet { inset: 0 0 0 auto; width: 440px; max-height: none; height: 100%; border-radius: var(--r) 0 0 24px; padding: 24px 32px; }
  .sheet[open] { animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateX(30%); opacity: 0; } }
}

/* The saved list. */
.sheet h2#list-title { margin: 8px 44px 16px 0; }
.list-empty { color: var(--muted); }
.saved { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.saved li { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 8px; border-radius: var(--r); background: var(--bg); }
.saved-thumbs { display: flex; flex: 0 0 auto; }
.saved-thumbs img { width: 40px; height: 50px; object-fit: contain; object-position: bottom; margin-right: -10px; }
.saved .nm { flex: 1; min-width: 0; margin-left: 8px; }
.saved .nm b { display: block; font: 400 15.5px/1.3 var(--serif); }
.saved .nm span { font-size: 13px; color: var(--muted); }
.saved-act { display: flex; align-items: center; gap: 8px; }
.saved-act .chev { min-height: 44px; border: 0; background: none; padding: 0 6px; cursor: pointer; font: inherit; font-size: 15px; color: var(--plum); }
.saved-act .icon-btn { width: 40px; height: 40px; }
/* The first time, a word beside the sun; it goes once the sun has been tapped. */
.sun .sun-hint { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font: 400 13px/1 var(--sans); color: var(--muted); font-style: normal; transition: opacity .4s; }
.sun .sun-hint::after { content: " \203A"; }
.sun.used .sun-hint { opacity: 0; }
/* Any size: the pot it picked is marked, faintly, so the line under the name matches what is lit. */
.pot-sizes .auto .pot-glyph { opacity: .8; outline: 1.5px dashed color-mix(in srgb, var(--terracotta) 70%, transparent); outline-offset: 3px; }
.pot-sizes .any { color: var(--muted); }
/* On a phone the choices come straight under the plant, so every tap shows its effect right above it; the name follows. */
@media (max-width: 959px) {
  .choose .caption { order: 2; margin-top: 24px; }
  .choose .grow-in { margin-top: 8px; }
}

/* Room for a thumb: every control at least 44 px square. */
.palette button { width: 44px; }
.nav a, .shelf-all a { display: inline-flex; align-items: center; min-height: 44px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.months-track:focus-visible { opacity: 1; }

/* ---------------- The flow: one question, a few big tiles, one tap each; then the plant. */
.flow .q, .flow .caption { display: none; }
.flow[data-q="where"] .q[data-q="where"], .flow[data-q="light"] .q[data-q="light"],
.flow[data-q="size"] .q[data-q="size"], .flow[data-q="soil"] .q[data-q="soil"] { display: block; animation: q-in .42s var(--glide) both; }
.flow[data-q="pick"] .qs { display: none; }
.flow[data-q="pick"] .caption { display: block; animation: q-in .42s var(--glide) both; }
@keyframes q-in { from { opacity: 0; transform: translateX(28px); } }
.qs { width: 100%; max-width: 440px; padding: 0 16px; }
.q h2 { font: 400 30px/1.1 var(--display); text-align: center; margin: 4px 0 16px; letter-spacing: -.01em; }
.tiles { display: grid; gap: 10px; }
.tiles.two { grid-template-columns: 1fr 1fr; }
.tiles.three, .tiles.pots { grid-template-columns: repeat(3, 1fr); }
.tiles.four { grid-template-columns: 1fr 1fr; }
.tile { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 84px; padding: 12px 8px; border: 1px solid var(--line-strong); border-radius: var(--r);
  background: var(--card); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s, transform .25s var(--spring); }
.tile b { font: 500 15px/1.2 var(--sans); }
.tile:hover { border-color: var(--faint); }
.tile:active { transform: scale(.96); }
.tile[aria-checked="true"] { border-color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum), var(--shadow-sm); }
.tiles.pots .tile { min-height: 72px; gap: 6px; }
.tile .obj { opacity: 1; filter: none; transform: scale(1.35); margin: 6px 0 2px; }
.tile .pot-glyph { opacity: .9; }
.tile-any b { font-size: 15px; color: var(--ink); }
.tile .swatch { width: 34px; height: 34px; }
/* The four suns: bright with rays, a cloud across it, a leaf across it, two leaves and grey. */
.ico-sun { position: relative; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FFF6DA, var(--sun-core) 62%); }
.ico-sun[data-l="sun"] { box-shadow: 0 0 0 4px color-mix(in oklab, var(--sun-core) 30%, transparent), 0 0 14px 4px color-mix(in oklab, var(--sun-core) 45%, transparent); }
.ico-sun[data-l="part"]::after { content: ""; position: absolute; left: 10px; top: 14px; width: 30px; height: 15px; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.ico-sun[data-l="dappled"]::after, .ico-sun[data-l="shade"]::after { content: ""; position: absolute; left: 9px; top: 12px; width: 26px; height: 15px; border-radius: 0 100% 0 100%; background: #5F7F44; transform: rotate(-20deg); }
.ico-sun[data-l="shade"] { filter: grayscale(.8); opacity: .7; }
.ico-sun[data-l="shade"]::before { content: ""; position: absolute; left: -8px; top: -2px; width: 24px; height: 14px; border-radius: 0 100% 0 100%; background: #6F8F4E; transform: rotate(150deg); z-index: 1; }
.q-skip { margin-top: 14px; text-align: center; }
.q-skip button { min-height: 44px; padding: 0 8px; border: 0; background: none; font: 400 14.5px/1 var(--sans); color: var(--muted); cursor: pointer; text-decoration: underline 1px; text-underline-offset: 4px; }
/* Their answers, as chips: a tap goes back to that question. */
.answers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 14px; }
.answer { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 6%, transparent); font: 400 13.5px/1 var(--sans); color: var(--ink); cursor: pointer; }
.answer:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.flow .caption { text-align: center; margin: 4px 0 24px; }
.flow .palette { margin-top: 8px; }
.flow .cap-actions { flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.flow .cap-nav { margin-top: 6px; }
#add-one::after { content: none; }
#add-one::before { content: "+"; font-size: 18px; line-height: 1; margin-right: 2px; }
#tag-open::after { transform: rotate(-45deg); }
/* While the questions are asked, the stage keeps to the plant: the months come with the answer. */
body:not([data-q="pick"]) .months { display: none; }
@media (max-width: 959px) {
  .flow { align-items: center; }
  #slot-home { height: min(70vw, 280px); }
}
@media (min-width: 960px) {
  .qs { padding: 0; max-width: 460px; }
  .q h2 { text-align: left; font-size: 40px; margin-bottom: 20px; }
  .tiles.four { grid-template-columns: repeat(4, 1fr); }
  .q-skip { text-align: left; }
  .answers, .flow .cap-nav { justify-content: flex-start; }
  .flow .caption { text-align: left; }
}
/* Back and Another sit together, centred, under the name. */
.flow .cap-nav { justify-content: center; gap: 28px; }
.flow .nav-btn.next { margin-left: 0; }
@media (min-width: 960px) { .flow .cap-nav { justify-content: flex-start; } }
#slot-home::before { filter: blur(8px); }
/* Nothing may widen the page on a phone: the column is the screen, and the chips wrap if they must. */
@media (max-width: 959px) { .showcase { grid-template-columns: minmax(0, 1fr); } .flow .caption { padding: 0 12px; min-width: 0; } }
.palette-chips { flex-wrap: wrap; justify-content: center; }

/* ---------------- The planner, in the home page's hand: the plant floating in light, the sizes as tiles, a row of
   company to add, and Save. On a phone the plant stays in view at the top while the choices scroll under it. */
#slot-pot { background: radial-gradient(60% 55% at 50% 55%, color-mix(in oklab, var(--sky-sun) 45%, var(--bg)), var(--bg) 75%); border-radius: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #slot-pot { background: radial-gradient(60% 55% at 50% 55%, #2A2C24, var(--bg) 75%); } }
.stage-hint { display: none; }
.config-panel h1 { margin-top: 12px; }
.config-sub { margin-top: 4px; }
.plan-sizes { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 20px; gap: 8px; }
.plan-sizes .tile { min-height: 76px; gap: 6px; padding: 10px 4px; }
.plan-sizes .tile b { font-size: 13.5px; }
.tile.ruled-out { opacity: .38; box-shadow: none; border-style: dashed; cursor: default; }
.tile.moved { animation: moved .7s var(--spring); }
@keyframes moved { 30% { transform: translateY(-6px) scale(1.06); } }
.pot-glyph.tall { height: calc(12px + var(--s) * 1.1px); }
.bed-glyph { display: block; width: calc(8px + var(--s) * .22px); height: 14px; border-radius: 3px; background: linear-gradient(#7A5A3E, #6A4C31); box-shadow: inset 0 0 0 2px #B08A5A; }
.in-pot { margin-top: 18px; }
.in-pot li { padding: 8px 10px 8px 8px; }
.in-pot .nm span { display: none; }
.plan-row { margin-top: 26px; }
.plan-h { font: 400 22px/1.2 var(--display); margin-bottom: 12px; }
.comp-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scroll-snap-type: x proximity; }
.comp-row::-webkit-scrollbar { display: none; }
.comp-row-inner { display: contents; }
#trellis-choice:empty { display: none; }
#trellis-choice { display: contents; }
.comp-row .comp { position: relative; flex: 0 0 116px; display: grid; justify-items: center; align-content: end; gap: 6px; min-height: 150px; padding: 10px 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-sm); text-align: center; scroll-snap-align: start; }
.comp-row .comp img { width: 72px; height: 90px; object-fit: contain; object-position: bottom; }
.comp-row .comp b { font: 400 14px/1.25 var(--serif); }
.comp-row .comp .plus { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; }
.comp-row .comp:active { transform: scale(.96); }
.comp-trellis[aria-checked="true"] { border-color: var(--plum); box-shadow: inset 0 0 0 1.5px var(--plum); }
.trellis-glyph { width: 44px; height: 80px; margin-bottom: 4px; background: repeating-linear-gradient(90deg, #A47B52 0 3px, transparent 3px 14px), repeating-linear-gradient(0deg, #A47B52 0 3px, transparent 3px 14px); border-radius: 3px; opacity: .85; }
.plan-about { margin-top: 22px; }
.summary .btn.done { background: color-mix(in srgb, var(--plum) 14%, var(--card)); color: var(--plum); }
.summary .btn.done::before { content: "✓"; margin-right: 6px; }
@media (max-width: 720px) {
  .config { padding-top: 0; gap: 8px; }
  .config-stage { position: sticky; top: 52px; z-index: 5; margin: 0 calc(var(--gutter) * -1); background: var(--bg); }
  .config-stage::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  #slot-pot { aspect-ratio: auto; height: 38vh; min-height: 220px; max-height: none; border-radius: 0; }
  .plan-sizes .tile { min-height: 64px; }
}
/* Plants view: the jump bar solid and flush under the header; the rows' titles plain. */
.jump { background: var(--bg); padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); top: 56px; }
@media (max-width: 720px) { .jump { top: 52px; } }
.plants-head h1 { margin-bottom: 0; }
/* The list: what to do with it. */
.list-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.list-empty:not([hidden]) + .saved + .list-actions { display: none; }
.answer.again { min-width: 36px; padding: 0 10px; color: var(--muted); }
.sheet-actions { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin: 8px -20px -24px; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line); }
.print-list { display: none; }
@media print {
  body > *:not(.print-list) { display: none !important; }
  .print-list { display: block !important; color: #000; font: 12pt/1.4 Georgia, serif; }
  .print-list table { width: 100%; border-collapse: collapse; margin: 16pt 0; }
  .print-list th, .print-list td { text-align: left; padding: 6pt 8pt; border-bottom: 1px solid #ccc; vertical-align: top; }
}
/* The month letters, a touch bigger: they are a control. */
.mo b { font-size: 13px; }
/* Colour is a quiet second choice under the plant: smaller dots, so Plan stays the one thing to do. */
.flow .palette button { width: 36px; height: 40px; }
.flow .palette button::before { width: 18px; height: 18px; }
/* No count until there is a spot to count for. */
body:not([data-q="pick"]) #shelf-line { visibility: hidden; }

/* My list: words and a count, so it reads as what it is. */
.bag { width: auto; height: 36px; padding: 0 4px 0 10px; gap: 6px; border-radius: var(--r-pill); font-size: 14px; color: var(--ink); }
.bag-count { position: static; }
.list-link { display: grid; gap: 6px; margin-top: 16px; }
.list-link input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 14px/1 var(--sans); }
.list-link span { font-size: 13.5px; color: var(--muted); }

/* ---------------- Round 3 polish */
@keyframes q-in { from { opacity: 0; transform: translateY(12px); } }
.showcase { overflow-x: clip; }
::view-transition-old(root) { animation: .18s ease-out both vt-out; }
@keyframes vt-out { to { opacity: 0; } }
:root { --dapple: rgba(58, 96, 52, .12); }
/* One soft glow behind sun and plant, no seams; the sun with no ring. */
.sky::before, #slot-home::after { display: none; }
.showcase::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: min(560px, 70vh); pointer-events: none;
  background: radial-gradient(55% 48% at 50% 34%, color-mix(in oklab, var(--sky) 70%, var(--bg)), transparent 72%); }
@media (min-width: 960px) { .showcase::before { right: 38%; } }
.sun::after { display: none; }
/* Tiles: the word always on the same line, whatever sits above it. */
.tile { grid-template-rows: 1fr auto; align-content: stretch; }
.tile > :first-child { align-self: end; }
.tile-any { grid-template-rows: 1fr; }
.tile-any > :first-child { align-self: center; }
/* The answer block on an 8px rhythm; Plan full width, the two quieter actions side by side under it. */
.answers { margin-bottom: 16px; }
.cap-name + .cap-where { margin-top: 8px; }
.flow .cap-nav { margin-top: 8px; }
.flow .palette { margin-top: 16px; gap: 0; }
.flow .cap-actions { margin-top: 24px; gap: 8px 24px; justify-content: center; }
.flow #plant-it { flex: 1 0 100%; max-width: 360px; min-height: 52px; font-size: 16px; }
@media (min-width: 960px) { .flow .cap-actions { justify-content: flex-start; } .flow #plant-it { flex-basis: auto; max-width: none; } .tile { min-height: 120px; } .tiles.pots .tile, .plan-sizes .tile { min-height: 96px; } }
/* Company row: in from the gutter, names unbroken. */
.comp-row { scroll-padding-inline: var(--gutter); }
.comp-row .comp { flex-basis: 128px; }
.comp-row .comp b { hyphens: manual; text-wrap: balance; }
@media (min-width: 721px) { .comp-row { margin: 0; padding-inline: 0; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } }
@media (max-width: 720px) { #slot-pot { height: 34svh; } }
.summary-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Type: serif 32 / 24 / 17, sans 13 / 15 / 17. */
.q h2, .cap-name, .sheet h2, .config-panel h1 { font-size: 32px; }
.plan-h { font-size: 24px; }
@media (max-width: 720px) { .two-tone { font-size: 26px; text-wrap: balance; } }
@media (min-width: 960px) { .q h2, .cap-name, .config-panel h1 { font-size: 40px; } }
.cap-where, .tile b, .answer { font-size: 15px; }
.answer { font-size: 13px; }
/* Dark: flowering months lilac, faded chips softer, the cloud not glaring. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mo.bloom i { background: #B79BD8; }
  :root:not([data-theme="light"]) .ico-sun[data-l="part"]::after { background: #CFC9BE; } }
.palette:has([aria-checked="true"]) button:not([aria-checked="true"])::before { opacity: .7; filter: saturate(.7); }

/* Round 4: the page holds still under a sheet; nothing sits behind the save bar; every target a thumb's width. */
html:has(dialog[open]) { overflow: hidden; }
html:has(body[data-view="pot"]) { scroll-padding-bottom: 96px; }
body[data-view="pot"] #view-pot { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.answer, .bag, #save-pot, .palette-chips button { min-height: 44px; }
.palette-chips button { min-width: 40px; margin: 0; }
@media (min-width: 420px) { .palette-chips button { min-width: 44px; } }
@media (max-width: 370px) { .palette-chips button { min-width: 36px; } }
.visitor-close, .saved .icon-btn { width: 44px; height: 44px; }
.config-panel .back { min-height: 44px; }
.months-track { min-height: 44px; align-items: center; }
.flow[data-q] .q, .flow[data-q="pick"] .caption { animation-duration: .26s; }
.cap-name:focus { outline: none; }
.shop table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14.5px; }
.shop th { text-align: left; font: 500 12px/1.2 var(--sans); color: var(--muted); padding: 0 8px 8px 0; border-bottom: 1px solid var(--line); }
.shop td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.shop td:first-child { width: 3em; font: 400 20px/1 var(--serif); }
.shop i { color: var(--muted); }
.shop p { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.comp small { font-size: 12px; color: var(--muted); line-height: 1.2; }
/* Answer chips read as something to tap: a quiet chevron, a hairline. */
.answer { display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.answer::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-2px) rotate(45deg); }
.stepper .icon-btn { width: 44px; height: 44px; }
.jump a { min-height: 44px; display: inline-flex; align-items: center; }
.nav a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* Focus group: hours under each light; "Not yet" a real answer; why the plant suits, under where it goes. */
.tile:has(small) { grid-template-rows: 1fr auto auto; gap: 4px; }
.tile small { font: 400 12.5px/1.25 var(--sans); color: var(--muted); }
.tile-any { grid-template-rows: 1fr auto; align-content: center; }
.tile-any > :first-child { align-self: end; }
.cap-why { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
body:not([data-q="pick"]) .sun { pointer-events: none; }
/* The sun only breathes once it can be tapped. */
body:not([data-q="pick"]) .sun span { animation: none; }
/* Back up to the plant, clear of the sticky header. */
#showcase { scroll-margin-top: 64px; }
/* The headline keeps its two lines while the type loads. */
.masthead h1 { min-height: 2lh; }

/* Where to buy (js/nurseries.js): nearby nurseries and online ones, each with how sure we are it has the plant. */
.wtb { margin: 22px 0 6px; padding-top: 18px; border-top: 1px solid var(--line); }
.wtb-title { margin: 0 0 8px; font: 600 15px/1.3 var(--sans); }
.wtb-ask, .wtb-near, .wtb-none, .wtb-note { margin: 0 0 10px; font-size: 15px; color: var(--muted); }
.wtb-note { margin-top: 10px; font-size: 13px; }
.wtb-place { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.wtb-place select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); color: var(--ink); font: 400 15px var(--sans); }
.link-btn { min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--plum); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wtb-list { list-style: none; margin: 0; padding: 0; }
.wtb-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wtb-list li:last-child { border-bottom: 0; }
.wtb-nm { display: flex; flex-direction: column; min-width: 0; }
.wtb-nm a { color: var(--ink); font-weight: 500; text-decoration: none; }
.wtb-nm a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wtb-nm span { font-size: 13px; color: var(--muted); }
.wtb-chip { flex: 0 0 auto; padding: 4px 10px; border-radius: var(--r-pill); font-size: 13px; white-space: nowrap; border: 1px solid var(--line-strong); color: var(--muted); }
.wtb-chip[data-status="stock"] { background: var(--plum); border-color: var(--plum); color: var(--on-plum, #fff); }
.wtb-chip[data-status="likely"] { background: color-mix(in srgb, var(--plum) 14%, transparent); border-color: color-mix(in srgb, var(--plum) 40%, transparent); color: var(--plum); }
.wtb-chip[data-status="ask"] { border-style: dashed; }

/* ---------------- BED BUILDER */
.gd { max-width: var(--max); margin: 0 auto; padding: 22px var(--gutter) 40px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.gd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.gd-head h1 { font-size: var(--h1); }
.gd-name { width: 100%; max-width: 15ch; border: 0; border-bottom: 1px dashed transparent; background: none; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.gd-name::placeholder { color: var(--faint); }
.gd-name:hover, .gd-name:focus { border-bottom-color: var(--line-strong); outline: none; }
.gd-sub { margin-top: 6px; color: var(--muted); font-size: 15.5px; }
#gd-save.done { background: color-mix(in srgb, var(--plum) 14%, transparent); color: var(--plum); }
#gd-save:disabled { opacity: .45; cursor: default; }
.gd-size { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 14px; }
.gd-dim { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--card); }
.gd-dim output { min-width: 3.6em; text-align: center; font: 500 15px/1 var(--sans); font-variant-numeric: tabular-nums; }
.gd-x { color: var(--faint); }
.gd-room { font-size: 14px; color: var(--muted); }
.gd-tidy { margin-left: auto; font-size: 14px; }
#slot-garden { height: clamp(360px, 58vh, 640px); border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg, #E9EEE2 0%, #E4E8D9 55%, #D9DEC9 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #slot-garden { background: linear-gradient(180deg, #262B23, #20241D); } }
#slot-garden .stage-hint { position: absolute; left: 16px; bottom: 12px; z-index: 2; margin: 0; font-size: 12.5px; color: var(--muted); }
.gd-empty { position: absolute; inset: auto 0 22% 0; z-index: 2; text-align: center; pointer-events: none; }
.gd-empty p { display: inline-block; max-width: 30ch; padding: 10px 16px; border-radius: var(--r); background: var(--bar); font-size: 15px; pointer-events: auto; }
.gd-year { margin: 16px 0 6px; }
.gd-roster { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.gd-roster li { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 8px; border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.gd-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.gd-who img { width: 46px; height: 58px; object-fit: contain; object-position: bottom; flex: 0 0 auto; }
.gd-who .nm { min-width: 0; }
.gd-who b { display: block; font: 400 16px/1.2 var(--serif); }
.gd-who span span, .gd-who .nm > span { font-size: 12.5px; color: var(--muted); }
.gd-who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.gd-who .off { font-style: normal; color: var(--terracotta); }
.gd-one { font-size: 12.5px; color: var(--muted); }
.gd-note { margin: -6px 0 12px; font-size: 14px; color: var(--muted); }
.gd-pick { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding: 22px 20px; border-radius: var(--r); background: var(--linen); scrollbar-width: thin; }
.gd-h { font: 400 22px/1.2 var(--display); margin-bottom: 12px; }
.gd-h small { font: 400 13px/1.3 var(--sans); color: var(--muted); display: block; margin-top: 4px; }
.gd-label { font: italic 400 15px/1 var(--serif); color: var(--muted); margin: 16px 0 8px; }
.gd-seg { display: grid; gap: 0 14px; border-bottom: 1px solid var(--line); }
.gd-seg.four { grid-template-columns: 1fr 1fr; }
.gd-seg.three { grid-template-columns: repeat(3, 1fr); }
.gd-seg button { min-height: 44px; padding: 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; font-size: 14.5px; color: var(--muted); cursor: pointer; text-align: left; }
.gd-seg button:hover { color: var(--ink); }
.gd-seg button[aria-checked="true"] { color: var(--ink); font-weight: 500; border-bottom-color: var(--plum); }
.gd-help { margin: 8px 0 0; font-size: 12.5px; color: var(--faint); }
.gd-find { margin: 22px 0 18px; }
.gd-find input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); font: inherit; font-size: 15px; color: var(--ink); }
.gd-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-card { position: relative; display: grid; gap: 2px; padding: 8px 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s var(--ease); }
.gd-card:hover { border-color: var(--plum); }
.gd-card img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: contain; object-position: bottom; margin-bottom: 6px; }
.gd-card b { font: 400 14.5px/1.2 var(--serif); }
.gd-card span { font-size: 12px; color: var(--muted); }
.gd-card .plus { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 16px; background: var(--card); border: 1px solid var(--line-strong); color: var(--plum); }
.gd-card[aria-pressed="true"] { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum); }
.gd-card[aria-pressed="true"] .plus { background: var(--plum); color: var(--on-plum); border-color: var(--plum); }
.gd-none { grid-column: 1 / -1; color: var(--muted); font-size: 14px; }
#gd-more { margin-top: 10px; }
.btn-quiet { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-quiet:hover { background: var(--lilac-soft); }
.btn-quiet:disabled { opacity: .55; cursor: default; }
@media (max-width: 959px) {
  .gd { grid-template-columns: 1fr; gap: 28px; padding-top: 14px; }
  .gd-pick { position: static; max-height: none; overflow: visible; }
  .gd-results { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  #slot-garden { height: clamp(300px, 62vw, 480px); }
}
@media (max-width: 559px) {
  .gd-head { flex-direction: column; align-items: stretch; }
  .gd-head .btn { width: 100%; }
  .gd-tidy { margin-left: 0; }
  .gd-roster { grid-template-columns: 1fr; }
}

/* ---------------- REFRESH: masthead, bed band, footer, plant pages */
.masthead { max-width: 1120px; margin: 0 auto 4px; padding: 0 var(--gutter); text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26em); gap: 8px 40px; align-items: end; }
.masthead h1 { font-size: var(--h1); line-height: 1.02; max-width: 13ch; margin: 0; text-wrap: balance; }
.masthead a { color: var(--plum); text-underline-offset: 3px; }
@media (max-width: 759px) { .masthead { grid-template-columns: 1fr; } }
body.returning .masthead { display: none; }
.bed-band { max-width: var(--max); margin: 96px auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.bed-band-art { display: block; border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg, #E9EEE2, #D9DEC9); border: 1px solid var(--line); }
.bed-band-art img { width: 100%; height: auto; aspect-ratio: 12 / 7; object-fit: cover; transition: transform .8s var(--ease); }
.bed-band-art:hover img { transform: scale(1.02); }
.bed-band-text h2 { font-size: var(--h2); margin-bottom: 14px; }
.bed-band-text p { color: var(--muted); margin-bottom: 22px; max-width: 32em; }
@media (max-width: 859px) { .bed-band { grid-template-columns: 1fr; gap: 24px; margin-top: 64px; } }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 10px; font-size: 14px; }
.foot-nav a { color: var(--ink); text-decoration: none; }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot a { color: inherit; }

.pp-main { max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter) 0; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.crumbs a { color: var(--plum); text-underline-offset: 3px; }
.pp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; }
.pp-photo { margin: 0; }
.pp-photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); background: var(--linen); }
.pp-photo figcaption { margin-top: 8px; font-size: 12px; color: var(--faint); }
.pp-photo figcaption a { color: inherit; }
.pp-text h1 { font-size: var(--h1); margin-top: 6px; }
.pp-sci { font: italic 400 20px/1.3 var(--serif); color: var(--muted); margin: 8px 0 26px; }
.facts.pp-facts { margin-bottom: 18px; }
.pp-native { font-size: 14px; color: var(--muted); margin-bottom: 24px; max-width: 36em; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.pp-sec { margin-top: 72px; }
.pp-sec h2 { font-size: var(--h2); margin-bottom: 16px; }
.pp-3d-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px; margin-bottom: 16px; }
.pp-3d-head h2 { margin: 0; }
.pp-mode { grid-template-columns: auto auto; justify-content: start; }
.pp-mode:has(button:only-child) { grid-template-columns: 1fr; min-width: 0; }
.pp-stage { height: clamp(340px, 56vh, 600px); border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg, #F1EEE4, #E7E2D4); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-stage { background: linear-gradient(180deg, #262B23, #20241D); } }
.pp-year { margin-top: 16px; cursor: default; }
.pp-comps, .az-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pp-comp { display: grid; gap: 2px; padding: 10px 0 12px; border-top: 1px solid var(--line); text-decoration: none; transition: border-color .2s; }
.pp-comp:hover { border-top-color: var(--plum); }
.pp-comp:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pp-comp img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: contain; object-position: bottom; margin-bottom: 6px; }
.pp-comp b { font: 400 15px/1.2 var(--serif); }
.pp-comp span { font-size: 12.5px; color: var(--muted); }
.pp-source { margin-top: 56px; font-size: 13.5px; color: var(--muted); }
.pp-source a { color: inherit; }
.az-head { margin-bottom: 30px; }
.az-head h1 { font-size: var(--h1); margin-bottom: 12px; }
.az-head .lede a { color: var(--plum); }
.az-jump { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 20px; }
.az-jump a { min-width: 36px; min-height: 36px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); text-decoration: none; font-size: 14px; }
.az-jump a:hover { border-color: var(--plum); color: var(--plum); }
.az { margin-top: 40px; scroll-margin-top: 80px; }
.az h2 { font-size: 30px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
@media (max-width: 859px) { .pp-top { grid-template-columns: 1fr; gap: 28px; } .pp-photo img { aspect-ratio: 5 / 4; } }
.facts.pp-facts, .pp-sec .facts { grid-template-columns: 120px 1fr; gap: 0; font-size: 16px; border-top: 1px solid var(--line); }
.facts.pp-facts dt, .facts.pp-facts dd, .pp-sec .facts dt, .pp-sec .facts dd { padding: 11px 0; border-bottom: 1px solid var(--line); }
.facts.pp-facts dt, .pp-sec .facts dt { font: italic 400 15px/1.4 var(--serif); color: var(--muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bed-band-art img { filter: brightness(.82) saturate(.95); } }
.az-head .btn { margin-top: 18px; }
.gd-card { border-radius: var(--r); }
.gd-note:empty { display: none; }

/* Review fixes 2026-11-02: no sideways spill, 44 px targets, focus and contrast. */
.gd-main { min-width: 0; }
.gd .icon-btn { width: 44px; height: 44px; }
.gd-name { min-height: 44px; }
.gd-name:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; border-radius: 2px; }
.gd-year .year { min-height: 44px; align-items: center; }
.pp-mode button { min-height: 44px; }
/* Letters as a quiet row of links, not a grid of boxes; each still a 44 px tap target. */
.az-jump { gap: 0 2px; margin-top: 16px; }
.az-jump a { min-width: 32px; min-height: 44px; border: 0; font-size: 15px; color: var(--muted); }
.az-jump a:hover { color: var(--plum); text-decoration: underline; }
.foot-nav a, .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.gd-help { color: var(--muted); }
@media (max-width: 720px) and (max-height: 760px) { .config-stage { position: relative; top: 0; } }

/* Design review 2: a real title, one radius, fewer boxes, rails that fade, a lighter index. */
.gd-name::placeholder { color: var(--ink); opacity: 1; }
.gd-head .btn#gd-save { white-space: nowrap; min-height: 44px; padding: 0 18px; }
#gd-save:not(.done) { background: var(--btn); color: var(--on-btn); }
.gd-find input { border-radius: var(--r); }
.gd-dim { border: 0; background: none; padding: 0; }
.pp-comp, .az-grid > a { border-top: 0; }
.pp-comps { display: flex; overflow-x: auto; gap: 16px; scroll-snap-type: x mandatory; padding-bottom: 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.pp-comps .pp-comp { flex: 0 0 150px; scroll-snap-align: start; }
.jump, #arches, .shelf { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.az-head { position: relative; }
.az-spot { display: inline-block; margin-top: 10px; color: var(--plum); text-underline-offset: 3px; }
.az-jump { position: sticky; top: 52px; z-index: 3; background: var(--bg); }
.az { scroll-margin-top: 110px; }
/* On a phone every letter shows, in two rows. */
@media (max-width: 719px) { .az-jump { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0; } .az-jump a { min-width: 0; } }
/* A white bloom on cream needs an edge to show. */
.pp-year.white .month.bloom i, .year-key.white .k.bloom { box-shadow: inset 0 0 0 1.5px #B9B09B; }
/* The plant page's year is a picture, not a control: a swipe on it scrolls the page. */
.pp-year { touch-action: auto; }
/* With nothing to buy yet, the button row doesn't leave a gap above the next section. */
@media (max-width: 859px) { .pp-sec { margin-top: 48px; } .pp-actions { margin-bottom: 0; } }
/* The credit's links are small type with a full-size tap area. */
.pp-photo figcaption a { display: inline-block; padding: 13px 0; margin: -13px 0; }
/* On a wide screen every companion fits in the row. */
@media (min-width: 1100px) { .pp-comps { overflow: visible; -webkit-mask-image: none; mask-image: none; } .pp-comps .pp-comp { flex: 1 1 0; min-width: 0; } }

/* The bed's name reads as a field to type in. */
.gd-name { border-bottom: 1px dashed var(--line-strong); }

/* QA 2: narrow phones, toasts that never block a tap, the list sheet fits and scrolls. */
.sheet { box-sizing: border-box; max-height: 90dvh; overflow-x: hidden; }
.saved li { flex-wrap: wrap; }
.saved .nm { flex: 1 1 160px; }
.saved-act { margin-left: auto; }
.toast { pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.toast.up { pointer-events: auto; cursor: pointer; min-height: 44px; }
.toast.up::after { content: " ↑"; }
/* The bed's name wraps rather than being cut off. */
textarea.gd-name { display: block; resize: none; overflow: hidden; field-sizing: content; max-width: 100%; line-height: inherit; }
/* On a wide screen the plants to add run on down the page beside the bed, not in a box of their own. */
@media (min-width: 960px) { .gd-pick { position: static; max-height: none; overflow: visible; } }
/* A thumbnail still on its way is a soft space, not a broken picture. */
.gd-card img { background: var(--linen); border-radius: 8px; }
.nav a { white-space: nowrap; }
@media (max-width: 400px) { .nav { gap: 14px; } }
.gd-roster li { flex-wrap: wrap; }
.gd-roster .gd-who { flex: 1 1 180px; min-width: 0; }
.gd-roster .stepper { margin-left: auto; }
.az-jump a { min-width: 44px; }
.pp-photo figcaption a, figure figcaption a { display: inline-block; padding: 6px 0; }

/* ---------------- BED BUILDER, controls redone: one bar of choices; the bed's plants and the plants to add beside it. */
.gd { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px 48px; }
.gd-main { position: sticky; top: 72px; }
.gd-head { align-items: flex-start; }
.gd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 12px; }
.gd-sel { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--card); }
.gd-sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--ink); font: 500 14.5px/1 var(--sans);
  min-height: 42px; padding: 0 28px 0 12px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.gd-sel select:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; border-radius: var(--r-sm); }
.gd-dims select { padding-right: 24px; }
.gd-dims > span { color: var(--faint); font-size: 13px; }
.gd-sel select option { color: #222; }
.gd-tidy { margin-left: auto; }
.gd-side { display: grid; gap: 28px; align-content: start; }
.gd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 400 22px/1.2 var(--serif); margin: 0 0 10px; }
.gd-h small { font: 400 13px var(--sans); color: var(--muted); }
.gd-roster { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.gd-roster li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; padding: 8px 0;
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; flex-wrap: nowrap; }
.gd-roster .gd-who { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.gd-roster .gd-who img { width: 40px; height: 50px; object-fit: contain; flex: 0 0 auto; }
.gd-roster .nm { min-width: 0; }
.gd-roster .nm b { display: block; font: 400 16px/1.2 var(--serif); }
.gd-roster .nm span { font-size: 12.5px; color: var(--muted); }
.gd-roster .stepper { margin: 0; gap: 0; }
.gd-roster .stepper output { min-width: 22px; text-align: center; font-weight: 600; }
.gd-roster .icon-btn { width: 36px; height: 44px; background: none; border: 0; box-shadow: none; color: var(--muted); }
.gd-roster .icon-btn:hover:not(:disabled) { color: var(--ink); }
.gd-roster .gd-one { font-size: 12.5px; color: var(--muted); }
.gd-pick { background: none; padding: 0; border: 0; box-shadow: none; position: static; }
.gd-find { margin: 0 0 12px; }
.gd-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gd-card { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px 8px; border: 1px solid transparent; border-radius: var(--r); background: none; box-shadow: none; text-align: center; cursor: pointer; }
.gd-card:hover { background: var(--card); }
.gd-card img { width: 100%; height: 84px; object-fit: contain; }
.gd-card b { font: 400 13.5px/1.2 var(--serif); }
.gd-card span { font-size: 11.5px; color: var(--muted); }
.gd-card .plus { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  font: 600 13px/1 var(--sans); font-style: normal; background: var(--card); color: var(--ink); border: 1px solid var(--line-strong); }
.gd-card[aria-pressed="true"] { border-color: var(--plum); box-shadow: none; }
@media (max-width: 960px) {
  .gd { grid-template-columns: minmax(0, 1fr); }
  .gd-main { position: static; }
}
@media (max-width: 720px) {
  .gd-head { flex-direction: row; align-items: center; }
  .gd-head .btn, .gd-head .btn#gd-save { width: auto; min-height: 40px; padding: 0 14px; font-size: 14px; }
  .gd-head h1 { font-size: 34px; }
  .gd-bar { gap: 6px; }
  .gd-sel select { font-size: 14px; padding: 0 24px 0 10px; }
  .gd-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .gd-bar { gap: 5px; flex-wrap: nowrap; }
  .gd-sel select { font-size: 13px; min-height: 40px; padding: 0 20px 0 8px; background-position: calc(100% - 12px) 52%, calc(100% - 7px) 52%; background-size: 4px 4px; }
  .gd-dims select { padding-right: 18px; }
}
@media (max-width: 384px) { .gd-bar { flex-wrap: wrap; } }
.gd-almost-label { grid-column: 1 / -1; margin: 14px 2px 2px; font: italic 400 15px/1.2 var(--serif); color: var(--muted); }
.gd-card.almost { opacity: .6; }
.gd-card.almost img { filter: grayscale(.6); }
.gd-card.almost:hover, .gd-card.almost:focus-visible { opacity: 1; }
.gd-card.almost:hover img { filter: none; }

/* Compare sizes: the row's plants shrink back, one after another, to their grown heights beside the tallest. */
.row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.to-scale { flex: 0 0 auto; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--plum); font: 500 14px var(--sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.potcard .potcard-img img { transform-origin: 50% 100%; }
.shelf .potcard .potcard-img img { transition: transform .6s var(--spring) calc(var(--n, 0) * 45ms), opacity .6s, filter .6s; }
.shelf.true-scale .potcard .potcard-img img { transform: scale(var(--k, 1)); }
.shelf.true-scale .potcard:hover .potcard-img img { transform: scale(var(--k, 1)) translateY(-6px); }
.shelf.true-scale .potcard[aria-selected="true"] .potcard-img img { transform: scale(var(--k, 1)) translateY(-10px); }
.shelf { cursor: default; }
@media (prefers-reduced-motion: reduce) { .shelf .potcard .potcard-img img { transition: none; } }

/* Review round 3. */
/* Add plants: each card a box, its + inside the picture's corner. */
.gd-results { row-gap: 10px; }
.gd-card { border: 1px solid var(--line); padding: 8px 6px 10px; }
.gd-card .plus { top: 8px; right: 8px; }
.gd-card[aria-pressed="true"] { border: 1.5px solid var(--plum); }
.gd-card[aria-pressed="true"] .plus { background: var(--plum); color: var(--on-plum); border-color: var(--plum); }
/* Almost: the picture dims, the words stay readable. */
.gd-card.almost { opacity: 1; }
.gd-card.almost img { opacity: .55; filter: grayscale(.6); }
.gd-card.almost span { color: var(--muted); }
/* The bar: 16 px so phones don't zoom, 44 px tall; on a phone, size on its own row, sun and soil side by side. */
.gd-sel select { font-size: 16px; min-height: 44px; }
#gd-save { min-height: 44px; }
@media (max-width: 440px) {
  .gd-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .gd-bar .gd-dims { grid-column: 1 / -1; justify-self: start; }
  .gd-bar .gd-sel:not(.gd-dims) select { width: 100%; }
  .gd-sel select { font-size: 16px; padding: 0 26px 0 12px; }
  .gd-tidy { grid-column: 1 / -1; justify-self: start; margin: 0; }
}
/* Roster buttons 44 px square. */
.gd-roster .icon-btn { width: 44px; }
/* Fade a row's edge only when it scrolls. */
.jump, #arches, .shelf { -webkit-mask-image: none; mask-image: none; }
#arches.overflows, .shelf.overflows { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
/* Compare sizes as a switch: pressed is drawn, the name stays. */
.to-scale { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.to-scale::before { content: ""; width: 28px; height: 16px; border-radius: 8px; background: var(--line-strong); box-shadow: inset -12px 0 0 2px var(--line-strong), inset 0 0 0 2px var(--line-strong), inset 14px 0 0 0 var(--card); transition: box-shadow .25s; }
.to-scale[aria-pressed="true"]::before { background: var(--plum); box-shadow: inset 12px 0 0 2px var(--plum), inset 0 0 0 2px var(--plum), inset -14px 0 0 0 var(--card); }
.to-scale[data-tall]:not([data-tall=""])::after { content: "· " attr(data-tall); color: var(--muted); font-weight: 400; }
/* Spacing. */
.season .two-tone, #season-title { margin-bottom: 16px; }
.az-jump { padding-left: 0; }
.az-jump a:hover, .az-jump a:focus-visible { text-decoration: underline; }
.az-spot { display: inline-flex; align-items: center; min-height: 44px; }
figure figcaption a { padding: 12px 0; }
.visitor-tip b { display: block; font: 400 15px var(--serif); }

/* Plainer again: no boxed cards or badge circles in Add plants, no switch on Compare sizes. */
.gd-card { border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 6px 4px 8px; background: none; }
.gd-card:hover { background: none; }
.gd-card:hover b { text-decoration: underline; text-underline-offset: 3px; }
.gd-card .plus { top: 6px; right: 6px; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--muted); font: 400 18px/1 var(--sans); }
.gd-card[aria-pressed="true"] { border: 0; }
.gd-card[aria-pressed="true"] .plus { background: none; color: var(--plum); border: 0; }
.gd-card[aria-pressed="true"] b { color: var(--plum); }
.to-scale { text-decoration: underline; text-decoration-thickness: 1px; }
.to-scale::before { content: none; }
.to-scale[aria-pressed="true"] { text-decoration-thickness: 2px; color: var(--ink); }

/* The bar as plain fields: each choice underlined like the bed's name, a small chevron, no boxes. */
.gd-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 12px 0 14px; }
.gd-sel { border: 0; border-radius: 0; background: none; gap: 6px; }
.gd-sel select { min-height: 44px; padding: 0 18px 0 0; font: 400 16px/1 var(--sans); color: var(--ink);
  border-bottom: 1px dashed var(--line-strong); border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 2px center; }
.gd-sel select:hover { border-bottom-color: var(--ink); }
.gd-dims select { padding-right: 16px; }
.gd-dims > span { padding: 0 2px; }
@media (max-width: 440px) {
  .gd-bar { display: flex; gap: 0 16px; }
  .gd-bar .gd-dims { flex-basis: 100%; }
  .gd-bar .gd-sel:not(.gd-dims) select { width: auto; }
  .gd-sel select { padding: 0 16px 0 0; }
  .gd-tidy { margin-left: 0; }
}

/* Their answers as one line of plain fields, underlined like the bed's name: they read as a sentence and never wrap. */
.answers { flex-wrap: nowrap; justify-content: center; gap: 0 clamp(10px, 3.6vw, 18px); white-space: nowrap; }
.answer, .answer.again { min-height: 44px; min-width: 0; padding: 0; border-radius: 0; box-shadow: none; background: none;
  font: 400 min(15px, 3.9vw)/1 var(--sans); color: var(--ink); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis;
  text-decoration: underline dashed var(--line-strong) 1px; text-underline-offset: 6px; }
.answer::after { content: none; }
.answer:hover { background-color: transparent; text-decoration-color: var(--ink); }
.answer:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* The garden's height measure: a hairline and its feet beside the bed, drawn over the stage. */
.gd-measure { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; color: var(--muted); }
.gd-measure line { stroke: currentColor; stroke-width: 1; stroke-linecap: round; opacity: .75; }
.gd-measure text { fill: currentColor; font: 400 11.5px var(--sans); dominant-baseline: middle; font-variant-numeric: tabular-nums; }
/* It comes up while the pointer is over the picture, a finger is on it, or the bed has the keyboard. */
.gd-measure { opacity: 0; transition: opacity .2s ease-out; }
@media (hover: hover) { #slot-garden:hover .gd-measure { opacity: 1; } }
#slot-garden .measuring .gd-measure, .stage canvas:focus-visible ~ .gd-measure { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gd-measure { transition: none; } }

/* ---------------- Round 4: one edge, one rhythm, no boxes left. */
/* The masthead shares the page's gutter (it had its own inside the hero's), and on a wide screen the line beside the
   title starts where the answer column below starts, its rule just left of it. */
.hero .masthead { max-width: none; padding: 0; }
@media (min-width: 960px) {
  .hero .masthead { grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); column-gap: 32px; padding-right: 64px; }
  .answers { justify-content: flex-start; }
}
/* The answer block: answers, name, one line about it in one voice, Another, the colours, then the button. */
.answers { margin-bottom: 12px; }
.cap-where, .cap-why { font: 400 15px/1.45 var(--sans); color: var(--muted); }
.cap-name + .cap-where { margin-top: 8px; }
.cap-why { margin-top: 0; }
.flow .cap-nav { margin-top: 16px; }
.flow .palette { margin-top: 24px; gap: 2px; }
.flow .cap-actions { margin-top: 24px; }
.palette-word { font-size: 12.5px; color: var(--muted); }
@media (max-width: 359px) {
  .palette, .palette-chips { width: 100%; }
  .palette-chips { flex-wrap: nowrap; justify-content: space-between; }
  .palette-chips button, .flow .palette button { flex: 1 1 0; min-width: 0; width: auto; }
}
/* The first questions: each choice its picture over its name, open on the page; the chosen one underlined. */
.tile, .tile:hover, .tile[aria-checked="true"] { border: 0; border-radius: 0; background: none; box-shadow: none; }
.tile b { text-underline-offset: 6px; text-decoration-thickness: 1px; }
.tile:hover b { text-decoration-line: underline; text-decoration-color: var(--line-strong); }
.tile[aria-checked="true"] b { text-decoration: underline 2px var(--ink); text-underline-offset: 6px; }
.tile.ruled-out { border: 0; }
/* Add another: plants on the same ledge as "Also good here", with Add in words. */
.comp-row .comp { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 2px 4px 8px; min-height: 0; align-content: start;
  background: linear-gradient(var(--oak), var(--oak-edge)) no-repeat 0 92px / 100% 6px; }
body[data-mode="ground"] .comp-row .comp { background: none; }
.comp-row .comp img { margin-bottom: 10px; }
.comp-row .comp:hover { background-color: transparent; }
.comp-row .comp:hover b { text-decoration: underline; text-underline-offset: 3px; }
.comp-add { font-size: 13px; color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.comp-trellis[aria-checked="true"] { border: 0; box-shadow: none; }
.comp-trellis[aria-checked="true"] b { color: var(--plum); }
/* Add plants reads like the A to Z: name, height, then Add (or In the bed) in words. */
.gd-card { justify-items: start; text-align: left; }
.gd-card .plus { position: static; width: auto; height: auto; margin-top: 2px; font: 400 12.5px/1.3 var(--sans); color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.gd-card[aria-pressed="true"] .plus { color: var(--muted); text-decoration: none; }
.gd-card.almost .plus { color: var(--muted); }
/* Over the bed's area: by how much, in the warning colour the home caption uses. */
#gd-room.over { color: #A4502E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #gd-room.over { color: #E39A73; } }
/* Phone header: the title and its line take the width; Save sits under them. */
@media (max-width: 720px) {
  .gd-head { flex-wrap: wrap; }
  .gd-head .gd-titles { flex: 1 1 100%; }
  .gd-head .btn#gd-save { min-height: 44px; margin-top: 4px; }
}
/* Tap targets. */
.sheet-actions a.chev, #tag-link { min-height: 44px; display: inline-flex; align-items: center; }
/* My list: the count as plain text after the words. */
.bag-count { min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--muted); font: 400 14px/1 var(--sans); }
/* The year's colours: fruit a pale tan, fall a rust, so the two read apart. */
.mo.fruit i, .month.fruit i, .k.fruit { background: #C2A473; }
.mo.turn i, .month.turn i, .k.turn { background: #C0623C; }
/* A to Z: the letters one scrolling row under a hairline; a field to find a plant by name. */
.az-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.az-jump::-webkit-scrollbar { display: none; }
.az-jump a { flex: 0 0 auto; }
.az-find { display: grid; gap: 6px; margin: 18px 0 0; max-width: 28em; }
.az-find small { font-size: 13px; color: var(--muted); }
.az-find small:empty { display: none; }
/* Dark plant pages: the stage one step off the page, no frame. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pp-stage { border: 0; background: var(--linen); } }
.plan-h small { font: 400 14px var(--sans); color: var(--muted); margin-left: 6px; }
@media (min-width: 960px) { .flow .cap-nav { margin-left: -4px; } }

/* Where it goes: six real spots, three across, a pot or a mound of ground over each name. */
.tiles.spots { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 4px; }
.tiles.spots .tile { min-height: 96px; padding: 10px 4px; }
.tiles.spots .tile b { font-size: 15px; text-wrap: balance; }
@media (max-width: 359px) { .tiles.spots .tile b { font-size: 14px; } }
@media (min-width: 960px) { .tiles.spots .tile { min-height: 108px; } }
/* The list: where each came from in their own words, under the line; who it went to; giving it. */
.saved li { flex-wrap: wrap; align-items: flex-start; }
/* Rows divided by a line, not boxed; the pictures in one column so the names line up. */
.saved li { background: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: 14px 0; }
.saved-thumbs { flex: 0 0 56px; display: flex; justify-content: center; }
.saved li.dropped { align-items: center; color: var(--muted); }
.saved li.dropped .saved-act { margin-left: auto; }
#list-title:focus { outline: none; }
.give .saved-from { max-width: none; }
@media (min-width: 720px) { .sheet { max-height: none; } }
.print-foot { margin-top: 18px; font-size: 12px; color: #555; }
.pp-lede { margin: 14px 0 22px; max-width: 34em; font: 400 19px/1.5 var(--serif); color: var(--ink); text-wrap: pretty; }
td .sci { font-family: var(--serif); }
td .common { font-size: 13px; color: var(--muted); }
/* At 200% on a phone the row's buttons wrap under the name rather than off the sheet. */
#saved { container-type: inline-size; }
@container (max-width: 300px) { .saved-thumbs { display: none; } .saved-act { margin-left: 0; width: 100%; flex-wrap: wrap; } .saved-from { max-width: 100%; } }
.brand { flex: 0 0 auto; min-width: 72px; }
.bag { white-space: nowrap; }
.saved .saved-act { align-self: center; gap: 2px; }
.saved-from { display: block; width: 100%; max-width: 15em; min-height: 40px; margin-top: 2px; padding: 0; border: 0; border-bottom: 1px dashed var(--line-strong);
  border-radius: 0; background: none; font: 400 16px/1.2 var(--sans); color: var(--ink); }
.saved-from::placeholder { color: var(--faint); }
.saved-from:hover { border-bottom-color: var(--muted); }
.saved-from:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.saved .nm .saved-to { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.give { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding: 4px 0 6px 56px; }
.give[hidden] { display: none; }
.give input { flex: 1 1 7em; min-width: 0; min-height: 44px; padding: 0; border: 0; border-bottom: 1px dashed var(--line-strong); border-radius: 0; background: none; font: 400 16px var(--sans); color: var(--ink); }
.give input::placeholder { color: var(--faint); }
.give .btn { min-height: 44px; padding: 0 20px; }
/* Came from: a quiet label and their words on the dashed line. */
.saved-from { display: flex; align-items: baseline; gap: 8px; border: 0; min-height: 40px; max-width: 18em; }
.saved-from span { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
.saved-from input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0; border: 0; border-bottom: 1px dashed var(--line-strong); border-radius: 0; background: none; font: 400 16px/1.2 var(--sans); color: var(--ink); }
.saved-from input:focus-visible, .give input:focus-visible { outline: none; border-bottom: 2px solid var(--plum); }
.give input:focus { outline: none; }

/* ---------------- Southern: magnolia paper, pine ink, red clay, a haint-blue sky in the shade, sweet-tea light in
   the sun; a soft, warm serif (Fraunces) for names and headings. Modern Southern editorial, not Old South. */
:root {
  --display: 'Fraunces', Georgia, serif;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bg: #F6EFE1; --linen: #EEE4D0; --card: #FFFAF0;
  --ink: #23241E; --muted: #5E5B50; --faint: #6E6A5E;
  --plum: #2E4A36; --plum-deep: #213727; --btn: #2E4A36;
  --clay: #A4492B;
  --sky-shade: #CFE2DD; --sky-sun: #F3E2BA; --sun-core: #E7A93E;
  --line: #E4D9C4; --line-strong: #CDBFA6;
  --oak: #DCC29A; --oak-edge: #BF9D6E;
  --bar: rgba(246, 239, 225, .88);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1D1B17; --linen: #26231D; --card: #2C2922; --ink: #F3ECDF; --muted: #B9B1A2; --faint: #9E978A;
    --clay: #E08A63; --sky-shade: #1C2A2A; --sky-sun: #3D3220; --line: #36322A; --line-strong: #4A4539;
    --bar: rgba(29, 27, 23, .82);
  }
}
/* Fraunces at its display size for the big names; its text size everywhere else. */
h1, h2, .cap-name, .q h2, .masthead h1, .az h2, .plan-h { font-family: var(--display); font-optical-sizing: auto; font-weight: 400; letter-spacing: -.015em; }
.masthead h1 { font-weight: 350; letter-spacing: -.025em; }
.masthead h1 em, .cap-name em { font-style: italic; }
/* Red clay for the small warm marks: the month you're in, a warning, the count over. */
#gd-room.over { color: var(--clay); }
.cap-where.misfit::first-line { color: var(--ink); font-style: italic; }

/* ---------------- Southern, bold: the porch on the stage, a magazine masthead, full-width bands of colour. */
:root { --haint: #BCDCD6; --pine-band: #2A4433; --on-band: #F4EDDF; --board: #9AA5A2; --board-seam: #7E8986; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --haint: #1E3532; --pine-band: #1F3226; --board: #4A524F; --board-seam: #343A38; } }
html, body { overflow-x: clip; }
/* Bands reach the edges of the window without extra markup. */
.band { position: relative; }
.band::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--band); }

/* The masthead: the headline at magazine scale. */
.masthead h1 { font-size: clamp(42px, 6.4vw, 92px); line-height: .98; max-width: 12ch; }
@media (max-width: 720px) { .masthead h1 { font-size: clamp(38px, 11vw, 48px); } }

/* The hero sits under a haint-blue porch ceiling that fades to the paper... */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; top: 0; height: min(980px, 120%); inset-inline: calc(50% - 50vw); z-index: -1;
  background: linear-gradient(180deg, var(--haint) 0%, color-mix(in oklab, var(--haint) 45%, var(--bg)) 38%, var(--bg) 78%); }
/* Plan a whole bed: a pine band, cream words, the painting on it. */
.bed-band { --band: var(--pine-band); color: var(--on-band); padding-block: 72px; margin-top: 96px; }
.bed-band h2 { color: var(--on-band); font-size: clamp(34px, 4.4vw, 56px); }
.bed-band p { color: color-mix(in oklab, var(--on-band) 82%, transparent); }
.bed-band .btn { background: var(--on-band); color: var(--pine-band); }
.bed-band-art img { border-radius: var(--r); }
/* In flower now: a haint-blue band. */
.season { --band: var(--haint); padding-block: 64px 72px; margin-top: 0; }
/* The footer: deep pine, cream type. */
.foot { --band: #1C2B21; border-top: 0; margin-top: 0; color: var(--on-band); }
.foot .foot-inner, .foot .foot-nav a { color: color-mix(in oklab, var(--on-band) 80%, transparent); }
.foot .foot-inner { padding-block: 40px 56px; }
.bed-band .bed-band-text p, .bed-band .bed-band-text h2 { color: var(--on-band); }
.bed-band .bed-band-text p { opacity: .85; }

/* A lit set (the porch): the planting stands in its place, and the place runs edge to edge under the sun, from the
   window's edge to the choices on a wide screen. */
body[data-set] .hero::before, body[data-set] .showcase::before, body[data-set] #slot-home::before { display: none; }
body[data-set] #slot-home { grid-row: 1 / 3; grid-column: 1; align-self: stretch; justify-self: stretch; width: auto; height: calc(84px + min(104vw, 460px));
  margin-inline: calc(-1 * var(--bleed, 0px)); background: #CFC9BC; }
body[data-set] .sky { z-index: 2; }
body[data-set] .stage-fallback { display: none; }
@media (min-width: 960px) {
  body[data-set] #slot-home { height: calc(112px + clamp(400px, calc(100svh - 470px), 600px)); margin-right: 0; }
}
body[data-set] .showcase { overflow-x: visible; }
body[data-set] .sun { left: 56px; top: 56px; }
body[data-set] .months { margin-top: 12px; }
/* The set is a backdrop that fades into the paper: no edges, the plant clear in the middle. */
body[data-set] #slot-home { background: none; }
body[data-set] #slot-home canvas {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
@media (min-width: 960px) {
  body[data-set] #slot-home canvas {
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent), linear-gradient(90deg, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent), linear-gradient(90deg, #000 70%, transparent); }
}