/* Gardener's Dream UX polish: Plant Library readability + brand scale */
.dashboard-brand img{width:286px!important;max-width:62vw!important;height:112px!important}

[role="dialog"][aria-label$="learning center"]{max-height:94dvh!important}
[role="dialog"][aria-label$="learning center"]>div:first-child img{height:185px!important}
[role="dialog"][aria-label$="learning center"]>div:last-child{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* Keep the garden artwork tied to the viewport, never to document height.
   Bessy's list and long garden pages can grow without re-scaling the background into the clouds. */
.photo-shell{
  background-image:none!important;
  background-color:#23452f!important;
  isolation:isolate;
}
.photo-shell:before{
  content:''!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:linear-gradient(180deg,rgba(16,31,20,.03),rgba(12,31,20,.18)),url('/gardeners-dream-bg.png')!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:50% 52%!important;
}
.photo-vignette{
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
}
.app-stage{position:relative!important;z-index:1!important}

@media (min-width:700px) and (max-width:1180px) and (orientation:landscape){
  .photo-shell:before{background-position:50% 56%!important}
}

@media (orientation:portrait) and (min-width:700px) and (max-width:1180px){
  .photo-shell:before{background-position:50% 52%!important}
}

@media (max-width:700px){
  [role="dialog"][aria-label$="learning center"]{width:calc(100vw - 16px)!important;max-height:96dvh!important;border-radius:18px!important}
  [role="dialog"][aria-label$="learning center"]>div:first-child img{height:145px!important;border-radius:18px 18px 0 0!important}
  [role="dialog"][aria-label$="learning center"]>div:first-child>div:last-child{left:12px!important;bottom:10px!important;padding:8px 10px!important;max-width:84%!important}
  [role="dialog"][aria-label$="learning center"]>div:first-child h2{font-size:23px!important}
  [role="dialog"][aria-label$="learning center"] nav{padding:9px 10px!important;gap:6px!important}
  [role="dialog"][aria-label$="learning center"] nav button{padding:7px 10px!important;font-size:13px!important}
  [role="dialog"][aria-label$="learning center"]>div:last-child{padding:14px!important;overflow-y:auto!important;max-height:none!important}
  .dashboard-brand img{width:270px!important;max-width:66vw!important;height:105px!important}
  .photo-shell:before{background-position:50% 52%!important}
}