/* PlantEnvLab Local Climate — clean canonical bridge.
   Graph/view/comparison geometry is inherited from the original HORTSB styles. */

html,body{margin:0!important;padding:0!important;background:#f6f2e7!important}
body.pelClimateEmbed{min-height:0!important}
body.pelClimateEmbed>header,
body.pelClimateEmbed>footer,
body.pelClimateEmbed .homeIntro,
body.pelClimateEmbed .welcomeInvitation,
body.pelClimateEmbed .globalNav{display:none!important}

body.pelClimateEmbed main{
  display:block!important;
  width:min(1680px,calc(100% - 36px))!important;
  max-width:1680px!important;
  margin:0 auto!important;
  padding:0!important;
  box-shadow:none!important;
  background:#f6f2e7!important;
}

body.pelClimateEmbed .pelHorizontalConsole{
  width:100%!important;
  margin:0 auto 20px!important;
}

.pelConsoleTitleRow{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:28px!important;
  margin-bottom:16px!important;
}
.pelConsoleTitleRow>h2{margin:0!important;flex:0 0 auto!important}
.pelTitleHint{
  display:flex!important;
  flex-direction:row!important;
  justify-content:flex-end!important;
  align-items:baseline!important;
  flex-wrap:wrap!important;
  gap:6px 22px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  color:#5d6e66!important;
  font-size:12.5px!important;
  line-height:1.4!important;
  text-align:right!important;
}
.pelTitleHint span{white-space:nowrap!important}

.pelConsoleColumns{
  display:grid!important;
  grid-template-columns:.60fr 1.38fr 1.32fr!important;
  gap:14px!important;
  align-items:start!important;
}
.pelConsoleSingle,.customCompareFieldset,.seasonCompareFieldset{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
.pelConsoleSingle>label,.customCompareFieldset>legend,.seasonCompareFieldset>legend{
  display:block!important;
  min-height:24px!important;
  line-height:24px!important;
  margin:0 0 8px!important;
  padding:0!important;
  white-space:nowrap!important;
}

.pelConsoleSingle .dateRow{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
}
.pelConsoleSingle #dateInput{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  margin:0!important;
}
.pelConsoleSingle #dateButton{
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0 20px!important;
  white-space:nowrap!important;
}

.customCompareInputs{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:5px!important;
  width:100%!important;
  margin:0 0 8px!important;
}
.customCompareDate{
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  margin:0!important;
  padding-left:4px!important;
  padding-right:4px!important;
  text-align:center!important;
}
#customCompareButton{
  display:block!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
}

.seasonButtons{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  margin:0 0 8px!important;
}
.seasonButtons button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:100%!important;
  min-width:0!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
  padding:0 8px!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:1.2!important;
}
.seasonButtons button strong,.seasonButtons button small{
  display:inline!important;
  margin:0!important;
  line-height:1.2!important;
}
.seasonButtons button small{font-size:11px!important;font-weight:500!important}
#compareButton{
  display:block!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  margin:0!important;
}

.dateError[hidden]{display:none!important}

/* Do NOT override:
   .viewer, .compareView, .compareGrid, .compareCard,
   .compareCanvas, .chartWrap, canvas */

@media(max-width:1280px){
  .pelConsoleColumns{grid-template-columns:1fr!important;gap:16px!important}
  .pelConsoleTitleRow{align-items:flex-start!important;flex-direction:column!important;gap:8px!important}
  .pelTitleHint{justify-content:flex-start!important;text-align:left!important}
}
@media(max-width:720px){
  body.pelClimateEmbed main{width:calc(100% - 24px)!important}
  .pelConsoleSingle .dateRow{grid-template-columns:1fr!important}
  .customCompareInputs,.seasonButtons{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:460px){
  .customCompareInputs,.seasonButtons{grid-template-columns:1fr!important}
}

/* Climate Graphs alignment fix
   1) Align the viewer outer frame/background with the date-control frame.
   2) Keep the viewer title clear of the sticky PlantEnvLab header when buttons scroll to it.
*/
body.pelClimateEmbed .viewer{
  margin-left:0 !important;
  margin-right:0 !important;
  width:100% !important;
  max-width:none !important;
  scroll-margin-top:96px !important;
}

/* FINAL PRESENTATION FIX — Single day control must be vertical.
   CSS only. No HTML, JavaScript, graph logic, or data behavior is changed. */
html body.pelClimateEmbed main .pelHorizontalConsole .pelConsoleColumns .pelConsoleSingle .dateRow{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  width:100% !important;
  gap:8px !important;
  margin:0 !important;
}

html body.pelClimateEmbed main .pelHorizontalConsole .pelConsoleColumns .pelConsoleSingle #dateInput,
html body.pelClimateEmbed main .pelHorizontalConsole .pelConsoleColumns .pelConsoleSingle #dateButton{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:0 0 auto !important;
  margin:0 !important;
}

html body.pelClimateEmbed main .pelHorizontalConsole .pelConsoleColumns .pelConsoleSingle #dateButton{
  padding-left:12px !important;
  padding-right:12px !important;
}

/* Climate Graphs — mobile layout containment, 2026-09-06 */
@media(max-width:820px){
  html,body{
    max-width:100%;
    overflow-x:hidden;
  }
  main,
  .pelHorizontalConsole,
  .pelConsoleColumns,
  .pelConsoleSingle,
  .pelConsoleCompare,
  .pelConsoleSeasonal,
  .graphWrap,
  .graphPanel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }
  .pelConsoleColumns{
    grid-template-columns:1fr !important;
  }
  .pelConsoleSingle .dateRow,
  .customCompareInputs,
  .seasonButtons{
    grid-template-columns:1fr !important;
  }
  .pelConsoleSingle #dateInput,
  .pelConsoleSingle #dateButton,
  .customCompareInputs input,
  .seasonButtons button{
    width:100% !important;
    max-width:100% !important;
  }
  canvas{
    max-width:100% !important;
  }
}


/* PlantEnvLab Work02 v10 — all-graphs mobile final pass, 2026-09-07.
   Mobile-only containment/presentation. Desktop geometry and graph logic unchanged. */
@media(max-width:820px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:clip !important;
  }
  body.pelClimateEmbed{
    overscroll-behavior-x:none;
  }
  body.pelClimateEmbed .viewer,
  body.pelClimateEmbed .graphCard,
  body.pelClimateEmbed .compareView,
  body.pelClimateEmbed .compareGrid,
  body.pelClimateEmbed .compareCard,
  body.pelClimateEmbed .chartWrap,
  body.pelClimateEmbed .compareCanvas{
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  body.pelClimateEmbed .viewer{
    overflow-x:clip !important;
  }
  body.pelClimateEmbed .viewerSummary{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
  }
  body.pelClimateEmbed .graphTabs{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
  }
  body.pelClimateEmbed .graphTabs button{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:10px 12px !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-align:center !important;
    line-height:1.3 !important;
  }
  body.pelClimateEmbed .graphHeader{
    display:block !important;
    padding-left:4px !important;
  }
  body.pelClimateEmbed .graphHeader .metricText{
    margin-top:6px !important;
    overflow-wrap:anywhere !important;
  }
  body.pelClimateEmbed .compareTitle{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }
  body.pelClimateEmbed .compareTitle h2,
  body.pelClimateEmbed .compareTitle p{
    width:100% !important;
    max-width:100% !important;
    overflow-wrap:anywhere !important;
    white-space:normal !important;
  }
  body.pelClimateEmbed .compareTitle h2{
    margin-bottom:8px !important;
    font-size:clamp(22px,7vw,30px) !important;
    line-height:1.25 !important;
  }
  body.pelClimateEmbed .compareTitle p{
    margin:0 0 10px !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }
  body.pelClimateEmbed .compareCard h3{
    overflow-wrap:anywhere !important;
    white-space:normal !important;
    line-height:1.35 !important;
  }
  body.pelClimateEmbed canvas{
    display:block !important;
  }
}

/* PlantEnvLab Work02 v11 — mobile date-console metadata wrap, 2026-09-07.
   Keep desktop one-line layout; on mobile, stack each metadata item and allow natural wrapping. */
@media(max-width:720px){
  body.pelClimateEmbed .pelConsoleTitleRow{
    width:100% !important;
    max-width:100% !important;
  }
  body.pelClimateEmbed .pelTitleHint{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:4px !important;
    text-align:left !important;
  }
  body.pelClimateEmbed .pelTitleHint span{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
}

/* PlantEnvLab Work02 v12 — mobile fieldset legend wrap, 2026-09-07.
   The desktop console keeps one-line legends. On mobile, long legend text may wrap
   inside its own fieldset instead of widening the embedded Climate Graphs document. */
@media(max-width:720px){
  body.pelClimateEmbed .customCompareFieldset > legend,
  body.pelClimateEmbed .seasonCompareFieldset > legend{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    line-height:1.3 !important;
  }

  body.pelClimateEmbed .customCompareFieldset > legend small,
  body.pelClimateEmbed .seasonCompareFieldset > legend small{
    display:inline !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
}

/* PlantEnvLab Work02 v19 — responsive comparison enlargement, 2026-09-07.
   The Climate Graphs live inside an iframe. The old fixed 2400px modal with a
   black viewport mask trapped the 12-panel comparison inside the iframe.
   Enlarged comparison now expands in normal document flow, so the parent iframe
   can grow naturally and every panel remains reachable by normal page scrolling. */

body.pelClimateEmbed.comparisonExpanded{
  overflow:visible !important;
}

body.pelClimateEmbed .compareView.compareViewEnlarged{
  position:relative !important;
  inset:auto !important;
  z-index:auto !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:18px 18px 26px !important;
  background:#fffef9 !important;
  border:1px solid #d3ddd6 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  overflow:visible !important;
}

body.pelClimateEmbed .compareView.compareViewEnlarged .compareTitle{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  padding:0 58px 10px 0 !important;
  background:transparent !important;
}

body.pelClimateEmbed .compareView.compareViewEnlarged .compareGrid{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:14px !important;
  overflow:visible !important;
}

body.pelClimateEmbed .compareView.compareViewEnlarged .compareCard{
  min-width:0 !important;
  max-width:100% !important;
  padding:10px !important;
}

body.pelClimateEmbed .compareView.compareViewEnlarged .compareCanvas{
  width:100% !important;
  max-width:100% !important;
  height:350px !important;
}

body.pelClimateEmbed .compareView.compareViewEnlarged .compareExpandClose{
  display:block !important;
  position:absolute !important;
  top:8px !important;
  right:8px !important;
  z-index:3 !important;
  width:44px !important;
  height:40px !important;
}

@media(max-width:1280px){
  body.pelClimateEmbed .compareView.compareViewEnlarged .compareGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:760px){
  body.pelClimateEmbed .compareView.compareViewEnlarged{
    padding:12px 10px 20px !important;
  }

  body.pelClimateEmbed .compareView.compareViewEnlarged .compareTitle{
    padding-right:52px !important;
  }

  body.pelClimateEmbed .compareView.compareViewEnlarged .compareGrid{
    grid-template-columns:minmax(0,1fr) !important;
  }

  body.pelClimateEmbed .compareView.compareViewEnlarged .compareCanvas{
    height:320px !important;
  }
}