/* =============================================================
   styles.css - Rododendron PWA
   Palette, layout, mood states, animations.

   DOM hooks (all set by Lane B / index.html):
     #garden-scene           - main visual container
     .rdn-character          - inlined rododendron.svg (attribute: data-mood)
     #water-button           - primary watering CTA
     #goal-ring              - SVG progress ring (attribute: data-fraction 0-1)
     #countdown-ring         - SVG countdown ring (attribute: data-seconds)
     #weather-widget         - temp + condition readout
     #onboarding             - full-screen first-run overlay
     #help-button            - quiet help / info trigger
     body.is-watering        - added during an active watering session
                               (can also be #garden-scene.is-watering)

   Accessibility commitments:
     - body font-size: 1.125rem (18px). html element: NO font-size override.
     - All sizes in rem so iOS Dynamic Type scaling works correctly.
     - Color contrast >= 4.5:1 for all interactive text; >= 7:1 for body text.
     - No color-only state signalling.
     - #water-button min-height 6rem (96px), full-width-ish.
     - env(safe-area-inset-*) padding on root layout.
     - @media (prefers-reduced-motion: reduce) kills / softens all animation.
   ============================================================= */

/* =============================================
   CUSTOM PROPERTIES
   ============================================= */
:root {
  /* -- Brand / primary colours -- */
  --clr-primary:        #2f6b3a;  /* manifest theme_color; 6.5:1 vs white */
  --clr-primary-dark:   #1e5228;  /* button hover/pressed; 9.4:1 vs white */
  --clr-primary-light:  #d4ead8;  /* ring track, muted surfaces */
  --clr-primary-text:   #ffffff;  /* text on primary button */

  /* -- Backgrounds / surfaces -- */
  --clr-bg:             #f3f7f0;  /* matches manifest background_color */
  --clr-surface:        #ffffff;
  --clr-surface-warm:   #faf8f4;  /* cards / widgets */
  --clr-overlay:        rgba(20, 30, 18, 0.72);  /* onboarding backdrop */

  /* -- Text -- */
  --clr-text:           #1a1f14;  /* 14.5:1 vs --clr-bg. Primary copy. */
  --clr-text-2:         #3a4030;  /* 7.2:1 vs --clr-bg. Labels. */
  --clr-text-3:         #5a6050;  /* 4.6:1 vs --clr-bg. Secondary. */
  --clr-text-on-dark:   #ffffff;

  /* -- Plant & bloom palette (for SVG tinting fallbacks and rings) -- */
  --clr-leaf-dark:      #1e4010;
  --clr-leaf-mid:       #2d5016;
  --clr-leaf-light:     #4a7828;
  --clr-bloom:          #c86b8a;
  --clr-bloom-deep:     #9e3860;

  /* -- Weather widget -- */
  --clr-weather-bg:     rgba(255, 255, 255, 0.88);
  --clr-weather-border: rgba(47, 107, 58, 0.18);

  /* -- Water animation -- */
  --clr-water:          #6ab4d8;
  --clr-water-light:    rgba(106, 180, 216, 0.28);

  /* -- Semantic status (never colour alone - always accompanied by text/icon) -- */
  --clr-status-blooming:      #2f6b3a;
  --clr-status-content:       #2f6b3a;
  --clr-status-getting:       #7a6010;
  --clr-status-thirsty:       #8a4010;
  --clr-status-very-thirsty:  #7a2820;

  /* -- Ring geometry -- */
  --ring-size:          5.5rem;    /* goal ring outer diameter */
  --ring-stroke:        0.5rem;    /* ring stroke width */
  --ring-r:             38;        /* SVG circle radius (inside 100x100 viewBox) */
  --ring-circum:        238.76;    /* 2*pi*38 ≈ 238.76 */

  /* -- Spacing scale (portrait mobile-first) -- */
  --sp-xs:    0.25rem;
  --sp-sm:    0.5rem;
  --sp-md:    1rem;
  --sp-lg:    1.5rem;
  --sp-xl:    2rem;
  --sp-2xl:   3rem;

  /* -- Radius -- */
  --rad-sm:   0.5rem;
  --rad-md:   1rem;
  --rad-lg:   1.5rem;
  --rad-full: 9999px;

  /* -- Transitions (base set; animations section may override) -- */
  --tr-fast:  150ms ease;
  --tr-base:  260ms ease;
  --tr-slow:  600ms ease;

  /* -- Font stack -- */
  --font-ui:  -apple-system, system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* -- Touch target minimum per WCAG 2.5.8 -- */
  --touch-min: 44px;
}

/* =============================================
   RESET & BASE
   ============================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* DO NOT touch html { font-size } - it would break iOS Dynamic Type.
   body sets the rem anchor instead. */
body {
  font-family: var(--font-ui);
  font-size: 1.125rem;           /* 18px at default scale */
  line-height: 1.55;
  color: var(--clr-text);
  background-color: var(--clr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Safe-area padding for notch / home indicator */
  padding-top:    env(safe-area-inset-top,    0px);
  padding-right:  env(safe-area-inset-right,  0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left:   env(safe-area-inset-left,   0px);
  /* Portrait, no horizontal scroll */
  overflow-x: hidden;
  min-height: 100svh;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

/* =============================================
   LAYOUT  (#app root assumed by Lane B)
   ============================================= */
#app,
main {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  /* Horizontally constrain on large viewports (tablet in portrait) */
  max-width: 480px;
  margin-inline: auto;
  padding-inline: var(--sp-md);
  padding-bottom: calc(var(--sp-xl) + env(safe-area-inset-bottom, 0px));
}

/* =============================================
   GARDEN SCENE
   ============================================= */
#garden-scene {
  position: relative;
  width: 100%;
  /* 5:3 aspect ratio - enough vertical room for the plant */
  aspect-ratio: 5 / 3;
  border-radius: var(--rad-md);
  overflow: hidden;
  background-color: #c8dce8; /* fallback if SVG loads slowly */
  /* garden.svg as the scene background */
  background-image: url('assets/garden.svg');
  background-size: cover;
  background-position: center bottom;
  margin-bottom: var(--sp-lg);
}

/* The garden scene "screen" for watering overlay - uses ::after */
#garden-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--tr-base);
}

/* =============================================
   RODODENDRON CHARACTER
   .rdn-character wraps the inlined SVG.
   data-mood: "blooming" | "content" | "getting_thirsty" | "thirsty" | "very_thirsty"
   ============================================= */

/* Character positioned in lower-centre of the garden scene */
.rdn-character {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;           /* scales with the scene */
  max-width: 200px;
  /* Idle gentle sway animation on the whole character */
  animation: rdn-sway 6s ease-in-out infinite;
  transform-origin: bottom center;
}

/* The inlined SVG itself fills the wrapper */
.rdn-character svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --- All bloom groups hidden by default (CSS overrides per mood) --- */
.rdn-character .rdn-bloom {
  opacity: 0;
  transition: opacity var(--tr-slow);
}

/* --- Outer leaves: base transition for all droop animations --- */
.rdn-character .rdn-leaves-outer {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform var(--tr-slow), filter var(--tr-slow);
}

/* --- Thirsty: leaves also desaturate slightly --- */
.rdn-character .rdn-body,
.rdn-character .rdn-leaves-mid,
.rdn-character .rdn-leaves-top {
  transition: filter var(--tr-slow);
}

/* --- Mid leaves: subtle transition --- */
.rdn-character .rdn-leaves-mid {
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform var(--tr-slow), filter var(--tr-slow);
}

/* ===================
   MOOD: blooming
   All 3 blooms, leaves upright, vivid green
   =================== */
.rdn-character[data-mood="blooming"] .rdn-bloom {
  opacity: 1;
}
.rdn-character[data-mood="blooming"] .rdn-bloom-3 {
  opacity: 1;
}
.rdn-character[data-mood="blooming"] .rdn-leaves-outer-left {
  transform: rotate(-6deg) translateY(-2px);
}
.rdn-character[data-mood="blooming"] .rdn-leaves-outer-right {
  transform: rotate(6deg) translateY(-2px);
}
.rdn-character[data-mood="blooming"] .rdn-leaves-outer-bl {
  transform: translateY(-3px);
}
.rdn-character[data-mood="blooming"] .rdn-leaves-outer-br {
  transform: translateY(-3px);
}
/* Bloom-specific shimmer (extra shimmer for blooming only) */
.rdn-character[data-mood="blooming"] .rdn-bloom-1,
.rdn-character[data-mood="blooming"] .rdn-bloom-2 {
  animation: bloom-pulse 4s ease-in-out infinite;
}
.rdn-character[data-mood="blooming"] .rdn-bloom-3 {
  animation: bloom-pulse 7s ease-in-out infinite 0.5s;
}

/* ===================
   MOOD: content
   Blooms 1 + 2, normal leaf stance
   =================== */
.rdn-character[data-mood="content"] .rdn-bloom-1,
.rdn-character[data-mood="content"] .rdn-bloom-2 {
  opacity: 1;
}
.rdn-character[data-mood="content"] .rdn-bloom-3 {
  opacity: 0;
}
/* Leaves: natural upright position (no transform applied) */

/* ===================
   MOOD: getting_thirsty
   Bloom 1 fading, outer leaves beginning to droop
   =================== */
.rdn-character[data-mood="getting_thirsty"] .rdn-bloom-1 {
  opacity: 0.65;
}
.rdn-character[data-mood="getting_thirsty"] .rdn-bloom-2 {
  opacity: 0.30;
}
.rdn-character[data-mood="getting_thirsty"] .rdn-bloom-3 {
  opacity: 0;
}
.rdn-character[data-mood="getting_thirsty"] .rdn-leaves-outer-left {
  transform: rotate(-12deg);
}
.rdn-character[data-mood="getting_thirsty"] .rdn-leaves-outer-right {
  transform: rotate(12deg);
}
.rdn-character[data-mood="getting_thirsty"] .rdn-leaves-outer-bl {
  transform: rotate(-8deg);
}
.rdn-character[data-mood="getting_thirsty"] .rdn-leaves-outer-br {
  transform: rotate(8deg);
}

/* ===================
   MOOD: thirsty
   No blooms, clear droop - leaves curl inward (scaleX 0.82)
   =================== */
.rdn-character[data-mood="thirsty"] .rdn-bloom {
  opacity: 0;
}
.rdn-character[data-mood="thirsty"] .rdn-leaves-outer-left {
  transform: rotate(-25deg) scaleX(0.85);
}
.rdn-character[data-mood="thirsty"] .rdn-leaves-outer-right {
  transform: rotate(25deg) scaleX(0.85);
}
.rdn-character[data-mood="thirsty"] .rdn-leaves-outer-bl {
  transform: rotate(-18deg) scaleX(0.85);
}
.rdn-character[data-mood="thirsty"] .rdn-leaves-outer-br {
  transform: rotate(18deg) scaleX(0.85);
}
.rdn-character[data-mood="thirsty"] .rdn-leaves-mid {
  transform: rotate(0deg) scaleX(0.92);
}
.rdn-character[data-mood="thirsty"] .rdn-body,
.rdn-character[data-mood="thirsty"] .rdn-leaves-mid {
  filter: saturate(0.72) brightness(0.95);
}

/* ===================
   MOOD: very_thirsty
   Strong droop, significant curl, grey-green, sad-but-hopeful
   (the plant is stressed, NOT dying - it will recover)
   =================== */
.rdn-character[data-mood="very_thirsty"] .rdn-bloom {
  opacity: 0;
}
.rdn-character[data-mood="very_thirsty"] .rdn-leaves-outer-left {
  transform: rotate(-40deg) scaleX(0.70);
}
.rdn-character[data-mood="very_thirsty"] .rdn-leaves-outer-right {
  transform: rotate(40deg) scaleX(0.70);
}
.rdn-character[data-mood="very_thirsty"] .rdn-leaves-outer-bl {
  transform: rotate(-30deg) scaleX(0.75);
}
.rdn-character[data-mood="very_thirsty"] .rdn-leaves-outer-br {
  transform: rotate(30deg) scaleX(0.75);
}
.rdn-character[data-mood="very_thirsty"] .rdn-leaves-mid {
  transform: rotate(0deg) scaleX(0.85);
  filter: saturate(0.40) brightness(0.90);
}
.rdn-character[data-mood="very_thirsty"] .rdn-body {
  filter: saturate(0.45) brightness(0.92);
}
.rdn-character[data-mood="very_thirsty"] .rdn-leaves-top {
  filter: saturate(0.60) brightness(0.94);
}
/* Slow sad sway override (slower, shallower than default) */
.rdn-character[data-mood="very_thirsty"] {
  animation-duration: 9s;
  animation-timing-function: ease-in-out;
}

/* =============================================
   WATERING STATE  (body.is-watering or
                    #garden-scene.is-watering)
   ============================================= */

/* Falling water streaks over the scene */
body.is-watering #garden-scene::after,
#garden-scene.is-watering::after {
  opacity: 1;
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 10px,
      var(--clr-water-light) 10px,
      var(--clr-water-light) 12px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 18px,
      rgba(106, 180, 216, 0.14) 18px,
      rgba(106, 180, 216, 0.14) 20px
    );
  animation: rain-fall 1.2s linear infinite;
}

/* During watering, the character sways more happily */
body.is-watering .rdn-character,
#garden-scene.is-watering .rdn-character {
  animation-name: rdn-sway-happy;
  animation-duration: 3s;
}

/* =============================================
   WATER BUTTON  (#water-button)
   Very large, obvious, reachable thumb target.
   ============================================= */
#water-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);

  width: 100%;
  min-height: 6rem;             /* 96px anchor; scales with rem */
  padding: var(--sp-md) var(--sp-lg);
  margin-top: var(--sp-md);
  margin-bottom: var(--sp-lg);

  background-color: var(--clr-primary);
  color: var(--clr-primary-text);
  border-radius: var(--rad-lg);

  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  white-space: normal;          /* allow wrap if Dynamic Type is very large */

  /* Ensure minimum touch target even if content is small */
  min-width: var(--touch-min);

  transition:
    background-color var(--tr-fast),
    transform var(--tr-fast),
    box-shadow var(--tr-fast);

  box-shadow:
    0 4px 12px rgba(30, 82, 40, 0.30),
    0 1px 3px  rgba(30, 82, 40, 0.20);

  /* Prevent text selection on tap */
  user-select: none;
  -webkit-user-select: none;
}

#water-button:hover {
  background-color: var(--clr-primary-dark);
  box-shadow:
    0 6px 18px rgba(30, 82, 40, 0.38),
    0 2px 4px  rgba(30, 82, 40, 0.22);
}

#water-button:active,
#water-button:focus-visible {
  background-color: var(--clr-primary-dark);
  transform: scale(0.975);
  box-shadow:
    0 2px 6px rgba(30, 82, 40, 0.28),
    0 1px 2px rgba(30, 82, 40, 0.18);
}

#water-button:focus-visible {
  outline: 3px solid var(--clr-bloom);
  outline-offset: 4px;
}

/* Disabled / during-watering state (Lane B adds [disabled] attribute) */
#water-button:disabled,
#water-button[aria-disabled="true"] {
  background-color: var(--clr-primary);
  opacity: 0.52;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 6px rgba(30, 82, 40, 0.18);
}

/* Button icon (if Lane B adds a <span class="btn-icon"> or SVG) */
#water-button .btn-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* =============================================
   GOAL RING  (#goal-ring  data-fraction="0..1")

   RING APPROACH: Pure CSS conic-gradient, no SVG markup needed.

   app.js sets data-fraction="0.75" on the element.
   Lane C reads that via a CSS custom property bridge.

   IMPORTANT for app.js integration:
     After setting data-fraction, also call:
       goalRing.style.setProperty('--frac', fraction.toFixed(3));
     This one line connects the data attribute to the CSS ring animation.
     Without it, the ring renders but stays at --frac default (0 = empty).

   The modern attr() approach below provides progressive enhancement in
   browsers that support CSS Values Level 5 attr() with type annotation.
   ============================================= */

/* @property makes --frac animatable and ensures type safety */
@property --frac {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}
@property --frac-cd {
  syntax: '<number>';
  initial-value: 0;
  inherits: true;
}

#goal-ring,
#countdown-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm);
}

/* The ring itself: a pseudo-element drawn as conic-gradient + mask */
#goal-ring::before {
  content: '';
  display: block;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  /* Progressive: CSS Values Level 5 attr() with type (not yet widely shipped) */
  /* Fallback: app.js must set --frac via style.setProperty('--frac', value) */
  background: conic-gradient(
    from -90deg,
    var(--clr-primary) calc(var(--frac, 0) * 360deg),
    var(--clr-primary-light) 0
  );
  /* Punch centre hole to form a ring (55% inner radius) */
  -webkit-mask: radial-gradient(farthest-side, transparent 54%, #000 55%);
  mask: radial-gradient(farthest-side, transparent 54%, #000 55%);
  transition: --frac 0.8s ease;
}

/* Countdown ring: water-blue fill, drains from full to empty */
#countdown-ring::before {
  content: '';
  display: block;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--clr-water)        calc(var(--frac-cd, 0) * 360deg),
    rgba(106, 180, 216, 0.22) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent 54%, #000 55%);
  mask: radial-gradient(farthest-side, transparent 54%, #000 55%);
  transition: --frac-cd 1s linear;
}

/* Ring labels */
#goal-ring .ring-label,
#countdown-ring .ring-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--clr-text-2);
  text-align: center;
  line-height: 1.3;
}

/* Ring container row (Lane B may place both rings side by side) */
.rings-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: var(--sp-lg);
  padding: var(--sp-md) 0;
}

/* The [hidden] attribute must always win, even over class display rules like
   #countdown-ring/.btn-stop { display: flex }. Without this, elements app.js
   hides via the hidden attribute (stop button, countdown ring, notices) stay
   visible in the idle view. */
[hidden] { display: none !important; }

/* =============================================
   STATUS PANEL TEXT CLASSES
   (actual class names Lane B uses in index.html)
   ============================================= */

/* Greeting line: "Dzień dobry, Aniu!" */
.text-greeting {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: var(--sp-xs);
  line-height: 1.4;
}

/* Plant mood speech line */
.text-status {
  font-size: 1rem;
  color: var(--clr-text-2);
  line-height: 1.55;
  margin-bottom: var(--sp-sm);
  min-height: 1.55rem;
}

/* Rain notice (shown when HA reports rain) */
.text-rain {
  font-size: 0.9rem;
  color: var(--clr-water);
  font-weight: 500;
  padding: var(--sp-xs) var(--sp-sm);
  border-left: 3px solid var(--clr-water);
  background: rgba(106, 180, 216, 0.08);
  border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
  margin-bottom: var(--sp-sm);
}

/* Warning / leak notice */
.text-warning {
  font-size: 0.9rem;
  color: var(--clr-bloom-deep);
  font-weight: 500;
  padding: var(--sp-xs) var(--sp-sm);
  border-left: 3px solid var(--clr-bloom-deep);
  background: rgba(158, 56, 96, 0.07);
  border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
  margin-bottom: var(--sp-sm);
}

/* Live litre counter during watering */
.text-session-litres {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-primary-dark);
  text-align: center;
  min-height: 1.5rem;
  padding-block: var(--sp-xs);
}

/* Water shortage warning during active session */
.text-shortage {
  font-size: 0.95rem;
  font-weight: 600;
  color: #7a3010;
  text-align: center;
  padding: var(--sp-sm) var(--sp-md);
  background: rgba(122, 48, 16, 0.07);
  border-radius: var(--rad-sm);
  border: 1px solid rgba(122, 48, 16, 0.18);
}

/* Battery low indicator (footer) */
.battery-indicator {
  display: block;
  font-size: 0.85rem;
  color: var(--clr-text-3);
  text-align: center;
  padding-block: var(--sp-xs);
}

/* =============================================
   BUTTON SHARED BASE CLASSES
   Lane B uses .btn-primary.btn-large on #water-button and
   .btn-primary.btn-large on #onboarding-ok.
   .btn-secondary.btn-stop on #stop-button.
   .btn-help on #help-button.
   ============================================= */

/* Shared base for btn-primary elements (applied alongside ID-specific rules) */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-primary);
  color: var(--clr-primary-text);
  border-radius: var(--rad-md);
  font-weight: 700;
  line-height: 1.3;
  transition:
    background-color var(--tr-fast),
    transform var(--tr-fast),
    box-shadow var(--tr-fast);
  box-shadow:
    0 4px 12px rgba(30, 82, 40, 0.28),
    0 1px 3px  rgba(30, 82, 40, 0.18);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover  { background-color: var(--clr-primary-dark); }
.btn-primary:active { transform: scale(0.975); background-color: var(--clr-primary-dark); }
.btn-primary:focus-visible {
  outline: 3px solid var(--clr-bloom);
  outline-offset: 4px;
}

/* Large modifier: generous vertical padding */
.btn-large {
  min-height: 3.5rem;
  padding: var(--sp-md) var(--sp-lg);
  font-size: 1.125rem;
  width: 100%;
}

/* Secondary button: Stop watering */
.btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--clr-surface-warm);
  color: var(--clr-text-2);
  border: 1.5px solid rgba(47, 107, 58, 0.22);
  border-radius: var(--rad-md);
  font-size: 1rem;
  font-weight: 600;
  transition: background-color var(--tr-fast), transform var(--tr-fast);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  margin-top: var(--sp-sm);
}

.btn-secondary:hover  { background-color: var(--clr-primary-light); }
.btn-secondary:active { transform: scale(0.975); }
.btn-secondary:focus-visible {
  outline: 3px solid var(--clr-bloom);
  outline-offset: 3px;
}

/* Stop button specific: text in a warm amber to signal "stop" */
.btn-stop {
  color: #5a3010;
  border-color: rgba(90, 48, 16, 0.22);
}
.btn-stop:hover {
  background-color: rgba(90, 48, 16, 0.06);
}

/* =============================================
   ONBOARDING - actual class names from index.html
   ============================================= */

/* Inner card container inside the backdrop */
.onboarding-inner {
  background: var(--clr-surface);
  border-radius: var(--rad-lg);
  padding: var(--sp-xl);
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.28),
    0 4px  12px rgba(0, 0, 0, 0.14);
}

.onboarding-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: var(--sp-sm);
}

.onboarding-story {
  font-size: 1rem;
  color: var(--clr-text-2);
  margin-bottom: var(--sp-lg);
  line-height: 1.65;
}

/* #onboarding-ok reuses .btn-primary.btn-large - no extra CSS needed */

/* =============================================
   MOOD BADGE / STATUS LINE (optional wrapper)
   If Lane B wraps status in a .mood-status container.
   ============================================= */
.mood-status {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md);
  border-radius: var(--rad-full);
  font-size: 1rem;
  font-weight: 500;
  color: var(--clr-text-2);
  background: var(--clr-surface-warm);
  border: 1.5px solid rgba(47, 107, 58, 0.14);
  margin-bottom: var(--sp-md);
}

.mood-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: var(--rad-full);
  flex-shrink: 0;
}

[data-mood="blooming"]        .mood-dot { background: var(--clr-bloom); }
[data-mood="content"]         .mood-dot { background: var(--clr-primary); }
[data-mood="getting_thirsty"] .mood-dot { background: #9a8018; }
[data-mood="thirsty"]         .mood-dot { background: #b85020; }
[data-mood="very_thirsty"]    .mood-dot { background: var(--clr-bloom-deep); }

/* =============================================
   WEATHER WIDGET  (#weather-widget)
   Small, positioned top-right of the scene.
   ============================================= */
#weather-widget {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  background: var(--clr-weather-bg);
  border: 1px solid var(--clr-weather-border);
  border-radius: var(--rad-md);
  padding: var(--sp-xs) var(--sp-sm);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  align-items: center;
  gap: 0 var(--sp-xs);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clr-text-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 8rem;
  line-height: 1.25;
  /* Prevent touch events from bubbling oddly */
  pointer-events: none;
}

/* Animated Meteocons weather icon - takes its own row above the readout. */
#weather-widget .weather-icon {
  width: 44px;
  height: 44px;
  display: block;
  flex: 0 0 100%;
  margin: 0 auto -2px;
}

/* Lane B uses .weather-temp, .weather-cond, .weather-rain (exact class names) */
#weather-widget .weather-temp {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text);
}

#weather-widget .weather-cond {
  font-size: 0.78rem;
  color: var(--clr-text-3);
  line-height: 1.2;
}

#weather-widget .weather-rain {
  font-size: 0.78rem;
  color: var(--clr-water);
  font-weight: 500;
}

/* Legacy alias in case Lane B uses .weather-condition */
#weather-widget .weather-condition {
  font-size: 0.78rem;
  color: var(--clr-text-3);
}

/* Rain-forecast tint: subtle blue glow around widget */
#weather-widget[data-rain="true"] {
  background: rgba(180, 218, 240, 0.88);
  border-color: rgba(106, 180, 216, 0.45);
}

/* =============================================
   ONBOARDING OVERLAY  (#onboarding)
   Lane B sets hidden attribute by default; removes it to show.
   When NOT hidden: full-screen backdrop with centred card.
   ============================================= */
#onboarding:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--clr-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl) var(--sp-lg);
  padding-bottom: calc(var(--sp-xl) + env(safe-area-inset-bottom, 0px));
  /* Fade in gently */
  animation: fade-in 0.4s ease;
}

/* (onboarding inner card and title styles are in STATUS PANEL section above) */

/* =============================================
   HELP BUTTON  (#help-button)
   Quiet "?" in a corner. Large enough touch target.
   ============================================= */
#help-button {
  position: fixed;
  bottom: calc(var(--sp-lg) + env(safe-area-inset-bottom, 0px));
  right: calc(var(--sp-md) + env(safe-area-inset-right, 0px));
  z-index: 50;

  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--rad-full);

  background: var(--clr-surface-warm);
  border: 1.5px solid rgba(47, 107, 58, 0.22);
  color: var(--clr-text-3);

  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition:
    background-color var(--tr-fast),
    color var(--tr-fast),
    box-shadow var(--tr-fast);
}

#help-button:hover {
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
  box-shadow: 0 4px 12px rgba(47, 107, 58, 0.22);
}

#help-button:active {
  transform: scale(0.92);
}

#help-button:focus-visible {
  outline: 3px solid var(--clr-bloom);
  outline-offset: 3px;
}

/* (all text classes defined in STATUS PANEL section) */

/* =============================================
   IDLE ANIMATIONS
   Non-synced durations make the plant feel alive.
   All animations are decorative - they NEVER block taps.
   ============================================= */

/* Gentle side-to-side sway of the whole plant (6s) */
@keyframes rdn-sway {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25%       { transform: translateX(-50%) rotate(1.2deg); }
  75%       { transform: translateX(-50%) rotate(-1.0deg); }
}

/* Happy sway during watering (3s, broader angle) */
@keyframes rdn-sway-happy {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25%       { transform: translateX(-50%) rotate(3.5deg); }
  75%       { transform: translateX(-50%) rotate(-3.0deg); }
}

/* Bloom pulse: very gentle brightness throb (4s) */
@keyframes bloom-pulse {
  0%, 100% { filter: brightness(1)   saturate(1); }
  50%       { filter: brightness(1.1) saturate(1.12); }
}

/* Leaf shimmer: subtle opacity flicker on top leaves (11s non-synced) */
@keyframes leaf-shimmer {
  0%, 100% { opacity: 1; }
  45%       { opacity: 0.88; }
  50%       { opacity: 0.94; }
  80%       { opacity: 0.90; }
}

.rdn-character .rdn-leaves-top {
  animation: leaf-shimmer 11s ease-in-out infinite 1.3s;
}

.rdn-character .rdn-leaves-mid-left {
  animation: leaf-shimmer 7s ease-in-out infinite 0.8s;
}

.rdn-character .rdn-leaves-mid-right {
  animation: leaf-shimmer 9s ease-in-out infinite 2.1s;
}

/* Falling water streaks for watering */
@keyframes rain-fall {
  from { background-position: 0 0,   0 0; }
  to   { background-position: 0 30px, 0 40px; }
}

/* Onboarding fade-in */
@keyframes fade-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* =============================================
   PREFERS-REDUCED-MOTION
   Kill or greatly soften all animations.
   The app is fully usable with zero motion.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  /* Remove all CSS animations */
  .rdn-character,
  .rdn-character[data-mood="blooming"] .rdn-bloom-1,
  .rdn-character[data-mood="blooming"] .rdn-bloom-2,
  .rdn-character[data-mood="blooming"] .rdn-bloom-3,
  .rdn-character[data-mood="very_thirsty"],
  .rdn-character .rdn-leaves-top,
  .rdn-character .rdn-leaves-mid-left,
  .rdn-character .rdn-leaves-mid-right,
  #onboarding {
    animation: none;
  }

  /* Remove the moving water streaks; show a static tint instead */
  body.is-watering #garden-scene::after,
  #garden-scene.is-watering::after {
    animation: none;
    background-image: none;
    background-color: var(--clr-water-light);
    opacity: 1;
  }

  /* Instant transitions instead of animated */
  .rdn-character .rdn-leaves-outer,
  .rdn-character .rdn-leaves-mid,
  .rdn-character .rdn-body,
  .rdn-character .rdn-leaves-top,
  .rdn-character .rdn-bloom,
  #goal-ring .ring-fill,
  #countdown-ring .ring-fill {
    transition: none;
  }

  /* Button press: no scale transform */
  #water-button:active {
    transform: none;
    background-color: var(--clr-primary-dark);
  }
}

/* =============================================
   LARGE TEXT / FONT SCALE RESILIENCE
   iOS Dynamic Type may scale rem base up to ~1.4x.
   These rules ensure layout stays intact.
   ============================================= */

/* If text is very large, allow the button to grow naturally */
@media (min-height: 700px) {
  #water-button {
    padding-block: var(--sp-lg);
  }
}

/* Ensure rings don't overflow at very large text sizes */
.rings-row {
  flex-wrap: wrap;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.card {
  background: var(--clr-surface-warm);
  border-radius: var(--rad-md);
  padding: var(--sp-md);
  border: 1px solid rgba(47, 107, 58, 0.10);
}

/* A gentle divider between UI sections */
.divider {
  height: 1px;
  background: rgba(47, 107, 58, 0.12);
  margin-block: var(--sp-md);
  border: none;
}