/* Sol-Ark System Controller 1.0.1
   Portable component: intentionally no outer background, section heading, tagline, or section padding. */
.solark-controller-component{
  --solark-controller-gap:clamp(24px,4vw,56px);
  --solark-controller-text:inherit;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  background:transparent;
  color:var(--solark-controller-text);
  font-family:inherit;
}
.solark-controller-component,.solark-controller-component *{box-sizing:border-box}
.solark-controller-component__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--solark-controller-gap);align-items:center;width:100%;}
.solark-controller-component__controller{min-width:0;width:100%;}
.solark-controller-component__media{position:relative;min-width:0;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:inherit;background:transparent;}
.solark-controller-component__media img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
.solark-controller-component__selected-image{opacity:0;transition:opacity .26s ease;}
.solark-controller-component__selected-image.is-visible{opacity:1;}
.solark-controller-component__narrative{width:100%;margin-top:clamp(22px,3vw,38px);padding:0;background:transparent;color:var(--solark-controller-narrative-color,#eef4fb);}
.solark-controller-component__narrative-title{margin:0 0 10px;max-width:none;color:inherit;font:inherit;font-weight:600;line-height:1.3;}
.solark-controller-component__narrative-body{margin:0;max-width:none;color:inherit;font:inherit;line-height:1.65;}
.solark-controller-component__narrative:not(.is-populated){min-height:0;margin-top:0;}
.solark-controller-component__narrative:not(.is-populated) .solark-controller-component__narrative-body{display:none;}
@media(max-width:760px){
  .solark-controller-component__stage{grid-template-columns:1fr;gap:24px;}
  .solark-controller-component__media{order:2;}
  .solark-controller-component__controller{order:1;}
  .solark-controller-component__narrative{margin-top:20px;}
}
#solark-grid-controller{
  display:block;
  width:100%;
  min-height:100%;
  overflow-x:clip;
  overflow-y:visible;
  scrollbar-gutter:stable;
  color-scheme:dark;
  --text:#eef4fb;
  --muted:#b9c8d7;
  --accent:#ff8a3d;
  background:transparent;
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
#solark-grid-controller,
#solark-grid-controller *{box-sizing:border-box}
#solark-grid-controller{margin:0}

/* Intro */
#solark-grid-controller .business-hero{
  width:min(1040px,92vw);
  margin:64px auto 28px;
  padding:34px 18px 0;
}
#solark-grid-controller .business-hero-eyebrow{
  margin:0 0 12px;
  color:rgba(185,200,215,.72);
  font-size:11px;
  line-height:1.4;
  font-weight:400;
  letter-spacing:.20em;
}
#solark-grid-controller .business-hero h1{
  margin:0;
  max-width:760px;
  color:rgba(244,247,251,.90);
  font-size:clamp(29px,3.3vw,44px);
  line-height:1.18;
  font-weight:400;
  letter-spacing:.005em;
}
#solark-grid-controller .business-hero-rule{
  width:46px;
  height:2px;
  margin-top:26px;
  border-radius:999px;
  background:rgba(255,133,71,.72);
}

/* Controller stage */
#solark-grid-controller .stage{
  position:relative;
  width:100%;
  max-width:none;
  min-width:0;
  margin:0 auto;
  padding-top:0;
  overflow:visible;
  background:transparent;
}
#solark-grid-controller .ecosystem-svg{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  margin:0;
  transform:none;
  background:transparent;
}
/* WordPress owns the section background. Keep the controller/callout geometry,
   but suppress the standalone SVG backdrop rectangle behind the controller. */
#solark-grid-controller #layer1{display:none!important;}

/* Interaction */
#solark-grid-controller .interactive-button{
  pointer-events:all;
  cursor:pointer;
  transition:filter 160ms ease;
}
#solark-grid-controller .interactive-button:focus{outline:none}
#solark-grid-controller .interactive-button[data-pair="pv"].is-lit{
  filter:brightness(1.18) saturate(1.10)
    drop-shadow(0 0 2.2px rgba(95,190,112,.62))
    drop-shadow(0 0 5px rgba(72,154,91,.28));
}
#solark-grid-controller .interactive-button[data-pair="battery"].is-lit{
  filter:brightness(1.18) saturate(1.10)
    drop-shadow(0 0 2.2px rgba(237,153,76,.64))
    drop-shadow(0 0 5px rgba(193,112,51,.28));
}
#solark-grid-controller .interactive-button[data-pair="load"].is-lit{
  filter:brightness(1.18) saturate(1.08)
    drop-shadow(0 0 2.2px rgba(181,174,205,.58))
    drop-shadow(0 0 5px rgba(137,126,166,.28));
}
#solark-grid-controller .interactive-button[data-pair="utility"].is-lit,
#solark-grid-controller .interactive-button[data-pair="ct"].is-lit,
#solark-grid-controller .interactive-button[data-pair="no-backup-loads"].is-lit{
  filter:brightness(1.18) saturate(1.06)
    drop-shadow(0 0 2.2px rgba(220,225,232,.58))
    drop-shadow(0 0 5px rgba(170,180,192,.25));
}



/* Default residential story image in the authored left-side frame.
   It intentionally sits beneath interactive callouts so the existing V14
   interaction can remain unchanged until the residential callout pass. */
#solark-grid-controller #default-home-scene{
  display:none!important;
  position:absolute;
  z-index:8;
  left:0;
  top:50%;
  width:min(560px,45%);
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:14px;
  transform:translateY(-50%);
  background:transparent;
  box-shadow:none;
  pointer-events:none;
}
#solark-grid-controller #default-home-scene img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}


@media (min-width:761px){
  #solark-grid-controller #info{display:none!important;}
}

/* Callout */
#solark-grid-controller #info{
  position:absolute;
  z-index:20;
  left:4.5vw;
  top:50%; /* safe area: prevents rounded top edge from being clipped by compact stage offset */
  width:min(400px,calc(100% - 40px));
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:18px;
  border:1px solid rgba(190,199,214,.18);
  border-radius:14px;
  background:#49536A;
  box-shadow:0 18px 44px rgba(8,13,23,.28);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transform:translateY(calc(-50% + 5px));
  pointer-events:none;
  transition:opacity 140ms ease,transform 140ms ease;
}
#solark-grid-controller #info.show{opacity:1;transform:translateY(-50%)}
#solark-grid-controller #info *{pointer-events:none}
#solark-grid-controller #info.battery-position{
  left:4.5vw;
  right:auto;
  top:50%;
  width:min(425px,calc(100% - 44px));
  transform:translateY(calc(-50% + 5px));
}
#solark-grid-controller #info.battery-position.show{transform:translateY(-50%)}
#solark-grid-controller #info-header{
  order:1;
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  margin:0 0 10px;
}
#solark-grid-controller #info-header-icon{
  display:none;
  flex:0 0 44px;
  width:44px;
  height:44px;
  margin:0;
  object-fit:contain;
}
#solark-grid-controller #info.has-header-icon #info-header-icon{display:block}
#solark-grid-controller #info-title{
  display:block;
  flex:1 1 auto;
  width:auto;
  margin:0;
  color:#fff;
  font-size:16px;
  line-height:1.3;
  font-weight:700;
}
#solark-grid-controller #info-title:empty{display:none}
#solark-grid-controller #info-divider{
  order:2;
  width:42px;
  height:3px;
  margin:0 0 14px;
  border-radius:2px;
  background:var(--accent);
}
#solark-grid-controller .callout-image{
  display:none;
  order:3;
  width:90%;
  max-width:90%;
  aspect-ratio:4/3;
  margin:0 auto 18px;
  overflow:hidden;
  border:1px solid rgba(222,228,237,.58);
  border-radius:10px;
  box-shadow:0 4px 12px rgba(220,226,236,.25),0 0 7px rgba(238,242,248,.12);
}
#solark-grid-controller .callout-image.show-image{display:block}
#solark-grid-controller .callout-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
#solark-grid-controller #info-copy{
  order:4;
  width:100%;
  margin:0;
  padding:12px 0 18px;
  color:#c9d0db;
  font-size:15px;
  line-height:1.5;
  font-weight:400;
}

/* MID detail */
#solark-grid-controller #mid-detail{
  display:none;
  order:4;
  width:100%;
}
#solark-grid-controller #mid-detail.show-detail{display:block}
#solark-grid-controller #mid-detail p{
  margin:0;
  padding:12px 0 18px;
  color:#c9d0db;
  font-size:15px;
  line-height:1.5;
}

/* GEN-port detail */
#solark-grid-controller #gen-port-detail{
  display:none;
  order:4;
  width:100%;
  color:#c9d0db;
  font-size:15px;
  line-height:1.5;
}
#solark-grid-controller #gen-port-detail.show-detail{display:block}
#solark-grid-controller #gen-port-dial-copy{
  width:118px;
  height:118px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
#solark-grid-controller #gen-port-dial-copy svg{
  width:118px;
  height:118px;
  overflow:visible;
}
#solark-grid-controller .gen-intro{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.5;
}
#solark-grid-controller .gen-mode{
  position:relative;
  display:grid;
  grid-template-columns:30px 1fr;
  column-gap:17px;
  align-items:start;
  margin:10px 0;
  padding:7px 0;
  color:#c9d0db;
  font-size:15px;
  line-height:1.5;
}
#solark-grid-controller .gen-mode::before{
  content:"";
  position:absolute;
  left:38px;
  top:3px;
  width:2px;
  height:24px;
  border-radius:999px;
  background:rgba(255,138,61,.78);
}
#solark-grid-controller .gen-mode-icon{
  display:block;
  width:30px;
  height:30px;
  object-fit:contain;
  border:0;
  background:transparent;
}
#solark-grid-controller .gen-mode strong{font-weight:700}

@media (min-width:761px){#solark-grid-controller #info{display:none!important}}
/* Host-page mode is authoritative because this iframe is narrower than the desktop viewport. */
#solark-grid-controller.host-desktop #info{display:none!important;opacity:0!important;pointer-events:none!important}

/* Mobile callout navigation */
#solark-grid-controller #info-mobile-controls{
  display:none;
  order:0;
  width:100%;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  margin:0 0 12px;
  padding:0 0 10px;
  border-bottom:1px solid rgba(190,199,214,.16);
}
#solark-grid-controller #info-mobile-controls .mobile-prev{justify-self:start}
#solark-grid-controller #info-mobile-controls .mobile-close{justify-self:center;font-size:19px}
#solark-grid-controller #info-mobile-controls .mobile-next{justify-self:end}
#solark-grid-controller #info-mobile-controls button{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(210,218,230,.22);
  border-radius:9px;
  background:rgba(255,255,255,.055);
  color:#f2f5f9;
  font:600 22px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  pointer-events:auto!important;
  touch-action:manipulation;
}
#solark-grid-controller #info-mobile-controls button:active{background:rgba(255,255,255,.12)}

/* Remove legacy labels if old markup is ever reintroduced */
#solark-grid-controller #info .callout-kicker,
#solark-grid-controller #info .connection-label,
#solark-grid-controller #info .hybrid-connection-label{display:none!important}

/* Controller footer/text is intentionally softer */
#solark-grid-controller .ecosystem-svg text,
#solark-grid-controller .ecosystem-svg text tspan{fill:#acb5c7!important}

@media (max-width:760px){
  #solark-grid-controller .business-hero{
    width:92vw;
    margin:38px auto 8px;
    padding:34px 8px 0;
  }
  #solark-grid-controller .business-hero-eyebrow{font-size:10px;margin-bottom:12px}
  #solark-grid-controller .business-hero h1{font-size:clamp(27px,8vw,36px);line-height:1.2}
  #solark-grid-controller .business-hero-rule{margin-top:20px}

  #solark-grid-controller .stage{width:96vw}
  #solark-grid-controller #default-home-scene{display:none}

  #solark-grid-controller #info,
  #solark-grid-controller #info.battery-position{
    position:absolute;
    left:50%;
    right:auto;
    top:24px;
    width:min(320px,calc(100% - 32px));
    max-width:calc(100% - 32px);
    transform:translate(-50%,5px);
  }
  #solark-grid-controller #info.show,
  #solark-grid-controller #info.battery-position.show{transform:translate(-50%,0)}

  #solark-grid-controller #info.mobile-locked,
  #solark-grid-controller #info.battery-position.mobile-locked{
    position:fixed;
    z-index:9999;
    left:50%;
    right:auto;
    top:8px;
    width:min(360px,calc(100vw - 20px));
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 16px);
    overflow-y:auto;
    overscroll-behavior:contain;
    transform:translate(-50%,0);
    pointer-events:auto;
  }
  #solark-grid-controller #info.mobile-locked #info-mobile-controls{
    display:grid;
    position:sticky;
    top:0;
    z-index:2;
    background:#49536A;
  }
  #solark-grid-controller.mobile-callout-locked .interactive-button{cursor:default}
}

@media (prefers-reduced-motion:reduce){
  #solark-grid-controller .interactive-button,
  #solark-grid-controller #info{transition:none}
}

/* Final authored MID and GEN PORT interaction states */
#solark-grid-controller .mid-dark{
  opacity:1!important;
  pointer-events:none!important;
  transition:opacity .18s ease;
}
#solark-grid-controller .mid-light{
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .18s ease;
  filter:drop-shadow(0 0 7px rgba(187,220,255,.18));
}
#solark-grid-controller.mid-live .mid-dark{opacity:0!important;}
#solark-grid-controller.mid-live .mid-light{
  opacity:1!important;
  filter:drop-shadow(0 0 6px rgba(187,220,255,.16))!important;
}
#solark-grid-controller .mid-visual,
#solark-grid-controller .mid-visual *,
#solark-grid-controller .sld-layer,
#solark-grid-controller .sld-layer *{pointer-events:none!important;}
#solark-grid-controller .mid-zone-hit{
  fill:#fff!important;
  fill-opacity:.001!important;
  stroke:none!important;
  pointer-events:all!important;
  cursor:pointer;
}
#solark-grid-controller.mid-live .mid-inverter,
#solark-grid-controller.mid-live .mid-inverter *{
  fill:#fff!important;
  stroke:none!important;
  filter:none!important;
}
#solark-grid-controller.mid-live .mid-backup-side,
#solark-grid-controller.mid-live .mid-backup-side *,
#solark-grid-controller.mid-live .mid-logo,
#solark-grid-controller.mid-live .mid-logo *{
  fill:#fff!important;
  stroke:#fff!important;
  filter:none!important;
}
#solark-grid-controller.mid-live .mid-grid-side{filter:none!important;}

#solark-grid-controller #circle214.gen-port-hit{
  fill:#343a4c!important;
  fill-opacity:1!important;
  stroke:#fff!important;
  stroke-opacity:1!important;
  stroke-width:.32754!important;
  opacity:.5!important;
  filter:none!important;
  pointer-events:all!important;
  cursor:pointer;
  transition:stroke .16s ease,stroke-opacity .16s ease,opacity .16s ease,filter .16s ease!important;
}
#solark-grid-controller.gen-port-live #circle214.gen-port-hit,
#solark-grid-controller #circle214.gen-port-hit.is-lit{
  opacity:.82!important;
  filter:drop-shadow(0 0 2.2px rgba(220,225,232,.62)) drop-shadow(0 0 5px rgba(170,180,192,.28))!important;
}
#solark-grid-controller .gen-port-icon{
  pointer-events:none!important;
  stroke:none!important;
  filter:none!important;
  transition:fill .16s ease!important;
}
#solark-grid-controller.gen-port-live .gen-port-icon{fill:#fff!important;}
#solark-grid-controller #gen-port-dial-copy,
#solark-grid-controller #gen-port-dial-copy use{filter:none!important;}
#solark-grid-controller #gen-port-dial-copy use{pointer-events:none!important;}

/* v1.1.1 flexible blocks: the host theme owns all outer composition.
   These overrides intentionally neutralize viewport-based sizing and legacy
   stage constraints from the original Home-page controller implementation. */
.solark-controller-source{
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  padding:0;
  background:transparent;
  color:inherit;
  font-family:inherit;
}
.solark-controller-source #solark-grid-controller{
  width:100%;
  max-width:none;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:visible;
  scrollbar-gutter:auto;
  color-scheme:normal;
  color:inherit;
  font-family:inherit;
  background:transparent;
}
.solark-controller-source #solark-grid-controller .stage{
  width:100%;
  max-width:none;
  min-width:0;
  margin:0;
  padding:0;
  overflow:visible;
}
.solark-controller-source #solark-grid-controller .ecosystem-svg{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0;
}
.solark-controller-output{width:100%;max-width:none;min-width:0;margin:0;padding:0;background:transparent;color:inherit;font-family:inherit;box-sizing:border-box}
.solark-controller-output--image{position:relative;aspect-ratio:4/3;overflow:hidden}
.solark-controller-output--image img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.solark-controller-output--image [data-solark-output-selected-image]{opacity:0;transition:opacity .26s ease}
.solark-controller-output--image [data-solark-output-selected-image].is-visible{opacity:1}
.solark-controller-output--narrative .solark-controller-output__title{margin:0 0 .55em;font:inherit;font-weight:600;color:inherit}
.solark-controller-output--narrative .solark-controller-output__body{margin:0;font:inherit;line-height:1.65;color:inherit}
.solark-controller-output--narrative:not(.is-populated) .solark-controller-output__body{display:none}