/* =====================================================
   CALCULATOR AS AN APP (app-mode.js picks the view, app.js builds it)
   [data-view="app"]      full-screen steps, progress bar, bottom bar
   [data-view="handoff"]  computer: phone with the app + QR code
   [data-view="classic"]  the original page (style.css), plus a button
===================================================== */

/* ===================== app ===================== */

[data-view="app"] body {
  min-height: 100dvh;
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

[data-view="app"] button,
[data-view="app"] a,
[data-view="app"] label { touch-action: manipulation; }

/* top app bar: logo, screen title, start over */
[data-view="app"] .topbar {
  position: sticky;
  top: 0;
  z-index: 15;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  max-width: none;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--surface);
}

[data-view="app"] .topbar .logo { height: calc(32px * var(--logo-scale, 1)); }

[data-view="app"] .topbar-title {
  display: block;
  overflow: hidden;
  font-size: 17px;
  color: var(--ink);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-view="app"] .topbar .btn-quiet { min-height: 40px; padding: 0 10px; }
[data-view="app"] .topbar .btn-quiet span { display: none; }

.app-progress {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--shade) 70%, transparent);
  overflow: hidden;
}

.app-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--brand);
  transition: width 0.35s var(--ease);
}

/* one screen at a time */
[data-view="app"] .calc {
  display: block;
  max-width: 560px;
  padding: 16px 16px calc(148px + env(safe-area-inset-bottom));
}

[data-view="app"] .calc-inputs { display: block; }
[data-view="app"] .calc-inputs > .step,
[data-view="app"] .calc-results { display: none; }

/* before app.js runs, show the first step only (no flash of the whole page) */
[data-view="app"]:not(.app-ready) .calc-inputs > .step:first-child { display: grid; }

[data-view="app"] .calc-inputs > .step[data-active] { display: grid; }
[data-view="app"] .calc-results[data-active] { display: grid; gap: 20px; }
[data-view="app"] .calc-results { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; }

[data-view="app"] .step,
[data-view="app"] .results { padding: 20px; }

[data-view="app"] .step-head h2 { font-size: 24px; outline: none; }

[data-enter="forward"] { animation: app-in-forward 0.32s var(--ease); }
[data-enter="back"]    { animation: app-in-back 0.32s var(--ease); }

@keyframes app-in-forward {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: none; }
}
@keyframes app-in-back {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: none; }
}

/* the bottom bar replaces the floating dock and the page's own lead button */
[data-view="app"] .dock { display: none !important; }
[data-view="app"] .results-actions > [data-open-lead] { display: none; }
[data-view="app"] .page-foot { display: none; }
[data-view="app"][data-screen="results"] .page-foot {
  display: flex;
  padding-bottom: calc(132px + env(safe-area-inset-bottom));
  margin-top: calc(-120px - env(safe-area-inset-bottom));
}

.app-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: grid;
  gap: 8px;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -8px 24px rgba(30, 42, 56, 0.10);
}

.app-bar-peek {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  color: var(--ink-2);
}

.app-bar-peek[hidden] { display: none; }
.app-bar-peek b { font-size: 17px; font-weight: 700; color: var(--brand-ink); }

.app-bar-row {
  display: flex;
  gap: 10px;
  max-width: 528px;
  width: 100%;
  margin: 0 auto;
}

.app-bar .app-back { flex: 0 0 56px; min-height: 56px; padding: 0; }
.app-bar .app-back .icon { width: 24px; height: 24px; }
.app-bar .app-next { flex: 1; min-height: 56px; gap: 8px; }
.app-bar [hidden] { display: none; }

/* a gentle nudge when Next is pressed with no bill */
.is-shaking { animation: app-shake 0.45s; }
@keyframes app-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* inside a website's phone mockup the page is short: keep the bar compact */
[data-view="app"][data-framed] .app-bar-peek { display: none; }
[data-view="app"][data-framed] .calc { padding-bottom: 100px; }

@media (prefers-reduced-motion: reduce) {
  [data-enter], .is-shaking { animation: none; }
  .app-progress span { transition: none; }
}

/* ===================== app motion =====================
   Screen changes slide like a native app (View Transitions API, with a CSS
   fallback); each screen's parts flow in one after another; buttons press;
   bottom sheets spring up; numbers count (app.js). All of it stops for people
   who ask their device for reduced motion. */

:root { --spring: cubic-bezier(0.16, 1, 0.3, 1); }

[data-view="app"] .calc-inputs > .step[data-active],
[data-view="app"] .calc-results[data-active] { view-transition-name: app-screen; }
[data-view="app"] .app-bar { view-transition-name: app-bar; }
[data-view="app"] .topbar { view-transition-name: app-top; }
[data-view="app"] .app-pane { view-transition-name: app-pane; }

::view-transition-group(app-screen),
::view-transition-old(app-screen),
::view-transition-new(app-screen) { animation-duration: 0.46s; animation-timing-function: var(--spring); }
::view-transition-old(app-top),
::view-transition-new(app-top),
::view-transition-old(app-bar),
::view-transition-new(app-bar) { animation-duration: 0.18s; }
html[data-nav="forward"]::view-transition-old(app-screen) { animation-name: vt-out-left; }
html[data-nav="forward"]::view-transition-new(app-screen) { animation-name: vt-in-right; }
html[data-nav="back"]::view-transition-old(app-screen) { animation-name: vt-out-right; }
html[data-nav="back"]::view-transition-new(app-screen) { animation-name: vt-in-left; }
@keyframes vt-out-left  { to   { opacity: 0; transform: translateX(-16%) scale(0.96); } }
@keyframes vt-in-right  { from { opacity: 0; transform: translateX(24%) scale(0.98); } }
@keyframes vt-out-right { to   { opacity: 0; transform: translateX(16%) scale(0.96); } }
@keyframes vt-in-left   { from { opacity: 0; transform: translateX(-24%) scale(0.98); } }

/* the parts of a new screen flow in */
[data-view="app"] .is-entering > *,
[data-view="app"] .is-entering .results > * {
  animation: app-rise 0.6s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 45ms + 70ms);
}
@keyframes app-rise { from { opacity: 0; transform: translateY(16px); } }

/* the savings meter lands with a little bounce on the results screen */
.is-celebrating { animation: app-celebrate 0.9s 0.25s var(--spring) both; }
@keyframes app-celebrate {
  0%   { transform: scale(0.86); opacity: 0.2; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: none; }
}

/* progress grows with a spring and a soft glow */
[data-view="app"] .app-progress span {
  transition: width 0.55s var(--spring);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 55%, transparent);
}

/* things you tap press in, like real buttons */
[data-view="app"] .btn,
[data-view="app"] .panel-option,
[data-view="app"] .chip,
[data-view="app"] .segmented button,
[data-view="app"] .app-steps button { transition: transform 0.18s var(--spring), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
[data-view="app"] .btn:active,
[data-view="app"] .panel-option:active,
[data-view="app"] .chip:active,
[data-view="app"] .segmented button:active,
[data-view="app"] .app-steps button:active { transform: scale(0.96); }
[data-view="app"] .panel-option[aria-pressed="true"],
[data-view="app"] .chip[aria-pressed="true"] { animation: app-pop 0.36s var(--spring); }
@keyframes app-pop { 40% { transform: scale(0.95); } }

/* bottom sheets spring up on phones; dialogs pop on tablets */
[data-view="app"] .dialog::backdrop { animation: app-fade 0.3s ease; }
@keyframes app-fade { from { opacity: 0; } }
[data-view="app"][data-form="phone"] .dialog {
  width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0;
  border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom);
}
[data-view="app"][data-form="phone"] .dialog::before {
  content: ""; display: block; width: 44px; height: 5px; margin: 10px auto 0;
  border-radius: 5px; background: var(--shade);
}
[data-view="app"][data-form="phone"] .dialog[open] { animation: app-sheet-up 0.5s var(--spring); }
[data-view="app"][data-form="tablet"] .dialog[open] { animation: app-dialog-pop 0.42s var(--spring); }
@keyframes app-sheet-up { from { transform: translateY(100%); } }
@keyframes app-dialog-pop { from { opacity: 0; transform: translateY(18px) scale(0.96); } }

/* ---------- launch screen ---------- */
.app-splash {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-content: center; justify-items: center; gap: 18px;
  background: radial-gradient(120% 80% at 50% 28%, color-mix(in srgb, var(--brand) 82%, #fff), var(--brand-dark));
  color: #fff;
}
.app-splash-icon {
  width: 104px; height: 104px; border-radius: 28px; overflow: hidden;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
  animation: app-splash-pop 0.7s var(--spring) both;
}
.app-splash-icon img { display: block; width: 100%; height: 100%; }
.app-splash-name { margin: 0; min-height: 1.3em; font-family: var(--font-display); font-size: 22px; font-weight: 800; text-align: center; animation: app-rise 0.6s 0.15s var(--spring) both; }
.app-splash-bar { width: 120px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.app-splash-bar i { display: block; width: 40%; height: 100%; border-radius: inherit; background: #fff; animation: app-splash-load 1s ease-in-out infinite; }
.app-splash.is-leaving { animation: app-splash-out 0.55s var(--spring) forwards; pointer-events: none; }
@keyframes app-splash-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes app-splash-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes app-splash-out { to { opacity: 0; transform: scale(1.06); visibility: hidden; } }

/* ---------- install button and the iPhone instructions ---------- */
[data-view="app"] .app-install { color: var(--brand-ink); }
.app-install-help { display: grid; gap: 16px; padding: 22px 22px 26px; }
.app-install-help h2 { font-size: 22px; }
.app-install-help ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.app-install-help li { display: flex; align-items: center; gap: 14px; font-size: 16px; }
.app-install-help li > span {
  flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  background: var(--surface); box-shadow: var(--raised-sm); color: var(--brand-ink); font-weight: 800; font-size: 18px;
}
.app-ios-share::before { content: "⬆"; }

/* ---------- tablets: the step on the left, a live summary on the right ---------- */
[data-view="app"][data-form="tablet"] .calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 24px;
  align-items: start;
  max-width: 1100px;
  padding: 24px 28px calc(124px + env(safe-area-inset-bottom));
}
[data-view="app"][data-form="tablet"] .calc-inputs,
[data-view="app"][data-form="tablet"] .calc-results { grid-column: 1; grid-row: 1; }
[data-view="app"][data-form="tablet"] .step,
[data-view="app"][data-form="tablet"] .results { padding: 28px; }
[data-view="app"][data-form="tablet"] .step-head h2 { font-size: 28px; }
[data-view="app"][data-form="tablet"] .app-bar-peek { display: none; }
[data-view="app"][data-form="tablet"] .app-bar-row { max-width: 1100px; padding: 0 calc(28px + 384px) 0 28px; }
[data-view="app"][data-form="tablet"] .topbar .btn-quiet span { display: inline; }
[data-view="app"][data-form="tablet"][data-screen="results"] .app-live { display: none; }

.app-pane {
  grid-column: 2; grid-row: 1;
  position: sticky; top: calc(84px + env(safe-area-inset-top));
  display: grid; gap: 18px;
  /* stays within the screen on a landscape tablet, between the top bar and the bottom bar */
  max-height: calc(100dvh - 84px - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 6px; margin: -6px;
}
.app-live { display: grid; gap: 10px; padding: 22px; }
.app-live-head { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink-2); }
.app-live-head .logo { height: 28px; width: auto; }
.app-live .eyebrow { margin: 6px 0 0; }
.app-live-big { margin: 0; font-family: var(--font-data); font-size: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-ink); }
.app-live-share { margin: 0; font-size: 14px; color: var(--ink-2); }
.app-live-bills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.app-live-bills div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; box-shadow: var(--inset-sm); }
.app-live-bills span { font-size: 12px; color: var(--ink-3); }
.app-live-bills b { font-size: 18px; font-weight: 700; }
.app-live-facts { display: grid; gap: 8px; margin: 6px 0 0; }
.app-live-facts div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.app-live-facts dt { color: var(--ink-3); }
.app-live-facts dd { margin: 0; font-weight: 650; text-align: right; }

.app-steps { padding: 14px; }
.app-steps ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.app-steps button {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; border-radius: 14px; background: transparent;
  color: var(--ink-2); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.app-steps i {
  flex: 0 0 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font-style: normal; font-size: 13px; font-weight: 700; box-shadow: var(--inset-sm);
}
.app-steps button.is-done i { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); color: var(--brand-ink); box-shadow: none; }
.app-steps button[aria-current="step"] { background: var(--surface); color: var(--brand-ink); box-shadow: var(--raised-sm); }
.app-steps button[aria-current="step"] i { background: var(--brand); color: var(--on-brand); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  [data-view="app"] .is-entering > *, [data-view="app"] .is-entering .results > *,
  .is-celebrating, .app-splash, .app-splash *, [data-view="app"] .dialog[open] { animation: none !important; }
  [data-view="app"] .btn:active, [data-view="app"] .panel-option:active { transform: none; }
}

/* ===================== handoff (computer) ===================== */

[data-view="handoff"] .topbar,
[data-view="handoff"] .calc,
[data-view="handoff"] .dock,
[data-view="handoff"] .page-foot { display: none !important; }

.handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
  max-width: 1120px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 40px var(--gutter);
}

.handoff-copy { display: grid; gap: 18px; justify-items: start; max-width: 520px; }
.handoff-logo { height: calc(44px * var(--logo-scale, 1)); width: auto; }
.handoff-company { margin: 0; }
.handoff h1 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.08; }
.handoff-lede { font-size: 18px; color: var(--ink-2); }

.handoff-qr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 20px;
}

.handoff-qr canvas {
  width: 180px;
  height: 180px;
  padding: 10px;
  border-radius: var(--r-md);
  background: #fff;
}

.handoff-qr.is-failed canvas { display: none; }

.handoff-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--ink-2);
}

.handoff-steps li { display: flex; align-items: center; gap: 10px; }
.handoff-steps .icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--brand-ink); }

.handoff-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.handoff-device { display: grid; justify-items: center; gap: 16px; }
.handoff-device .device { --device-width: min(330px, 34vw); }

/* the phone fits the window height too */
@media (max-height: 820px) {
  .handoff-device .device { --device-width: min(330px, 34vw, calc((100dvh - 120px) * 9 / 19.3)); }
}

.handoff-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  color: var(--ink-3);
}

.handoff-hint .icon { width: 16px; height: 16px; }

/* ===================== classic ===================== */

.app-to-phone { justify-self: end; }
[data-view="classic"] .topbar { grid-template-columns: 1fr auto auto auto; }
[data-view="classic"] .topbar-title { justify-self: center; }
@media (max-width: 680px) {
  [data-view="classic"] .app-to-phone { display: none; }
}

/* ===================== the energy scene, up front =====================
   Step 1 opens with the sun → panel → home → grid scene (live as the bill is
   typed); the computer view shows it large under the headline. */

.flow-hero .flow-caption { min-height: 0; font-size: 12.5px; }
[data-view="app"][data-form="phone"] .flow-hero { padding: 8px 6px 6px; }
[data-view="app"][data-form="phone"] .flow-hero .flow-art { max-height: 132px; }

.handoff-flow { width: 100%; max-width: 560px; padding: 16px 14px 12px; }
.handoff-flow .flow-caption { font-size: 14px; }
@media (max-height: 820px) {
  .handoff { padding-top: 24px; padding-bottom: 24px; }
  .handoff-copy { gap: 14px; }
  .handoff-flow .flow-art { max-height: 150px; }
}