/* Solar calculator first-screen backdrop (Claude proposal, October 6 2026).
 * A static Florida-morning sky behind the heading, step tabs and address
 * search: warm sun glow, a dashed sun path and a real roof photo fading in
 * from the right. Decoration only. No calculator markup, text, fields,
 * lookups or behavior change. The script only measures where the address
 * card sits so the backdrop ends behind it.
 */
:root{--sc-ink:#13243a;--sc-sky:#dcefff;--sc-sky2:#eef7fd;--sc-dawn:#fff4dc;--sc-sun:#ffc34c;--sc-blue:#187fb5}

html[data-sc-hero-desktop] main#calculator.workspace{position:relative;isolation:isolate}
html[data-sc-hero-desktop] main#calculator.workspace::before,
html[data-sc-hero-desktop] main#calculator.workspace::after{content:"";position:absolute;z-index:-1;pointer-events:none;top:0;height:var(--sc-hero-h,600px)}

/* sky, sun glow and the sun's path */
html[data-sc-hero-desktop] main#calculator.workspace::before{
  left:0;right:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none'%3E%3Cpath d='M-20 560 C 360 40, 1080 40, 1460 560' fill='none' stroke='%23e3a521' stroke-opacity='.38' stroke-width='2' stroke-dasharray='2 12' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center top/100% 100% no-repeat,
    radial-gradient(300px 300px at 57% 0%,rgba(255,206,92,.6),rgba(255,206,92,.16) 46%,rgba(255,206,92,0) 70%),
    radial-gradient(60% 80% at 0% 0%,rgba(24,127,181,.14),rgba(24,127,181,0) 70%),
    linear-gradient(180deg,var(--sc-sky) 0%,var(--sc-sky2) 52%,var(--sc-dawn) 100%);
  border-bottom:1px solid rgba(19,36,58,.06)
}
/* the roof: a real aerial photo fading in from the right */
html[data-sc-hero-desktop] main#calculator.workspace::after{
  right:0;width:min(46vw,720px);
  background:url("/solar-studio-review/images/reference-roof-retouched.webp") 60% 42%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 32%,#000 70%),linear-gradient(180deg,#000 55%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 32%,#000 70%),linear-gradient(180deg,#000 55%,transparent 100%);
  mask-composite:intersect;
  opacity:.9
}

/* keep the copy crisp over the sky */
html[data-sc-hero-desktop] main#calculator.workspace>.page-heading,
html[data-sc-hero-desktop] main#calculator.workspace>.intro-promises,
html[data-sc-hero-desktop] main#calculator.workspace>.calculator-breadcrumb{position:relative}
html[data-sc-hero-desktop] main#calculator.workspace>.page-heading h1{color:var(--sc-ink);text-shadow:0 1px 0 rgba(255,255,255,.6)}
html[data-sc-hero-desktop] main#calculator.workspace>.page-heading .eyebrow{color:#0f6c9c}
html[data-sc-hero-desktop] main#calculator.workspace>.intro-promises span{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(19,36,58,.08)}
html[data-sc-hero-desktop] main#calculator.workspace>.intro-promises{flex-wrap:wrap;gap:8px}
html[data-sc-hero-desktop] main#calculator.workspace>.page-heading .reset-button{background:rgba(255,255,255,.78);border-radius:999px;padding-inline:12px}

/* step tabs read as cards floating on the sky */
html[data-sc-hero-desktop] main#calculator.workspace>.roof-journey>li{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 24px -20px rgba(19,36,58,.55)}
html[data-sc-hero-desktop] main#calculator.workspace>.roof-journey>li.current{background:#fff6dc}

/* the address card lifts off the backdrop */
html[data-sc-hero-desktop] main#calculator.workspace>.address-search{position:relative;box-shadow:0 28px 60px -38px rgba(19,36,58,.55),0 2px 6px -2px rgba(19,36,58,.08)}

/* phones: the calculator switches to its app layout (html[data-sc-hero-mobile] main.app-main) */
html[data-sc-hero-mobile] main.app-main{position:relative;isolation:isolate}
html[data-sc-hero-mobile] main.app-main::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:0;right:0;top:0;height:var(--sc-hero-h-m,470px);
  background:
    radial-gradient(190px 190px at 88% 2%,rgba(255,206,92,.7),rgba(255,206,92,.2) 45%,rgba(255,206,92,0) 70%),
    linear-gradient(180deg,var(--sc-sky) 0%,var(--sc-sky2) 55%,rgba(255,244,220,.9) 86%,rgba(255,244,220,0) 100%)}
html[data-sc-hero-mobile] main.app-main>.app-screen-title,html[data-sc-hero-mobile] main.app-main>.app-search{position:relative}
@media (forced-colors:active){html[data-sc-hero-desktop] main#calculator.workspace::before,html[data-sc-hero-desktop] main#calculator.workspace::after,html[data-sc-hero-mobile] main.app-main::before{display:none}}