/* GARDEN: experimental styles. Teardown: delete this file. */
#garden-root {
  font-family: system-ui, sans-serif;
  /* GARDEN Phase 3.2 experimental override: full-viewport overlay so the
     scene element sits at viewport (0,0). The zoom math reads
     getBoundingClientRect (viewport coords) and feeds the result straight
     into transform-origin (interpreted in the scene's local coords) — those
     two coordinate systems only agree when the scene starts at (0,0). The
     z-index keeps the garden over SPA chrome; Escape (and Task 3.3's
     "back to app" affordance) is the way out. */
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow: hidden;
  /* Phase 4.5 / Task 4.5.2: opaque sky gradient. Before this, the empty area
     below the terrarium had no background — the overlay was invisible but
     still claimed pointer events, intercepting clicks meant for the SPA.
     Soft pastel blue → warm horizon hint → suggestion of distant ground;
     impressionistic, not photo-real. The click handler in index.js gates
     on `.garden-terrarium-nested` ancestry via closest(), so empty-sky
     clicks safely no-op. */
  background: linear-gradient(180deg, #c9e0f3 0%, #e8f1d6 80%, #d6e3c0 100%);
}

/* GARDEN Phase 3.2: discrete scene containers for click-to-zoom transitions. */
.garden-scene {
  position: absolute;
  inset: 0;
  padding: 1rem;
  box-sizing: border-box;
  /* Off-by-default scenes (non-active) sit behind the active one — the
     active scene gets a higher z-index so during a zoom-out the previous
     scene mounts behind the current one and animates up. */
  z-index: 0;
  overflow: auto;
}
.garden-scene-active {
  z-index: 1;
}
.garden-scene-animating {
  /* Applied for the duration of a zoom transition only; removed when the
     scene is swapped or kept on the new active scene at rest (no-op when
     no transform is set). */
  transition: transform 700ms ease-in-out;
  /* Defensive: a scaling parent with overflow: auto would clip strangely.
     During the animation we want the transform to be visible. */
  overflow: visible;
}

.garden-load-error {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #b34;
}

.garden-terrarium {
  border: 2px solid #6b8e5a;
  border-radius: 12px;
  padding: 1.5rem;
  /* Phase 4.5 / Task 4.5.2: soil + horizon line near the bottom so plants
     visibly grow OUT of ground rather than floating in a flat pastel field.
     Top 60% transparent (the #garden-root sky shows through), then a hard
     horizon at the 60% mark stepping into a warm tan soil that darkens
     toward the bottom edge. Inset shadow gives a subtle "recessed
     terrarium" depth cue. */
  background:
    linear-gradient(180deg, transparent 60%, #d8c8a0 60%, #c4a878 100%);
  box-shadow:
    inset 0 -8px 16px rgba(0, 0, 0, 0.08),
    inset 0 4px 12px rgba(0, 0, 0, 0.04);
}
.garden-terrarium-header { font-weight: 600; margin-bottom: 1rem; }
.garden-terrarium-plants {
  display: grid;
  /* Phase 4.6 visual polish: bumped from 120px → 160px so the larger 80px
     plant SVGs (was 48px) have room to breathe in the grid. */
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  /* Breathing room above the soil band so plants visually "stand on" it
     instead of being clipped flush against the bottom edge. */
  padding-bottom: 1rem;
}

/* Phase 4.6 visual polish: root terrarium fills the available scene height.
   Without this, the terrarium sized to its content (~250px) and the empty
   sky beneath it claimed the rest of the viewport — visually "dead" space.
   The `>` direct-child selector intentionally only matches the root; nested
   terrariums (deeper in the tree) keep their content-sized behaviour.
   Flex column lets the soil gradient sit at the viewport's bottom edge while
   the plants grid (flex: 1, align-content: start) packs at the top. */
.garden-scene > .garden-terrarium {
  min-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
}
.garden-scene > .garden-terrarium .garden-terrarium-plants {
  flex: 1;
  /* Pack rows at the bottom of the flex column so plants visually sit on
     the soil horizon (60% mark) instead of floating in the sky. Each
     individual plant cell also bottom-aligns its SVG via .garden-plant
     justify-content below so the silhouette base touches the horizon. */
  align-content: end;
}
.garden-plant {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 1rem 0.5rem;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
  /* Bottom-align: SVG + label sit at the bottom of the cell so the plant
     base touches the soil horizon set by the terrarium gradient. Without
     this the cell-internal layout floats the SVG to its own natural top. */
  justify-content: flex-end;
}
.garden-plant:hover { transform: translateY(-2px); }
/* Phase 4.5 / Task 4.5.1: the SVG shape library replaces the old ellipse leaf.
   Colour, droop, bloom petals, and the pest dot are baked into the SVG by
   plant-shapes.js — CSS just sizes the slot and adds motion (active pulse). */
.garden-plant-svg {
  /* Phase 4.6 visual polish: bumped from 48px → 80px so plants read clearly
     at typical desktop viewport widths. Nested terrariums override down to
     60px (see `.garden-terrarium-nested .garden-plant-svg` below). */
  width: 80px;
  height: 80px;
  display: block;
  /* Reserve space for the active-glow filter so it doesn't clip. */
  overflow: visible;
}
.garden-plant-label { font-size: 0.85rem; text-align: center; }

/* Active: soft pulsing glow around the SVG. The shape itself uses healthy
   colours; the glow lives on the wrapper so it works with any silhouette. */
.garden-vitality-active .garden-plant-svg {
  filter: drop-shadow(0 0 4px #b9e89e);
  animation: garden-pulse 2s ease-in-out infinite;
}
@keyframes garden-pulse {
  0%, 100% { filter: drop-shadow(0 0 4px #b9e89e); }
  50%      { filter: drop-shadow(0 0 9px #b9e89e); }
}

.garden-terrarium-nested {
  border-width: 1px;
  border-style: solid;
  border-color: #8aab74;
  border-radius: 8px;
  padding: 0.75rem;
  /* Phase 4.5 / Task 4.5.2: lighter soil treatment for nested terrariums.
     Same metaphor (transparent sky → soil band) but a higher horizon
     (65%) and a softer tan so a nested terrarium reads as a smaller
     terrarium-within-a-terrarium rather than competing with the parent. */
  background:
    linear-gradient(180deg, transparent 65%, #e0d4b4 65%, #cdb992 100%);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* Flex column so silhouettes can bottom-align to the soil horizon when
     the parent grid stretches us taller than our natural content. Without
     this, silhouettes float in the sky portion. */
  display: flex;
  flex-direction: column;
}
.garden-terrarium-nested .garden-terrarium-silhouettes {
  flex: 1;
  align-content: end;
}
.garden-terrarium-nested:hover {
  transform: translateY(-2px);
}

/* Phase 3.1 refinement (2026-05-02): "abstracted nested terrarium" rollup
   colour. The outer frame is tinted by the WORST vitality found anywhere in
   the subtree so a depth-N stuck task surfaces at the parent's view without
   drawing any of the real children. Border + outer glow only — the soil
   gradient and inner content stay neutral so the cue is pre-attentive but
   doesn't drown the rest of the parent scene. Healthy is the no-op default
   so we don't override the base #8aab74 border for the common case. */
/* Stuck and wilting are the two states the design says ACTIVELY pull the
   eye. They get a thicker border + larger halo + a slow pulse so a parent
   terrarium with a deep stuck task is unmistakable from across the garden.
   Bloom announces (good news, briefly), sprout/active are calm cues. */
.garden-terrarium-nested.garden-vitality-rollup-stuck {
  border-width: 2px;
  border-color: #8a3d2a;
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.06),
    0 0 0 2px rgba(196, 68, 68, 0.35),
    0 0 14px rgba(196, 68, 68, 0.55);
  animation: garden-rollup-stuck-pulse 2.6s ease-in-out infinite;
}
@keyframes garden-rollup-stuck-pulse {
  0%, 100% { box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.06),
    0 0 0 2px rgba(196, 68, 68, 0.30),
    0 0 12px rgba(196, 68, 68, 0.40);
  }
  50%      { box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.06),
    0 0 0 2px rgba(196, 68, 68, 0.55),
    0 0 22px rgba(196, 68, 68, 0.70);
  }
}
.garden-terrarium-nested.garden-vitality-rollup-wilting {
  border-width: 2px;
  border-color: #a89060;
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.06),
    0 0 0 2px rgba(168, 144, 96, 0.45),
    0 0 12px rgba(168, 144, 96, 0.45);
}
.garden-terrarium-nested.garden-vitality-rollup-bloom {
  border-width: 2px;
  border-color: #c97a9a;
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.06),
    0 0 0 2px rgba(240, 163, 194, 0.40),
    0 0 14px rgba(240, 163, 194, 0.55);
}
.garden-terrarium-nested.garden-vitality-rollup-active {
  border-color: #6b8e5a;
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.06),
    0 0 6px rgba(185, 232, 158, 0.55);
  animation: garden-rollup-pulse 2.4s ease-in-out infinite;
}
@keyframes garden-rollup-pulse {
  0%, 100% { box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.06), 0 0 6px rgba(185, 232, 158, 0.45); }
  50%      { box-shadow: inset 0 -4px 8px rgba(0, 0, 0, 0.06), 0 0 12px rgba(185, 232, 158, 0.7); }
}
.garden-terrarium-nested.garden-vitality-rollup-sprout {
  border-color: #a3c98a;
}
/* healthy intentionally has no override — base styling covers it. */

/* Phase 3.1 refinement: low-contrast silhouette plants painted INSIDE an
   abstracted nested terrarium. They give the frame texture so it doesn't
   read as empty without exposing real child identities. Smaller than real
   plants (40px), de-emphasized (low opacity, slightly desaturated), and
   inert (pointer-events: none) so they can't be mistaken for clickable
   leaves — only the outer terrarium handles clicks via index.js's
   delegation. The container grid sets a tighter min size so several
   silhouettes fit in a small frame. */
.garden-terrarium-silhouettes {
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 0.4rem;
  pointer-events: none;
}
.garden-plant-silhouette {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.45;
  filter: grayscale(0.3);
}
.garden-plant-silhouette-svg {
  width: 40px;
  height: 40px;
  display: block;
}
.garden-terrarium-nested .garden-terrarium-header {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}
.garden-terrarium-nested .garden-terrarium-plants {
  /* Phase 4.6 visual polish: bumped from 80px → 120px to match the larger
     60px nested-plant SVGs while staying smaller than root (160px). */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
}
/* Phase 4.6 visual polish: nested plants render slightly smaller than root
   plants so a nested terrarium reads as a smaller scene-within-a-scene.
   60px vs the 80px root default. */
.garden-terrarium-nested .garden-plant-svg {
  width: 60px;
  height: 60px;
}

/* GARDEN Phase 3.3: persistent breadcrumb path. Fixed in the top-left of the
   viewport above all scenes. The z-index sits one above the active scene
   (which uses z-index: 1 inside the garden root at z-index: 9000), so this
   stays clickable even mid-zoom. */
.garden-breadcrumb {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9100;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #cdd9bf;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
  white-space: nowrap;
}
.garden-breadcrumb-segment {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font: inherit;
  color: #3d5a32;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.garden-breadcrumb-segment:hover:not([disabled]) {
  background: #e8efde;
}
.garden-breadcrumb-segment:focus-visible {
  outline: 2px solid #6b8e5a;
  outline-offset: 1px;
}
.garden-breadcrumb-current {
  color: #1f2d18;
  font-weight: 600;
  cursor: default;
}
.garden-breadcrumb-separator {
  color: #8aab74;
  user-select: none;
}

/* GARDEN Phase 4.4: My/Shared view-mode toggle. Mirrors breadcrumb's pill
   styling but anchors top-right. Sits above the active scene at the same
   z-index as the breadcrumb so it stays clickable mid-zoom. */
.garden-view-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9100;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #cdd9bf;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
}
.garden-view-toggle-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font: inherit;
  color: #3d5a32;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.garden-view-toggle-btn:hover[aria-pressed="false"] {
  background: #e8efde;
}
.garden-view-toggle-btn:focus-visible {
  outline: 2px solid #6b8e5a;
  outline-offset: 1px;
}
.garden-view-toggle-active,
.garden-view-toggle-btn[aria-pressed="true"] {
  background: #4a7d3a;
  color: #fff;
  font-weight: 600;
  cursor: default;
}

/* GARDEN Phase 4.5.3: exit (×) button. Lives at the LEFT edge of the toggle
   pill. Visually distinct from the My/Shared toggle buttons — circular,
   muted by default, warmer on hover — so it reads as a separate dismiss
   affordance, not a third toggle option. We render it inline with the pill
   to keep all top-right chrome in one wrapper (single positioning concern). */
.garden-view-toggle-exit {
  appearance: none;
  background: transparent;
  border: 1px solid #cdd9bf;
  color: #6b7d5a;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  padding: 0;
  margin-right: 0.15rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.garden-view-toggle-exit:hover {
  background: #f3e2d9;
  color: #8a3d2a;
  border-color: #d9b3a3;
}
.garden-view-toggle-exit:focus-visible {
  outline: 2px solid #8a3d2a;
  outline-offset: 1px;
}

/* GARDEN Phase 4.4: shared-mode overlay. The class `garden-vitality-wilting`
   stays on the plant for inspection and the "my garden" view; in shared mode
   we mask the visible droop/desaturation so a personally-relevant wilting
   plant reads as healthy without re-rendering. After Phase 4.5 the plant is
   an inline SVG with hard-coded fill colours, so we can't recolour via CSS —
   instead we (a) restore opacity and rotation on the wrapper, and (b) apply a
   sepia-undo + saturation boost via filter so the brown leaf reads green-ish.
   Imperfect colour match, but the key signal — "this plant looks alive" —
   carries. Single source of truth for healthy colours lives in
   plant-shapes.js's VARIANTS table; keep filter values roughly in sync if
   that palette ever shifts. */
#garden-root.garden-mode-shared .garden-vitality-wilting .garden-plant-svg {
  opacity: 1;
  transform: none;
  filter: hue-rotate(40deg) saturate(1.4) brightness(1.05);
}