/* Tiarella Garden. Colors come from the brand palette in tokens.css (the same file
   tiarellaplants.com ships); type and components follow the live site: Georgia for
   display and plant names, the system sans for reading, arched photo cards, pill
   segmented controls and small tracked labels. */

:root {
  --paper: var(--t-mist);
  --card: var(--t-paper);
  --ink: var(--t-ink);
  --muted: var(--t-muted);
  --line: var(--t-line);
  --tint: var(--t-lilac-soft);
  --lilac: var(--t-lilac);
  --accent: var(--t-moss);
  --on-accent: var(--t-on-moss);
  --green: var(--t-green);
  --vein: var(--t-vein);
  --mat: var(--t-mat);
  --mat-line: var(--t-mat-line);
  --ok-bg: color-mix(in srgb, var(--t-green) 14%, var(--t-paper));
  --warn-bg: color-mix(in srgb, var(--t-vein) 10%, var(--t-paper));
  --shadow: 0 14px 30px -24px rgba(60, 45, 25, .6);
  --display: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --top: 64px;

  /* The sketch is a picture with its own light; it does not follow dark mode. */
  --sky-top: #e9eef0;
  --sky-bottom: #f7f3e8;
  --hedge-far: #b9c6ad;
  --hedge: #94a684;
  --lawn: #a9b98d;
  --stone: #cfc8b8;
  --stone2: #c2baa8;
  --wall: #efe6d8;
  --wall-line: #e4d9c7;
  --patio: #d8cfc0;
  --patio-line: #c7bcaa;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* Paper grain, as on the site. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--t-grain, 0); background-size: 240px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
a { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.text-link {
  border: 0; background: none; padding: 4px 0;
  color: var(--accent); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--lilac); text-decoration-thickness: 1.5px;
}
.text-link:hover { text-decoration-color: var(--accent); }
.text-link.quiet { color: var(--muted); text-decoration: none; font-size: 14px; }
.text-link.quiet:hover { color: var(--ink); }
.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--accent); border-radius: 18px; padding: 11px 20px;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  transition: transform .2s, box-shadow .2s;
}
.primary svg { width: 18px; height: 18px; }
.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(35, 31, 43, .55); }
.primary:active { transform: none; }
.primary:disabled { opacity: .45; box-shadow: none; transform: none; cursor: default; }
.primary.wide { width: 100%; padding: 13px 20px; }
.ghost-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 7px 14px; font-size: 14px; color: var(--ink);
}
.ghost-btn svg { width: 16px; height: 16px; }
.ghost-btn:disabled { opacity: .4; cursor: default; }
.ghost-btn:not(:disabled):hover { border-color: var(--lilac); }
.fine { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.none { color: var(--muted); padding: 16px 0; }

/* ---------- header ---------- */

.top {
  position: sticky; top: 0; z-index: 30;
  height: var(--top);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: block; }
.brand img { height: 34px; width: auto; }
.brand .mark-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .mark-light { display: none; }
  :root:not([data-theme="light"]) .brand .mark-dark { display: block; }
}
.top-actions { display: flex; align-items: center; gap: 14px; }
body.intro .top-actions { visibility: hidden; }

/* ---------- intro ---------- */

.hero {
  min-height: calc(100vh - var(--top));
  min-height: calc(100dvh - var(--top));
  display: grid; grid-template-rows: 1fr auto;
}
.hero-inner {
  align-self: center; width: min(1080px, 100% - 48px); margin: 0 auto; padding: 40px 0 24px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero h1 { font: 500 clamp(44px, 6vw, 76px)/.98 var(--display); letter-spacing: -.02em; margin: 0 0 18px; color: var(--ink); }
.hero-sub { font-size: 18px; color: var(--muted); max-width: 32em; margin: 0 0 26px; }
.ask {
  display: flex; align-items: center; gap: 8px; background: var(--card);
  border: 1px solid var(--lilac); border-radius: 999px; padding: 6px 6px 6px 22px;
  transition: border-color .15s, box-shadow .15s;
}
.ask:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--tint); }
.ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 17px; padding: 10px 0; }
.ask button { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; }
.ask button svg { width: 22px; height: 22px; }
.starters-label { margin-top: 24px; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chip { border: 1px solid var(--lilac); background: var(--card); color: var(--ink); border-radius: 999px; padding: 8px 15px; font-size: 14px; transition: background .15s, border-color .15s; }
.chip:hover { background: var(--tint); border-color: var(--accent); }

.plate {
  justify-self: end; width: min(100%, 400px); margin: 0;
  display: flex; flex-direction: column;
  background: var(--mat); padding: 14px 14px 0; border: 1px solid var(--mat-line);
  box-shadow: 0 30px 60px -36px rgba(60, 45, 25, .55); transform: rotate(1.2deg);
}
.plate img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.plate figcaption { font: italic 13px/1.45 var(--display); color: var(--muted); padding: 12px 4px 18px; margin-left: auto; max-width: 70%; text-align: right; }
.plate figcaption span { font-style: normal; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }

.hero-ribbon { padding: 8px 0 32px; overflow: hidden; }
.ribbon-label { width: min(1080px, 100% - 48px); margin: 0 auto 12px; }
.ribbon { display: flex; gap: 12px; padding: 2px max(24px, calc((100% - 1080px) / 2)) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ribbon::-webkit-scrollbar { display: none; }
.rib {
  flex: none; width: 150px; padding: 7px 7px 10px; text-align: left; scroll-snap-align: start;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; transition: transform .2s, box-shadow .2s;
}
.rib:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.rib img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 10px 10px; }
.rib span { display: block; font: 600 15px/1.2 var(--display); margin-top: 8px; color: var(--ink); }

/* ---------- workspace ---------- */

.work {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr) minmax(340px, 400px);
  height: calc(100vh - var(--top));
  height: calc(100dvh - var(--top));
}
.pane { min-height: 0; overflow: auto; overscroll-behavior: contain; }

/* Ideas */
.ideas { border-right: 1px solid var(--line); padding: 18px 18px 40px; }
.ask.small { border-radius: 16px; padding: 4px 6px 4px 14px; }
.ask.small textarea { flex: 1; border: 0; outline: 0; background: none; resize: none; padding: 9px 0; font-size: 15px; line-height: 1.4; }
.heard { margin: 10px 2px 0; font-size: 13.5px; color: var(--muted); }
.heard:empty { display: none; }
.heard b { font-weight: 600; color: var(--ink); }
.spot { margin-top: 16px; display: grid; gap: 14px; }
.field-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.field-hint { margin: 6px 2px 0; font-size: 12.5px; color: var(--muted); }
/* Pill segmented control: selected segment filled with ink, as on the site. */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border: 1px solid var(--lilac); border-radius: 999px; overflow: hidden; }
.seg5 { grid-template-columns: repeat(5, 1fr); }
.seg2 { grid-template-columns: repeat(2, 1fr); flex: none; width: 112px; }
.seg button { border: 0; background: none; min-height: 36px; padding: 6px 2px; font-size: 13px; color: var(--ink); white-space: nowrap; transition: background .15s, color .15s; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: var(--tint); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.space-row { display: flex; gap: 8px; align-items: center; }
.dim { display: flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--lilac); border-radius: 999px; padding: 3px 12px 3px 4px; font-size: 13px; color: var(--muted); }
.dim input { width: 42px; border: 0; background: var(--tint); border-radius: 999px; padding: 5px 2px; text-align: center; font-weight: 600; color: var(--ink); }

.results-head { margin: 26px 2px 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.results-head h2 { font: 500 22px/1.2 var(--display); margin: 0; color: var(--ink); }
.results-head span { font-size: 13px; color: var(--muted); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Arched photo cards, like the site's plant cards. */
.card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  transition: transform .2s, box-shadow .2s, border-color .2s; animation: rise .35s both; animation-delay: calc(var(--i) * 18ms);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.card-open { display: block; width: 100%; border: 0; padding: 7px 7px 0; background: none; text-align: left; }
.card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 10px 10px; }
.card-text { display: block; padding: 8px 4px 10px; }
.card-text b { display: block; font: 600 15px/1.2 var(--display); color: var(--ink); }
.card-text small { color: var(--muted); font-size: 12px; }
.card-add {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); color: var(--accent); font-size: 19px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: transform .15s, background .15s;
}
.card-add:hover { transform: scale(1.08); }
.card.in .card-add { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-size: 14px; }
.card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.more { width: 100%; margin-top: 14px; border: 1px dashed var(--lilac); border-radius: 14px; background: none; padding: 10px; color: var(--accent); }

/* Planting */
.planting { display: flex; flex-direction: column; padding: 18px 24px 18px; gap: 12px; overflow: hidden; }
.planting-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.planting-head > div { min-width: 0; flex: 1; }
.planting-head .primary { flex: none; white-space: nowrap; }
.title-input { border: 0; background: none; padding: 0; outline: 0; width: 100%; font: 500 32px/1.1 var(--display); color: var(--ink); letter-spacing: -.015em; border-bottom: 1px dashed transparent; }
.title-input:hover, .title-input:focus { border-bottom-color: var(--lilac); }
.planting-sub { margin: 3px 0 0; font-size: 14px; color: var(--muted); }
.stage { position: relative; flex: 1 1 auto; min-height: 220px; border-radius: 18px; overflow: hidden; background: var(--sky-bottom); border: 1px solid var(--line); }
.scene { position: absolute; inset: 0; }
.scene-svg { width: 100%; height: 100%; display: block; }
.scene-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: italic 20px/1.4 var(--display); color: #3b3542; pointer-events: none; }
.scene-empty p { background: rgba(253, 250, 244, .88); padding: 16px 22px; border-radius: 16px; }
.tip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  display: flex; gap: 10px; align-items: center; width: 220px; padding: 6px 12px 6px 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 28px -12px rgba(35, 31, 43, .45);
}
.tip img { width: 50px; height: 50px; border-radius: 999px 999px 8px 8px; object-fit: cover; }
.tip b { display: block; font: 600 14px/1.2 var(--display); }
.tip small { color: var(--muted); font-size: 12px; }

.year { display: flex; align-items: center; gap: 10px; }
.play { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--lilac); background: var(--card); display: grid; place-items: center; color: var(--accent); }
.play svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.play.on { background: var(--accent); color: var(--on-accent); }
.months { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.months button { border: 0; background: none; border-radius: 10px; padding: 5px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); }
.months button:hover { background: var(--tint); }
.months button[aria-checked="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.dots { display: flex; gap: 2px; height: 7px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(60, 50, 40, .3); }
.year-caption { margin: -4px 0 0; font-size: 14px; color: var(--muted); min-height: 21px; }
.year-caption b { color: var(--ink); font-weight: 600; }

.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; flex: none; }
.kind { min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 8px 6px 6px; transition: border-color .15s, box-shadow .15s; }
.kind.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kind-photo { flex: none; border: 0; padding: 0; background: none; }
.kind-photo img { width: 42px; height: 52px; border-radius: 999px 999px 8px 8px; object-fit: cover; }
.kind.blooming .kind-photo img { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--lilac); }
.kind-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.kind-name { border: 0; background: none; padding: 0; text-align: left; font: 600 15px/1.15 var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kind-name:hover { color: var(--accent); }
.kind-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kind-meta small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.stepper { flex: none; display: flex; align-items: center; background: var(--tint); border-radius: 999px; }
.stepper button { width: 28px; height: 28px; border: 0; background: none; border-radius: 50%; font-size: 16px; color: var(--accent); display: grid; place-items: center; }
.stepper button svg { width: 14px; height: 14px; }
.stepper button:hover { background: var(--lilac); }
.stepper .rm { color: var(--vein); }
.stepper output { min-width: 18px; text-align: center; font-weight: 600; font-size: 14px; }
.stepper.big button { width: 36px; height: 36px; font-size: 18px; }
.add-neighbor { border-style: dashed; border-color: var(--lilac); background: none; text-align: left; padding: 6px 14px 6px 6px; }
.add-neighbor:hover { border-color: var(--accent); background: var(--card); }
.add-neighbor .plus { flex: none; width: 42px; height: 52px; border-radius: 999px 999px 8px 8px; display: grid; place-items: center; background: var(--tint); color: var(--accent); font-size: 22px; }
.add-neighbor b { display: block; font: 600 15px/1.2 var(--display); color: var(--accent); }
.add-neighbor small { color: var(--muted); font-size: 12px; }

/* Inspector */
.inspector { border-left: 1px solid var(--line); background: var(--card); position: relative; }
.close-drawer { display: none; }
.hero-photo { margin: 14px 14px 0; position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 999px 999px 12px 12px; }
.hero-photo figcaption { margin: 6px 4px 0; font: italic 12px/1.4 var(--display); color: var(--muted); text-align: right; }
.hero-photo figcaption a { color: inherit; text-decoration: none; }
.hero-photo figcaption a:hover { text-decoration: underline; }
.insp-pad { padding: 10px 22px 36px; }
.insp-empty { padding-top: 40px; }
.insp-title { font: 500 30px/1.1 var(--display); margin: 0; color: var(--ink); letter-spacing: -.01em; }
.sci { margin: 3px 0 0; font: italic 15px var(--display); color: var(--muted); }
.lede { color: var(--muted); margin: 8px 0 16px; }
.fit { margin: 12px 0 0; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; }
.fit.ok { background: var(--ok-bg); color: var(--green); }
.fit.warn { background: var(--warn-bg); color: var(--vein); }
.insp-actions { display: flex; align-items: center; gap: 12px; margin: 16px 0 6px; flex-wrap: wrap; }
.in-badge { font-size: 13px; font-weight: 600; color: var(--green); background: var(--ok-bg); padding: 5px 11px; border-radius: 999px; }
.facts { margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.facts div { min-width: 0; }
.facts dt { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.facts dd { margin: 3px 0 0; font-size: 14px; }
/* Bloom bar: twelve cells with the month letter inside, filled in flower color. */
.cal { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin: 18px 0 0; }
.cal span { height: 18px; border-radius: 4px; background: var(--tint); display: grid; place-items: end center; }
.cal span.on { background: var(--c); box-shadow: inset 0 0 0 1px rgba(60, 50, 40, .22); }
.cal span.seasonal { background: repeating-linear-gradient(135deg, var(--c) 0 4px, color-mix(in srgb, var(--c) 50%, var(--card)) 4px 7px); }
.cal i { font-style: normal; font-size: 9px; font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.cal span.on i { color: #2b2530; }
.cal span.now { outline: 2px solid var(--accent); outline-offset: 1px; }
.block { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.block h3 { font: 500 19px/1.2 var(--display); margin: 0 0 10px; color: var(--ink); }
.life { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.life li { font-size: 14px; }
.life b { display: inline-block; min-width: 30px; font: 600 18px var(--display); color: var(--vein); }
.butterflies { font-size: 14px; margin: 8px 0 0; }
.flag { font-size: 13px; background: var(--tint); padding: 8px 12px; border-radius: 12px; margin: 12px 0 0; color: var(--muted); }
.neighbors { display: grid; gap: 8px; }
.nb { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); transition: border-color .15s, background .15s; }
.nb:hover { border-color: var(--lilac); background: var(--tint); }
.nb-open { flex: none; border: 0; padding: 0; background: none; }
.nb-open img { width: 50px; height: 60px; border-radius: 999px 999px 8px 8px; object-fit: cover; }
.nb-text { flex: 1; min-width: 0; }
.nb-text b { display: block; font: 600 15px/1.2 var(--display); }
.nb-text small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.nb-add { flex: none; border: 1px solid var(--accent); background: var(--card); color: var(--accent); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 13px; }
.nb-add:hover { background: var(--accent); color: var(--on-accent); }
.source { margin: 22px 0 0; font-size: 13.5px; }

/* ---------- scene states ---------- */

.scene-svg .hit { fill: transparent; }
.scene-svg .pl { cursor: pointer; --lf: var(--lf0); --lf2: color-mix(in srgb, var(--lf0) 80%, #fff); --st: color-mix(in srgb, var(--lf0) 85%, #000); transition: opacity .3s; transform-box: fill-box; }
.scene-svg .pl .bloom, .scene-svg .pl .dormant, .scene-svg .pl .bare { display: none; }
.scene-svg .pl.on .bloom { display: inline; }
.scene-svg .pl:not(.on) .bare { display: inline; }
.scene-svg .pl:hover { filter: brightness(1.06); }
.scene-svg .halo { fill: #fffaf2; opacity: 0; transition: opacity .25s; pointer-events: none; }
.scene-svg .halo.sel { opacity: .45; }
.scene-svg .pl.ghost { opacity: .6; animation: ghost 1.4s ease-in-out infinite alternate; }
@keyframes ghost { to { opacity: .9; } }
.scene-svg .pl.new { animation: grow .6s cubic-bezier(.3, 1.4, .5, 1) both; transform-origin: 50% 100%; }
@keyframes grow { from { transform: scale(.4); opacity: 0; } }

.scene-svg[data-season="fall"] .pl.lf-d.f-shrub, .scene-svg[data-season="fall"] .pl.lf-d.f-tree, .scene-svg[data-season="fall"] .pl.lf-d.f-vine { --lf: var(--fall); --lf2: color-mix(in srgb, var(--fall) 75%, #e9c46a); }
.scene-svg[data-m="11"] .pl.lf-d.f-wildflower, .scene-svg[data-m="11"] .pl.lf-d.f-fern { --lf: color-mix(in srgb, var(--lf0) 45%, #a68a52); }
.scene-svg[data-m="11"] .pl.lf-d.f-grass, .scene-svg[data-m="10"] .pl.f-grass { --lf: color-mix(in srgb, var(--lf0) 55%, #c39a5a); }
.scene-svg[data-season="winter"] .pl.lf-d.f-shrub .fol, .scene-svg[data-season="winter"] .pl.lf-d.f-tree .fol, .scene-svg[data-season="winter"] .pl.lf-d.f-vine .fol { opacity: 0; }
.scene-svg[data-season="winter"] .pl.lf-d.f-wildflower .fol, .scene-svg[data-season="winter"] .pl.lf-d.f-fern .fol { display: none; }
.scene-svg[data-season="winter"] .pl.lf-d.f-wildflower .dormant, .scene-svg[data-season="winter"] .pl.lf-d.f-fern .dormant { display: inline; }
.scene-svg[data-season="winter"] .pl.lf-d .bare { display: none; }
.scene-svg[data-season="winter"] .pl.f-grass { --lf: #cdb07a; }

.scene-svg[data-season="spring"] { --sky-top: #e3edf2; --sky-bottom: #f6f4ea; --lawn: #a7c08a; --hedge: #9db58a; --hedge-far: #c2d2b3; }
.scene-svg[data-season="summer"] { --sky-top: #dde9ef; --sky-bottom: #f6f2e4; --lawn: #9fb57f; --hedge: #879f74; --hedge-far: #b1c3a1; }
.scene-svg[data-season="fall"] { --sky-top: #e7e6e0; --sky-bottom: #f6f0e3; --lawn: #a9b07f; --hedge: #8d9764; --hedge-far: #c9c49a; }
.scene-svg[data-season="winter"] { --sky-top: #e3e6ea; --sky-bottom: #f1efe9; --lawn: #b9b8a0; --hedge: #9fa292; --hedge-far: #c9cbc0; }
.scene-svg rect, .scene-svg path { transition: fill .6s; }

/* ---------- planting list sheet ---------- */

.sheet { border: 1px solid var(--line); border-radius: 22px; padding: 0; width: min(620px, 100% - 24px); max-height: min(88vh, 900px); background: var(--card); color: var(--ink); box-shadow: 0 30px 80px rgba(30, 25, 35, .3); }
.sheet::backdrop { background: rgba(35, 31, 43, .4); backdrop-filter: blur(3px); }
.sheet-inner { padding: 26px 28px 24px; }
.sheet-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.sheet-head h2 { font: 500 32px/1.1 var(--display); margin: 0; }
.sheet-head .ghost-btn { font-size: 20px; padding: 2px 12px; }
.buy { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.buy li { display: flex; gap: 14px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 16px; }
.buy img { width: 56px; height: 68px; border-radius: 999px 999px 8px 8px; object-fit: cover; }
.buy b { display: block; font: 600 16px var(--display); }
.buy i { display: block; color: var(--muted); font: italic 14px var(--display); }
.buy small { color: var(--muted); font-size: 13px; }
.steps { margin-top: 22px; background: var(--tint); border-radius: 16px; padding: 14px 18px; }
.steps h3 { font: 500 19px var(--display); margin: 0 0 6px; }
.steps ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 20px; }

.toast {
  position: fixed; left: 50%; top: calc(var(--top) + 12px); z-index: 50; transform: translate(-50%, -8px); opacity: 0;
  display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 18px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
  transition: opacity .2s, transform .2s; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast button { border: 0; background: color-mix(in srgb, var(--paper) 18%, transparent); color: var(--paper); border-radius: 999px; padding: 5px 12px; font-weight: 600; }

.tabs { display: none; }

/* ---------- two columns: details slide over ---------- */

@media (max-width: 1180px) and (min-width: 681px) {
  .work { grid-template-columns: clamp(270px, 36vw, 340px) minmax(0, 1fr); }
  .planting { padding: 16px 18px; }
  .inspector {
    position: fixed; top: var(--top); right: 0; bottom: 0; width: min(400px, 92vw); z-index: 20;
    transform: translateX(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1);
    box-shadow: -20px 0 50px rgba(0, 0, 0, .14);
  }
  body.drawer-open .inspector { transform: none; }
  .close-drawer { display: grid; place-items: center; position: sticky; top: 10px; margin: 10px 10px -48px auto; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 22px; }
  /* Narrow column: pills may wrap their labels instead of overflowing. */
  .ideas { padding: 16px 14px 32px; }
  .seg { border-radius: 16px; }
  .seg button { font-size: 12px; white-space: normal; line-height: 1.15; padding: 6px 2px; min-width: 0; }
  .space-row { flex-wrap: wrap; }
  .grid { gap: 10px; }
  .card-text b { font-size: 14px; }
  .roster { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}
@media (max-width: 900px) {
  .planting-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .planting-head .primary { align-self: flex-start; padding: 8px 16px; }
  .title-input { font-size: 26px; }
  .months button { font-size: 10.5px; }
}

/* ---------- short desktop screens ---------- */

@media (min-width: 681px) and (max-height: 760px) {
  .title-input { font-size: 26px; }
  .planting { gap: 8px; padding-top: 12px; }
}

/* ---------- intro on narrower screens ---------- */

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .plate { display: none; }
}

/* ---------- phones: one pane at a time ---------- */

@media (max-width: 680px) {
  :root { --top: 56px; }
  .top { padding: 0 16px; }
  .brand img { height: 30px; }
  .ghost-btn { padding: 6px 11px; font-size: 13px; }
  .work { display: block; height: auto; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .pane { display: none; overflow: visible; }
  body[data-tab="ideas"] .ideas, body[data-tab="plant"] .inspector { display: block; }
  .ideas { border: 0; padding: 16px 16px 24px; }
  .planting { display: none; padding: 14px 16px 16px; }
  body[data-tab="planting"] .planting { display: flex; }
  .title-input { font-size: 26px; }
  .planting-head .primary { padding: 9px 14px; font-size: 14px; }
  .stage { flex: none; aspect-ratio: 5 / 4; min-height: 0; }
  .months { gap: 1px; }
  .months button { font-size: 10.5px; padding: 4px 0; }
  .play { width: 32px; height: 32px; }
  .inspector { border: 0; }
  .insp-pad { padding: 10px 16px 28px; }
  .tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 95%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
  }
  .tabs[hidden] { display: none !important; }
  .tabs button { border: 0; background: none; border-radius: 999px; padding: 10px 4px; font-weight: 500; color: var(--muted); }
  .tabs button[aria-current="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
  .hero-inner { width: calc(100% - 32px); padding-top: 20px; }
  .hero-sub { font-size: 16px; }
  .ask input { font-size: 16px; }
  .starters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none; }
  .starters::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .plate { display: none; }
  .ribbon-label { width: calc(100% - 32px); }
  .ribbon { padding: 2px 16px 8px; }
  .rib { width: 128px; }
  .sheet-inner { padding: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  body > *:not(.sheet) { display: none !important; }
  body::before { display: none; }
  .sheet { position: static; box-shadow: none; max-height: none; width: 100%; border: 0; }
  .sheet-actions, #sheet-close { display: none; }
}

/* Until the plants load we do not know whether to show the intro or the workspace. */
body.booting .hero, body.booting .work, body.booting .tabs { visibility: hidden; }

/* ---------- space bar: bed size or the pot grouping ---------- */

.space-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.space-bar .seg2 { width: 124px; }
.space-dims { display: flex; align-items: center; gap: 6px; }
.times { color: var(--muted); }
.sizer { display: inline-flex; align-items: center; background: var(--card); border: 1px solid var(--lilac); border-radius: 999px; padding: 2px; }
.sizer button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--accent); font-size: 17px; }
.sizer button:hover { background: var(--tint); }
.sizer output { min-width: 48px; text-align: center; font-weight: 600; font-size: 14px; }
.sizer.mini button { width: 26px; height: 26px; }
.sizer.mini output { min-width: 40px; font-size: 13px; }
.space-hint { font-size: 13px; color: var(--muted); }
.pot-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pot-chip { display: flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); padding: 2px 4px 2px 2px; }
.pot-chip.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pot-pick { display: flex; align-items: center; gap: 6px; border: 0; background: none; border-radius: 999px; padding: 5px 10px 5px 8px; color: var(--ink); }
.pot-pick svg { width: 16px; height: 16px; color: var(--clay, #b9643f); stroke: #b9643f; }
.pot-pick span { font-weight: 600; font-size: 14px; }
.pot-pick small { color: var(--muted); font-size: 12px; }
.pot-chip:not(.on) .pot-pick:hover { background: var(--tint); }
.pot-chip .sizer { border: 0; background: var(--tint); }
.pot-remove { width: 28px; height: 28px; border: 0; background: none; border-radius: 50%; color: var(--vein); display: grid; place-items: center; }
.pot-remove svg { width: 14px; height: 14px; }
.pot-remove:hover { background: var(--tint); }
.add-pot { border: 1px dashed var(--lilac); background: none; color: var(--accent); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13px; }
.add-pot:hover { border-color: var(--accent); background: var(--card); }

/* Roster grouped by pot. */
.pot-group { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; }
.pot-group.on { border-color: var(--lilac); background: color-mix(in srgb, var(--tint) 55%, transparent); }
.pot-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0 2px; text-align: left; font: 600 14px var(--display); color: var(--ink); }
.pot-head svg { width: 16px; height: 16px; stroke: #b9643f; }
.pot-head em { font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-style: normal; margin-left: 6px; }
.pot-empty { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--muted); }

/* Pot flags: plants with documented container use. */
.pot-flag {
  position: absolute; left: 14px; top: 12px; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px 3px 6px; border-radius: 999px; background: var(--card); color: var(--ink);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.pot-flag svg { width: 13px; height: 13px; fill: none; stroke: #b9643f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pot-note { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--tint); font-size: 13px; color: var(--muted); }
.pot-note svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #b9643f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.pot-note b { color: var(--ink); }
.pot-head svg, .pot-pick svg, .buy-pot svg { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.buy-pot { display: flex; align-items: center; gap: 8px; font: 500 18px var(--display); margin: 20px 0 0; }
.buy-pot svg { width: 18px; height: 18px; stroke: #b9643f; }
.buy-pot + .buy { margin-top: 10px; }

/* Scene: bed handles and pots. */
.scene-svg .handle { cursor: ew-resize; outline: none; }
.scene-svg .handle.h-depth { cursor: ns-resize; }
.scene-svg .handle circle { fill: #fffaf2; stroke: #5d4a7c; stroke-width: 2; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); transition: r .15s; }
.scene-svg .handle:hover circle, .scene-svg .handle:focus-visible circle { fill: #eee7f4; }
.scene-svg .handle .arrow { fill: none; stroke: #5d4a7c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.scene-svg .handle-label { font: 600 16px Georgia, serif; fill: #231f2b; paint-order: stroke; stroke: #fffaf2; stroke-width: 4px; }
.scene-svg.dragging { cursor: grabbing; }
.scene-svg .pot { cursor: pointer; }
.scene-svg .pot-ring { fill: none; stroke: transparent; stroke-width: 3; stroke-dasharray: 6 6; }
.scene-svg .pot.active .pot-ring { stroke: #5d4a7c; }
.scene-svg .pot-label { font: 600 15px Georgia, serif; fill: #fbe9dc; opacity: .85; pointer-events: none; }

/* ---------- dark: neutral evening, lilac only as a quiet accent ---------- */
/* The brand's plum dark theme made every surface purple; here surfaces are warm
   charcoal, actions use the brand's Quercus green, lilac stays for small touches. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --t-mist: #1c1d1a; --t-paper: #252722; --t-line: #3a3d35; --t-lilac-soft: #2e302a; --t-lilac: #4a4d44;
    --t-ink: #f2eee5; --t-muted: #b8b4aa; --t-moss: #b4d494; --t-on-moss: #18200f; --t-green: #b4d494;
    --t-vein: #f2c0c2; --t-mat: #2a2b27; --t-mat-line: #3a3d35; --t-grain: .04;
  }
  :root:not([data-theme="light"]) .scene-svg { filter: brightness(.93) saturate(.95); }
  :root:not([data-theme="light"]) .kicker { color: #c9b6dc; }
  :root:not([data-theme="light"]) .seg button[aria-checked="true"],
  :root:not([data-theme="light"]) .months button[aria-checked="true"],
  :root:not([data-theme="light"]) .tabs button[aria-current="true"] { background: var(--t-ink); color: var(--t-mist); }
}

.fresh { display: block; margin-top: 8px; border: 1px dashed var(--lilac); background: none; border-radius: 999px; padding: 6px 14px; color: var(--accent); font-weight: 600; font-size: 13px; }
.fresh:hover { border-color: var(--accent); background: var(--card); }

/* ---------- how well a plant suits the spot ---------- */

.match { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.match i { font-style: normal; font-size: 10px; }
.m-great { background: color-mix(in srgb, var(--green) 20%, var(--card)); color: var(--green); }
.m-good { background: color-mix(in srgb, var(--green) 11%, var(--card)); color: var(--green); }
.m-asked { background: var(--tint); color: var(--accent); }
.m-off { background: color-mix(in srgb, #c07a2c 16%, var(--card)); color: #8a4d12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-off { color: #f0c28a; } }
.almost-label { margin: 22px 2px 10px; }
.grid.almost .card { opacity: .88; }
.grid.almost .card:hover { opacity: 1; }
.fit.unknown { background: var(--tint); color: var(--muted); }
.fit b { font-weight: 700; }

.kind.misfit { border-color: color-mix(in srgb, #c07a2c 55%, var(--line)); }
.swap-hint { border: 0; background: color-mix(in srgb, #c07a2c 16%, var(--card)); color: #8a4d12; border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.swap-hint:hover { background: color-mix(in srgb, #c07a2c 26%, var(--card)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .swap-hint { color: #f0c28a; } }
.misfit-banner { grid-column: 1 / -1; margin: 0; padding: 8px 12px; border-radius: 12px; font-size: 13.5px; background: color-mix(in srgb, #c07a2c 12%, var(--card)); color: var(--ink); }
.swaps h3 { color: #8a4d12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .swaps h3 { color: #f0c28a; } }

/* Carrying a plant in the sketch. */
.scene-svg .pl { touch-action: none; }
.scene-svg.carrying, .scene-svg.carrying .pl { cursor: grabbing; }
.scene-svg .pl.lifted { filter: drop-shadow(0 10px 8px rgba(30, 22, 15, .35)); opacity: .95; }
.scene-svg .pot.drop .pot-ring { stroke: #48652f; stroke-dasharray: none; stroke-width: 4; }
.tidy { font-size: 13px; }

/* ---------- seasons change gently ---------- */
/* Flowers open and fade, berries swell after them, leaves turn and drop: opacity and scale
   instead of display, so moving through the months (or playing the year) reads as growth. */
.scene-svg .pl .bloom, .scene-svg .pl .fruit, .scene-svg .pl .dormant, .scene-svg .pl .bare {
  display: inline; opacity: 0; pointer-events: none;
  transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.82) translateY(3px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.3, .5, 1);
}
.scene-svg .pl.on .bloom, .scene-svg .pl.fruiting .fruit { opacity: 1; transform: none; }
.scene-svg .pl:not(.on):not(.fruiting) .bare { opacity: 1; transform: none; }
.scene-svg .pl .fol { transition: opacity .7s ease; }
.scene-svg .pl ellipse, .scene-svg .pl path, .scene-svg .pl circle { transition: fill .8s ease, stroke .8s ease; }
.scene-svg[data-season="winter"] .pl.lf-d.f-wildflower .fol, .scene-svg[data-season="winter"] .pl.lf-d.f-fern .fol { display: inline; opacity: 0; }
.scene-svg[data-season="winter"] .pl.lf-d.f-wildflower .dormant, .scene-svg[data-season="winter"] .pl.lf-d.f-fern .dormant { opacity: 1; transform: none; }
.scene-svg[data-season="winter"] .pl.lf-d .bare { opacity: 0; }

/* ---------- review fixes ---------- */

/* Selected pills carry the brand color, not near-black; focus shows on them too. */
.seg button[aria-checked="true"], .months button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seg button[aria-checked="true"],
  :root:not([data-theme="light"]) .months button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
}
.seg { overflow: visible; }
.seg button:first-child { border-radius: 999px 0 0 999px; }
.seg button:last-child { border-radius: 0 999px 999px 0; }
.seg button:focus-visible { outline: 3px solid var(--lilac); outline-offset: 1px; position: relative; z-index: 1; }
.scene-svg .handle:focus-visible circle { stroke: #48652f; stroke-width: 3.5; }

/* Details drawer on mid-size screens: a scrim behind it that closes it. */
.scrim { display: none; }
@media (max-width: 1180px) and (min-width: 681px) {
  .scrim { display: block; position: fixed; inset: var(--top) 0 0 0; z-index: 19; background: rgba(35, 31, 43, .28); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.drawer-open .scrim { opacity: 1; pointer-events: auto; }
  .inspector { border-radius: 20px 0 0 20px; box-shadow: -24px 0 60px rgba(0, 0, 0, .18); }
  .seg button { white-space: nowrap; font-size: 12px; padding: 6px 1px; }
}

/* Toasts at the bottom, clear of titles and the main button; inside the list dialog when open. */
.toast { top: auto; bottom: 22px; transform: translate(-50%, 8px); }
.toast.show { transform: translate(-50%, 0); }
.sheet .toast { position: sticky; left: auto; bottom: 12px; margin: 0 auto 10px; width: max-content; transform: none; }
@media (max-width: 680px) { .toast { bottom: calc(76px + env(safe-area-inset-bottom)); max-width: calc(100% - 24px); font-size: 13px; } }

/* The sketch rests a little in dark mode instead of glowing. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene-svg .backdrop, :root:not([data-theme="light"]) .scene-svg .ground { filter: brightness(.78) saturate(.9); }
  :root:not([data-theme="light"]) .scene-svg { filter: none; }
  :root:not([data-theme="light"]) .stage { background: #3a3a33; }
}

/* Plant row: a warning gets its own line so the count control never gets pushed out. */
.kind-meta { flex-wrap: wrap; }
.kind.misfit .kind-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.kind.misfit .swap-hint { grid-column: 1 / -1; justify-self: start; max-width: 100%; }
.kind.misfit .kind-meta small { display: none; }
.roster, .pot-group { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }

/* Pots: empty pots quiet, pot chips scroll in one row on narrow screens. */
.scene-svg .pot.empty .pot-body { opacity: .55; }
.move-to { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; font-size: 13px; color: var(--muted); }
.chip.small { padding: 5px 11px; font-size: 13px; }
@media (max-width: 900px) {
  .pot-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding: 2px; }
  .pot-chips::-webkit-scrollbar { display: none; }
  .pot-chip, .add-pot { flex: none; }
  .space-bar { flex-wrap: wrap; }
  .space-bar .pot-chips { flex: 1 1 100%; }
}

/* Bigger touch targets on phones. */
@media (max-width: 680px) {
  .stepper button, .sizer button { width: 36px; height: 36px; }
  .card-add { width: 38px; height: 38px; }
  .pot-pick { padding: 9px 12px; }
  .pot-remove { width: 36px; height: 36px; }
  .months button { min-height: 40px; }
}

/* Intro on phones: nothing wider than the screen. */
.hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
@media (max-width: 900px) { .hero-inner { grid-template-columns: minmax(0, 1fr); } }
.hero-text, .ask { min-width: 0; max-width: 100%; }
.hero { overflow-x: hidden; }

.buy .looks { display: block; color: var(--green); }

/* Instant actions: what Enter will do, and a few tappable commands. */
.cmd { margin: 8px 2px 0; font-size: 13px; color: var(--green); font-weight: 600; }
.cmd.unclear { color: var(--muted); font-weight: 500; }
.cmd kbd { font: 600 11px var(--sans); border: 1px solid var(--lilac); border-radius: 6px; padding: 1px 6px; margin-right: 6px; color: var(--muted); background: var(--card); }
.cmd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cmd-chips:empty { display: none; }
.cmd-chips .chip { font-size: 12.5px; padding: 4px 10px; color: var(--accent); }

/* Where: state and county. */
.where-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.where-row select { width: 100%; min-width: 0; border: 1px solid var(--lilac); border-radius: 999px; background: var(--card); color: var(--ink); padding: 8px 12px; font-size: 13.5px; }
.warn-text { color: #8a4d12; }
.native-line { margin: 12px 0 0; padding: 9px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--green); font-size: 13.5px; }
.native-line span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.native-line.off { background: color-mix(in srgb, #c07a2c 14%, var(--card)); color: #8a4d12; }
.native-line.unknown { background: var(--tint); color: var(--muted); }

/* ---------- inside the tiarellaplants.com frame ---------- */
/* The site frame supplies the header (logo, nav, then the header slot with Undo and Start over),
   <main id="main-content"> and an empty footer. Only this page's own styles load here. */
.q-top { gap: 20px; }
.q-brand { display: block; flex: none; }
.q-brand img { height: 34px; width: auto; display: block; }
.q-brand .mark-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .q-brand .mark-light { display: none; }
  :root:not([data-theme="light"]) .q-brand .mark-dark { display: block; }
}
.q-nav { display: flex; align-items: center; gap: 18px; margin-right: auto; }
.q-nav a { color: var(--ink); text-decoration: none; font-size: 14px; }
.q-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.q-nav a[href="/garden/"] { color: var(--accent); font-weight: 600; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.skip-link:focus { left: 12px; }
.site-frame, #page-content { margin: 0; padding: 0; max-width: none; }
#page-content:focus { outline: none; }
.q-footer { display: none; }
@media (max-width: 680px) {
  .q-top { gap: 10px; }
  .q-brand img { height: 28px; }
  .q-nav { gap: 12px; }
  .q-nav a { font-size: 13px; }
  .top-actions .quiet { display: none; }
}