/* Global reusable pc- blocks (css.md: opt-in BEM, flat selectors,
   Bootstrap customized via --bs-* vars inside the block). */

/* pc-shell — the mobile-first app chrome. Safe-area aware: the web shell
   IS the app chrome inside the Hotwire Native wrapper. */

.pc-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.pc-shell__header {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: var(--lore-space-3);
  min-height: 3.5rem;
  padding-top: calc(var(--lore-space-2) + env(safe-area-inset-top));
  padding-bottom: var(--lore-space-2);
  padding-left: max(var(--lore-space-4), env(safe-area-inset-left));
  padding-right: max(var(--lore-space-4), env(safe-area-inset-right));
  background: color-mix(in oklab, var(--lore-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--lore-border);
}

/* The wordmark: no logo exists by design — "Lore" set in Literata 600 */
.pc-shell__brand {
  font-family: var(--lore-font-display);
  font-size: 1.25rem;
  font-weight: var(--lore-weight-semibold);
  letter-spacing: var(--lore-tracking-tight);
  color: var(--lore-ink);
  text-decoration: none;
}

.pc-shell__brand:hover {
  color: var(--lore-ink);
}

.pc-shell__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--lore-space-2);
}

.pc-shell__main {
  flex: 1;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding-top: var(--lore-space-5);
  padding-bottom: calc(var(--lore-space-7) + env(safe-area-inset-bottom));
  padding-left: max(var(--lore-space-4), env(safe-area-inset-left));
  padding-right: max(var(--lore-space-4), env(safe-area-inset-right));

  @media (min-width: 768px) {
    padding-top: var(--lore-space-6);
  }
}

/* Wider surfaces (the garden grid) opt in via content_for :main_modifier */
.pc-shell__main--wide {
  max-width: 64rem;
}

/* pc-theme-toggle — the header's light/dark switch. Shows the mode you'd
   switch TO: moon in light mode, sun in dark. Theme-conditional display has
   no Bootstrap utility, hence the attribute-scoped rules. */

.pc-theme-toggle__sun {
  display: none;
}

[data-bs-theme="dark"] .pc-theme-toggle__sun {
  display: inline;
}

[data-bs-theme="dark"] .pc-theme-toggle__moon {
  display: none;
}

/* pc-flash — quiet pills fixed under the header.
   Variants: --notice (success) · --alert (danger). */

.pc-flash-stack {
  position: fixed;
  inset-inline: 0;
  top: calc(3.5rem + env(safe-area-inset-top) + var(--lore-space-2));
  z-index: 1080;
  display: grid;
  justify-items: center;
  gap: var(--lore-space-2);
  padding-inline: var(--lore-space-4);
  pointer-events: none;
}

.pc-flash {
  --pc-flash-accent: var(--lore-ink-soft);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: min(92vw, 26rem);
  padding: 0.625rem 1rem;
  font-size: var(--lore-text-small);
  color: var(--lore-ink);
  background: var(--lore-surface-raised);
  border: 1px solid var(--lore-border);
  border-radius: var(--lore-radius-pill);
  box-shadow: var(--lore-shadow);
  animation: pc-flash-in var(--lore-dur-grow) var(--lore-ease-celebrate);
}

.pc-flash__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--pc-flash-accent);
}

.pc-flash--notice {
  --pc-flash-accent: var(--bs-success);
}

.pc-flash--alert {
  --pc-flash-accent: var(--bs-danger);
}

@keyframes pc-flash-in {
  from {
    opacity: 0;
    translate: 0 -10px;
  }
}

/* pc-plant-card — the garden's unit. Stage modifiers (--stage-0…4) only
   re-point the three custom props + aura size: that is the seam a future
   non-garden theme swaps against. */

.pc-plant-card {
  --pc-stage: var(--lore-stage-0);
  --pc-stage-soft: var(--lore-stage-0-soft);
  --pc-stage-deep: var(--lore-stage-0-deep);
  --pc-aura-size: 32%;
  --bs-card-bg: var(--lore-surface-raised);
  --bs-card-border-color: var(--lore-border);
  --bs-card-border-radius: var(--lore-radius-lg);
  overflow: hidden;
  box-shadow: var(--lore-shadow-sm);
  transition: transform var(--lore-dur-ui) var(--lore-ease),
              box-shadow var(--lore-dur-ui) var(--lore-ease);
}

/* Whole card is usually a link */
a.pc-plant-card {
  color: inherit;
  text-decoration: none;
}

a.pc-plant-card:hover,
a.pc-plant-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--lore-shadow-lg);
}

.pc-plant-card--stage-0 { --pc-stage: var(--lore-stage-0); --pc-stage-soft: var(--lore-stage-0-soft); --pc-stage-deep: var(--lore-stage-0-deep); --pc-aura-size: 32%; }
.pc-plant-card--stage-1 { --pc-stage: var(--lore-stage-1); --pc-stage-soft: var(--lore-stage-1-soft); --pc-stage-deep: var(--lore-stage-1-deep); --pc-aura-size: 37%; }
.pc-plant-card--stage-2 { --pc-stage: var(--lore-stage-2); --pc-stage-soft: var(--lore-stage-2-soft); --pc-stage-deep: var(--lore-stage-2-deep); --pc-aura-size: 42%; }
.pc-plant-card--stage-3 { --pc-stage: var(--lore-stage-3); --pc-stage-soft: var(--lore-stage-3-soft); --pc-stage-deep: var(--lore-stage-3-deep); --pc-aura-size: 47%; }
.pc-plant-card--stage-4 { --pc-stage: var(--lore-stage-4); --pc-stage-soft: var(--lore-stage-4-soft); --pc-stage-deep: var(--lore-stage-4-deep); --pc-aura-size: 53%; }

/* Reserved slot for the future stage illustration. Until art exists, an
   abstract aura grows and deepens with the stage — bigger + richer = more
   alive, no drawing needed. */
.pc-plant-card__figure {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(
    180deg,
    var(--pc-stage-soft),
    color-mix(in oklab, var(--pc-stage-soft) 45%, var(--bs-card-bg))
  );
}

.pc-plant-card__aura {
  width: var(--pc-aura-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 38%,
    color-mix(in oklab, var(--pc-stage) 55%, var(--lore-surface-raised)),
    var(--pc-stage) 72%
  );
  box-shadow: 0 10px 26px -10px color-mix(in oklab, var(--pc-stage) 55%, transparent);
  transition: width var(--lore-dur-grow) var(--lore-ease-celebrate),
              background var(--lore-dur-grow) var(--lore-ease);
}

.pc-plant-card__body {
  display: grid;
  gap: 0.125rem;
  padding: var(--lore-space-3) var(--lore-space-4) var(--lore-space-4);
}

.pc-plant-card__name {
  font-family: var(--lore-font-display);
  font-size: 1.125rem;
  font-weight: var(--lore-weight-semibold);
  line-height: var(--lore-leading-tight);
  margin: 0;
}

.pc-plant-card__status {
  font-size: var(--lore-text-caption);
  color: var(--lore-ink-soft);
  margin: 0;
}

/* Text treatment only, never a visual demotion — a passed person's
   plant is as alive as any. */
.pc-plant-card__status--passed {
  font-family: var(--lore-font-display);
  font-style: italic;
}

/* Garden-glance: one derived "what moved" line, truncated so cards stay a
   uniform height. Guilt-free copy only — see GardenHelper#plant_glance. */
.pc-plant-card__glance {
  font-size: var(--lore-text-caption);
  color: var(--lore-ink-soft);
  margin: 0.125rem 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pc-plant-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lore-space-2);
  margin-top: var(--lore-space-2);
}

.pc-plant-card__stage-label {
  white-space: nowrap;
  font-size: var(--lore-text-caption);
  font-weight: var(--lore-weight-semibold);
  letter-spacing: 0.02em;
  color: var(--pc-stage-deep);
}

.pc-plant-card__stages {
  display: flex;
  gap: 0.3rem;
}

.pc-plant-card__stage-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--lore-border-strong);
}

.pc-plant-card__stage-dot--filled {
  background: var(--pc-stage);
}

/* pc-session-dots — guilt-free session progress ("2 of 3 today") for the
   tending wizard. Dots fill as you go; an unfinished session simply stays
   where it is — no decay state. */

.pc-session-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.pc-session-dots__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--lore-border-strong);
  transition: background var(--lore-dur-ui) var(--lore-ease),
              box-shadow var(--lore-dur-ui) var(--lore-ease);
}

.pc-session-dots__dot--done {
  background: var(--lore-brand);
}

.pc-session-dots__dot--current {
  background: var(--lore-green-300);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

@media (prefers-reduced-motion: reduce) {
  .pc-flash {
    animation: none;
  }

  .pc-plant-card,
  .pc-plant-card__aura,
  a.pc-plant-card:hover {
    transition: none;
    transform: none;
  }
}