/* These three views own their layout. The rest of the application is unchanged. */
main.content:has(> .home-garden), main.content:has(> .home-forest) {
  scrollbar-gutter: auto;
}
.garden-view.home-garden {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 0; overflow: hidden; background: #fffef8;
  container-type: inline-size;
}
.home-garden .garden-head {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch;
  align-items: stretch; width: 100%; min-width: 0; max-width: none;
  gap: 16px; padding: 14px var(--page-gutter, 16px) 12px;
  background: transparent; z-index: 2;
}
.home-garden .garden-head-main {
  display: block; width: 100%; max-width: none; margin: 0; padding: 0;
}
.home-garden .garden-head h1 { font-size: clamp(30px, 7.4vw, 46px); line-height: 1.13; letter-spacing: -.045em; }
.home-garden .garden-head-note { margin: 6px 0 0; font-size: clamp(14px, 3.6vw, 18px); line-height: 1.4; }
.home-garden .garden-metrics {
  display: grid; width: 100%; min-width: 0; max-width: none; margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; justify-self: stretch;
  border: 1px solid #dfe6dc; border-radius: 20px; background: #ffffffeb;
  box-shadow: 0 5px 20px #214c3210; overflow: hidden;
}
.home-garden .garden-metric {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start;
  gap: 8px; min-width: 0; min-height: 104px; padding: 12px 14px;
  border: 0; border-radius: 0; background: transparent; position: relative;
}
.home-garden .garden-metric+.garden-metric::before { top: 14%; bottom: 14%; background: #dce4dc; }
.home-garden .garden-metric-icon { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #e9f3e7; }
.home-garden .garden-metric-icon .ui-icon { width: 20px; height: 20px; }
.home-garden .garden-metric-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; width: 100%; min-width: 0; }
.home-garden .garden-metric-copy strong { font-size: clamp(17px, 4.6vw, 24px); line-height: 1.15; letter-spacing: -.025em; overflow-wrap: anywhere; }
.home-garden .seed-metric .garden-metric-copy strong { font-size: clamp(14px, 4.1vw, 24px); }
.home-garden .garden-metric-copy small { font-size: clamp(11px, 2.7vw, 14px); line-height: 1.4; }
.home-garden .garden-gift-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.home-garden .garden-gift-row>small { flex: none; font-size: 10px; white-space: nowrap; }
.home-garden .garden-mini-progress { flex: 1; width: auto; min-width: 20px; height: 7px; margin: 4px 0; background: #e4ece4; }
.home-garden .garden-mini-progress i { width: var(--progress); background: #14543d; }
.home-garden .garden-field { position: relative; min-width: 0; min-height: 0; isolation: isolate; overflow: hidden; }
/* Keep the distant landscape and original framing, without nearby foliage.
   Align the artwork's ground band with the subject strip and the roots. */
.home-garden .garden-background {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: #fffef8;
  background-image: url('/assets/scenes/garden-bg-mobile-distant.webp');
  background-repeat: no-repeat;
  --garden-art-ground: 29.3cqw;
  background-position: center calc(100% - var(--garden-ground-height, 84px) - 20px + var(--garden-art-ground));
  background-size: 100% auto;
  mask-image: none;
}
.home-garden .garden-columns {
  display: grid; grid-template-columns: repeat(var(--count), minmax(0, 1fr));
  justify-content: stretch; align-items: stretch; height: 100%; min-height: 0;
  min-width: 0; width: 100%; padding: 12px 0 0; gap: 0; background: none;
}
.home-garden .cane-column { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-width: 0; min-height: 0; }
.home-garden .cane-stage { position: relative; width: 100%; max-width: none; height: 100%; min-height: 0; }
.home-garden .cane-stage svg.garden { display: block; position: absolute; inset: 0; height: 100%; width: 100%; overflow: visible; filter: drop-shadow(2px 3px 2px rgba(9,72,46,.12)); }
.home-garden .cane-companion-svg { filter: drop-shadow(0 3px 6px #123e3424); pointer-events: none; }
.home-garden .subject {
  position: relative; z-index: 2; width: 100%; min-height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 4px; padding: 9px 2px 12px; border: 0; border-radius: 0;
  background: #fffef8f2; backdrop-filter: none;
}
.home-garden .subject-name { font-size: clamp(12px, 3.1vw, 17px); line-height: 1.2; }
.home-garden .cane-progress { font-size: clamp(10px, 2.6vw, 14px); line-height: 1.3; margin: 0; }
.home-garden .garden-sprout-link { position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%); width: clamp(58px, 13.8vw, 92px); display: block; line-height: 0; }
.home-garden .garden-seedling { display: block; width: 100%; height: auto; object-fit: contain; }
.home-garden .garden-choose-subjects { position: absolute; inset: auto 20px 24px; padding: 14px; border-radius: 14px; background: #fff; text-align: center; }

.forest-view.home-forest {
  position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(220px, 1fr) auto; width: 100%; height: 100%; min-height: 500px;
  overflow: visible; background: #f7faf1; padding: 0;
}
.home-forest .forest-background {
  position: absolute; inset: 0 0 55px; z-index: -1; pointer-events: none;
  background: #d9f4fc url('/assets/scenes/class-forest-empty-mobile.webp') center center / cover no-repeat;
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.home-forest .forest-head { position: relative; inset: auto; padding: 24px 16px 0; margin: 0; background: none; text-align: center; }
.home-forest .forest-head h1 { font-size: clamp(23px, 5.75vw, 40px); letter-spacing: -.04em; line-height: 1.15; }
.home-forest .forest-head p { color: #62766d; margin: 10px auto 0; max-width: 660px; font-size: clamp(15px, 3.7vw, 21px); line-height: 1.38; }
.home-forest .forest-progress-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px;
  width: calc(100% - 28px); max-width: 1000px; margin: 0 auto 12px;
  padding: 16px; min-width: 0; align-items: center; border: 1px solid #e7ede4;
  border-radius: 20px; background: #fffffff5; box-shadow: 0 8px 18px #244b3420;
}
.home-forest .forest-progress-icon { width: 46px; height: 46px; border-radius: 50%; padding: 10px; background: #e8f1e3; }
.home-forest .forest-progress-icon .ui-icon { width: 26px; height: 26px; }
.home-forest .forest-progress-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.home-forest .forest-progress-copy strong { font-size: clamp(18px, 4.6vw, 26px); line-height: 1.2; }
.home-forest .forest-progress-copy small { color: #64776d; font-size: clamp(12px, 3vw, 16px); line-height: 1.3; }
.home-forest .forest-progress-track { display: block; height: 14px; overflow: hidden; border-radius: 999px; background: #e6ede5; }
.home-forest .forest-progress-track i { display: block; height: 100%; width: var(--progress); background: #1b754e; border-radius: inherit; }

/* Splash: vector scene + editable text + indeterminate progress. */
.app-splash.reference-splash {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  display: grid; place-items: center; background: #fffef8;
  opacity: 1; transition: opacity .18s ease; isolation: isolate;
}
.reference-splash .splash-scene-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: #fffef8;
  background-image: url('/assets/scenes/splash-bg-mobile-v2.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.reference-splash .splash-content {
  position: relative; z-index: 1;
  width: min(700px, 88vw); display: grid; justify-items: center;
  text-align: center; transform: translateY(-1vh);
}
.reference-splash .splash-panda { width: clamp(280px, 48vw, 520px); height: auto; }
.reference-splash .splash-title {
  margin-top: 10px; font-size: clamp(3.2rem, 8.2vw, 6.25rem);
  line-height: .95; letter-spacing: -.055em; font-weight: 900; color: #073e35;
}
.reference-splash .splash-tagline {
  margin-top: 14px; font-size: clamp(1.15rem, 3vw, 2rem); color: #71838a;
}
.reference-splash .splash-live-track {
  display: block; width: min(500px,70vw); height: 18px; margin-top: 62px;
  overflow: hidden; border-radius: 999px; background: #e1e9db;
}
.reference-splash .splash-live-track i {
  display: block; width: 38%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg,#77b64b,#86c254 55%,#6aa944);
  transform: translateX(-120%);
  animation: scene-loading 1.35s cubic-bezier(.55,.06,.42,.94) infinite;
  will-change: transform;
}
.reference-splash .splash-message { margin-top: 16px; font-size: clamp(1.05rem,2.7vw,1.65rem); color:#71838a; }
@keyframes scene-loading {
  0% { transform: translateX(-120%); }
  52% { transform: translateX(170%); }
  100% { transform: translateX(290%); }
}
.app-splash.reference-splash.is-hidden { opacity:0; pointer-events:none; }
bambu-app:has(> .reference-splash:not(.is-hidden)) > .app { visibility:hidden; }
.reference-splash .splash-recovery { position:absolute; z-index:2; left:16px; right:16px; bottom:max(20px,env(safe-area-inset-bottom)); max-width:420px; margin:auto; padding:16px; border-radius:14px; background:#fffffff5; box-shadow:0 6px 24px #244b3426; text-align:center; }
.reference-splash .splash-recovery[hidden] { display:none; }
.splash-recovery p { margin:0 0 10px; }
.splash-recovery button { border:0; border-radius:10px; padding:11px 18px; background:#164e3d; color:white; font:inherit; }
.boot-noscript { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 30px; background: #fffef8; }
@media (max-width: 360px) {
  .home-garden .garden-metric { padding: 10px 8px; }
  .home-garden .garden-metric-copy strong { font-size: 16px; }
  .home-garden .garden-head { gap: 12px; padding-top: 10px; }
  .home-forest .forest-head h1 { font-size: 22px; }
}
@media (min-width: 761px) {
  .home-garden .garden-head { padding-top: 18px; }
  .home-garden .garden-metric { padding: 16px 22px; }
  .home-garden .garden-background { background-image:url('/assets/scenes/garden-bg-tablet-distant.webp'); --garden-art-ground:7.9cqw; }
  .home-forest .forest-background { background-image:url('/assets/scenes/class-forest-empty-tablet.webp'); }
  .home-forest .forest-background { background-position: center center; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-splash .splash-live-track i { animation:none; width:58%; transform:translateX(34%); }
  .app-splash.reference-splash { transition: none; }
}

/* Keep plant bases visually anchored to the subject strip. */
.home-garden .cane-stage { overflow: visible; }
.home-garden .is-empty-cane .cane-stage { overflow: visible; }

.home-garden .cane-stage,.home-garden .is-empty-cane .cane-stage { overflow: visible; }

@media (min-width: 700px) and (max-width: 1300px) {
  .reference-splash .splash-content { width:min(760px,86vw); transform:translateY(-1vh); }
  .reference-splash .splash-panda { width:clamp(330px,38vw,440px); }
  .reference-splash .splash-title { font-size:clamp(4.6rem,7.5vw,6.2rem); }
  .reference-splash .splash-tagline { font-size:clamp(1.5rem,2.5vw,2rem); }
  .reference-splash .splash-live-track { width:min(540px,62vw); margin-top:58px; }
}

/* Responsive raster artwork: show more side scenery as the viewport widens. */
@media (min-width: 700px) {
  .reference-splash .splash-scene-bg { background-image:url('/assets/scenes/splash-bg-tablet-v2.webp'); background-position:center center; background-size:100% 100%; }
}
@media (min-width: 1200px) {
  .reference-splash .splash-scene-bg { background-image:url('/assets/scenes/splash-bg-desktop-v2.webp'); background-position:center center; }
}

@media (min-width: 1200px) {
  .home-garden .garden-background { background-image:url('/assets/scenes/garden-bg-desktop-distant.webp'); --garden-art-ground:6.2cqw; }
  .home-forest .forest-background { background-image:url('/assets/scenes/class-forest-empty-desktop.webp'); }
}

/* Password visibility control */
.password-field{position:relative;display:block}
.password-field>input{width:100%;padding-right:3rem}
.password-toggle{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);width:2rem;height:2rem;padding:.3rem;border:0;background:transparent;color:#164e3d;display:grid;place-items:center;cursor:pointer}
.password-toggle svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.password-toggle.is-visible svg{opacity:.62}

/* Plants and their mounds scroll together; the title, metrics and subject links stay put. */
main.content:has(> .home-garden){overflow:hidden;overscroll-behavior:none}
.home-garden .garden-field{height:100%;min-height:0}
.home-garden .garden-panorama{position:relative;width:100%;height:100%;min-height:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}
/* Use the eight-subject garden's scale, even when fewer plants share the space. */
.home-garden .garden-cane-scene{--garden-cane-width:clamp(80px,12.5cqw,220px);display:grid;grid-template-rows:minmax(0,1fr) auto;width:100%;min-width:calc(var(--count) * var(--garden-cane-width));height:100%;min-height:0}
.home-garden .garden-cane-scroll{position:relative;min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#98b692 transparent;-webkit-overflow-scrolling:touch;scroll-padding-top:55px}
.home-garden .garden-cane-scroll:focus-visible{outline:2px solid #77a176;outline-offset:-3px}
.home-garden .garden-columns{height:var(--garden-cane-height,320px);min-height:100%;width:100%;padding:0;align-items:stretch}
.home-garden .cane-column{grid-template-rows:minmax(0,1fr);height:100%;min-height:0}
.home-garden .cane-stage{--garden-plant-width:clamp(58px,13.8vw,92px);width:var(--garden-cane-width);max-width:none;justify-self:center;overflow:visible}
.home-garden .cane-stage svg.garden{transform:translateY(calc(var(--garden-plant-width) * -.12))}
.home-garden .garden-ground{position:relative;z-index:2;padding-top:16px;background:linear-gradient(180deg,#f3f8e6b3,#f8fbed 24px);border-top:1px solid #bbd0a85c}
.home-garden .garden-subjects{display:grid;grid-template-columns:repeat(var(--count),minmax(0,1fr));width:100%;min-width:0;gap:0}
.home-garden .garden-subjects .subject{min-height:68px;padding:7px 3px 12px;background:transparent;border-radius:0;gap:5px}
.home-garden .garden-subjects .subject-name{font-size:clamp(12px,2vw,17px);overflow-wrap:normal;word-break:normal}
.home-garden .garden-subjects .cane-progress{font-size:clamp(10px,1.5vw,14px);line-height:1.4}
.home-garden .garden-scroll-tools{position:absolute;right:12px;top:10px;display:flex;gap:6px;z-index:3;pointer-events:none}
.home-garden .garden-scroll-tools[hidden]{display:none}
.home-garden .garden-scroll-tools button{pointer-events:auto;min-height:40px;padding:8px 10px;border:1px solid #b3caad;border-radius:12px;background:#fffff8f2;color:#285840;font:inherit;font-size:12px;font-weight:700;box-shadow:0 3px 12px #284b3020}
.home-garden .garden-scroll-tools button:disabled{opacity:.5;cursor:default}
.home-garden .garden-sprout-link{bottom:0;width:var(--garden-plant-width)}
.home-garden .garden-head h1{min-width:0;overflow-wrap:anywhere}
/* Only SVG canes need an extra mound. The supplied sprout already has its own.
   Both share the stage's baseline; the cane root sits within the soil artwork.
   Absolute positioning adds no overflow to an otherwise short garden. */
.home-garden .garden-soil{display:block;position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:var(--garden-plant-width);aspect-ratio:100/28;overflow:hidden;pointer-events:none;z-index:1}
.home-garden .garden-soil img{position:absolute;left:0;bottom:0;display:block;width:100%;height:auto}
@media(max-height:700px){
 .home-garden .garden-head{gap:9px;padding-top:8px;padding-bottom:8px}
 .home-garden .garden-head h1{font-size:28px}
 .home-garden .garden-head-note{display:none}
 .home-garden .garden-metric{min-height:0;gap:4px;padding:9px 10px}
 .home-garden .garden-metric-icon{width:23px;height:23px;padding:2px}
 .home-garden .garden-metric-icon .ui-icon{width:19px;height:19px}
 .home-garden .garden-metric-copy strong{font-size:16px}
 .home-garden .garden-metric-copy small{font-size:10px;line-height:1.2}
 .home-garden .garden-ground{padding-top:9px}
 .home-garden .garden-subjects .subject{min-height:57px;padding-bottom:8px}
 .home-garden .garden-scroll-tools{top:5px;right:6px}
 .home-garden .garden-scroll-tools button{min-height:34px;padding:6px 8px;font-size:11px}
}