/* ═══════════ solar-live — Cuaca Gombak + anggaran penjimatan (homepage) ═══════════
   Scoped to #solar-live. Uses tokens from style.css (with fallbacks). */
#solar-live { --sl-sky-day: linear-gradient(160deg, #DCEBFF 0%, #FFF4C7 100%);
  --sl-sky-night: radial-gradient(1.5px 1.5px at 18% 30%, #fff 50%, transparent 51%),
                  radial-gradient(1px 1px at 72% 22%, #fff 50%, transparent 51%),
                  radial-gradient(1.5px 1.5px at 84% 58%, rgba(255,255,255,.8) 50%, transparent 51%),
                  radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,.7) 50%, transparent 51%),
                  radial-gradient(1px 1px at 58% 40%, rgba(255,255,255,.6) 50%, transparent 51%),
                  linear-gradient(160deg, var(--navy-deep, #16245A) 0%, var(--navy, #22387A) 100%); }
#solar-live .section-label { color: var(--navy, #22387A); }
#solar-live h2 span { color: var(--rose, #C8202F); }

.sl-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-4, 16px); }
@media (min-width: 820px) { .sl-grid { grid-template-columns: 1fr 1.15fr; align-items: stretch; } }

.sl-card { border-radius: var(--r-lg, 22px); box-shadow: var(--sh-1); overflow: hidden; min-width: 0; }

/* ── Card 1: weather + charging ── */
.sl-weather { background: var(--surface, #fff); border: 1px solid var(--line, #E3EBE7); display: flex; flex-direction: column; }
.sl-sky { background: var(--sl-sky-day); padding: var(--sp-5, 24px) var(--sp-5, 24px) var(--sp-4, 16px);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4, 16px); align-items: center; color: var(--navy-deep, #16245A); }
#solar-live.is-night .sl-sky { background: var(--sl-sky-night); color: #fff; }
.sl-icon { width: 72px; height: 72px; display: grid; place-items: center; }
.sl-icon svg { width: 72px; height: 72px; display: block; }
.sl-kicker { font-size: var(--fs-xs, .75rem); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.sl-temp { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; }
.sl-cond { font-weight: 600; font-size: var(--fs-sm, .875rem); }
.sl-chip { display: inline-block; margin-top: 6px; font-size: var(--fs-xs, .75rem); font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill, 100px);
  background: rgba(34,56,122,.1); }
#solar-live.is-night .sl-chip { background: rgba(255,255,255,.14); }

.sl-sun { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line, #E3EBE7); border-bottom: 1px solid var(--line, #E3EBE7); }
.sl-sun > div { padding: var(--sp-3, 12px) var(--sp-5, 24px); display: flex; align-items: center; gap: 10px; }
.sl-sun > div + div { border-left: 1px solid var(--line, #E3EBE7); }
.sl-sun svg { width: 28px; height: 28px; flex: none; }
.sl-sun small { display: block; font-size: var(--fs-xs, .75rem); color: var(--ink-3, #7C8C85); font-weight: 600; }
.sl-sun b { font-family: var(--font-display); font-size: 1.1rem; color: var(--navy, #22387A); }

.sl-body { padding: var(--sp-4, 16px) var(--sp-5, 24px) var(--sp-5, 24px); flex: 1; }
.sl-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2, 8px); margin-bottom: 8px; }
.sl-row h3 { font-size: var(--fs-h3, 1.1rem); font-weight: 700; color: var(--navy-deep, #16245A); }
.sl-big { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--navy, #22387A); }
.sl-bar { height: 14px; border-radius: var(--r-pill, 100px); background: #EEF1F7; overflow: hidden; border: 1px solid var(--line, #E3EBE7); }
.sl-bar > i { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #FFC24B, var(--yolk, #FFD93D)); transition: width .8s ease; }
.sl-bar.batt > i { background: linear-gradient(90deg, #4F80C4, var(--navy, #22387A)); }
.sl-sub { margin-top: 8px; font-size: var(--fs-sm, .875rem); color: var(--ink-2, #4A5B54); }
.sl-fine { margin-top: 6px; font-size: var(--fs-xs, .75rem); color: var(--ink-3, #7C8C85); }
.sl-moon { display: flex; align-items: center; gap: var(--sp-3, 12px); margin-bottom: var(--sp-3, 12px); }
.sl-moon-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--navy-deep, #16245A); display: grid; place-items: center; }
.sl-moon-ico svg { display: block; }
.sl-moon b { display: block; color: var(--navy-deep, #16245A); }
.sl-moon span { font-size: var(--fs-sm, .875rem); color: var(--ink-2, #4A5B54); }

/* ── Card 2: savings counter ── */
.sl-save { background: var(--navy, #22387A); color: #fff; padding: var(--sp-5, 24px); position: relative; display: flex; flex-direction: column; }
.sl-save::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--rose, #C8202F); }
.sl-save-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2, 8px); flex-wrap: wrap; }
.sl-save-head .sl-kicker { color: var(--yolk, #FFD93D); opacity: 1; }
.sl-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs, .75rem); font-weight: 800; letter-spacing: .08em;
  background: var(--rose, #C8202F); color: #fff; padding: 4px 10px; border-radius: var(--r-pill, 100px); }
.sl-live[hidden] { display: none; }
.sl-live i { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: sl-pulse 1.4s ease-in-out infinite; }
@keyframes sl-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

.sl-rm { margin: var(--sp-3, 12px) 0 2px; font-family: var(--font-display); font-weight: 800; color: var(--yolk, #FFD93D);
  font-size: clamp(2.3rem, 11vw, 3.4rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-rm small { font-size: .42em; font-weight: 700; color: rgba(255,255,255,.75); margin-right: 4px; vertical-align: .55em; }
.sl-rm .sl-frac { font-size: .38em; font-weight: 600; color: rgba(255,217,61,.55); margin-left: 1px; }
.sl-cap { font-size: var(--fs-sm, .875rem); color: rgba(255,255,255,.82); }

.sl-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-2, 8px); margin: var(--sp-4, 16px) 0 var(--sp-3, 12px); }
.sl-stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-md, 14px); padding: 10px 12px; min-width: 0; }
.sl-stat b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.sl-stat span { font-size: var(--fs-xs, .75rem); color: rgba(255,255,255,.7); }
/* trees' worth of CO2 — a small grove drawn on canvas (solar-live.js makeGrove) */
.sl-trees { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); align-items: end; gap: var(--sp-3, 12px);
  margin: 0 0 var(--sp-4, 16px); padding-top: var(--sp-3, 12px); border-top: 2px solid rgba(255,255,255,.12); }
.sl-tree-cv { display: block; width: 100%; height: 138px; }
.sl-trees-txt { padding-bottom: 12px; }
.sl-trees-txt b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: #8FCB6E;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sl-trees-txt span { display: block; margin-top: 6px; font-size: var(--fs-xs, .75rem); color: rgba(255,255,255,.72); line-height: 1.4; }
@media (max-width: 400px) { .sl-trees { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); } .sl-tree-cv { height: 120px; } }
.sl-note { font-size: var(--fs-sm, .875rem); color: #fff; border-left: 4px solid var(--yolk, #FFD93D); padding-left: var(--sp-3, 12px); margin-bottom: var(--sp-4, 16px); }

.sl-how { margin-top: auto; background: rgba(0,0,0,.14); border-radius: var(--r-md, 14px); font-size: var(--fs-sm, .875rem); margin-bottom: 6px; }
.sl-how summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--yolk, #FFD93D); list-style: none; display: flex; align-items: center; gap: 8px; }
.sl-how summary::-webkit-details-marker { display: none; }
.sl-how summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,217,61,.18); font-size: .9rem; }
.sl-how[open] summary::before { content: "–"; }
.sl-how summary:focus-visible { outline: 2px solid var(--yolk, #FFD93D); outline-offset: 2px; border-radius: var(--r-md, 14px); }
.sl-how-body { padding: 0 14px 14px; color: rgba(255,255,255,.88); }
.sl-how-body ol { padding-left: 1.2em; display: grid; gap: 6px; }
.sl-how-body b { color: #fff; }
.sl-how-body p { margin-top: 10px; }
.sl-how-src { font-size: var(--fs-xs, .75rem); color: rgba(255,255,255,.7); }
.sl-how-body a { color: var(--yolk, #FFD93D); }

.sl-status { margin-top: var(--sp-3, 12px); font-size: var(--fs-xs, .75rem); color: var(--ink-3, #7C8C85); }
#solar-live.is-offline .sl-status { color: var(--warn-ink, #8A6516); font-weight: 600; }
.sl-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 400px) {
  .sl-sky, .sl-body, .sl-save { padding-left: var(--sp-4, 16px); padding-right: var(--sp-4, 16px); }
  .sl-sun > div { padding-left: var(--sp-4, 16px); padding-right: var(--sp-3, 12px); }
  .sl-stat { padding: 8px 9px; }
  .sl-stat b { font-size: 1rem; }
}
/* ── Motion: the widget should feel alive (all off under prefers-reduced-motion) ── */
/* entrance — cards rise in when the widget first scrolls into view (solar-live.js adds .sl-in) */
.sl-card { transition: opacity .7s cubic-bezier(.2,.9,.1,1), transform .7s cubic-bezier(.2,.9,.1,1); }
.sl-card + .sl-card { transition-delay: .12s; }
#solar-live.sl-ready:not(.sl-in) .sl-card { opacity: 0; transform: translateY(32px); }

/* weather icon: sun rays turn, the whole icon floats, clouds drift, rain falls, lightning flickers */
.sl-icon svg { animation: sl-float 4.5s ease-in-out infinite; }
.sl-icon g[stroke="#FFD93D"] { transform-box: fill-box; transform-origin: center; animation: sl-spin 16s linear infinite; }
.sl-icon path[d^="M20 50"] { animation: sl-drift 5s ease-in-out infinite alternate; }
.sl-icon g[stroke="#4F80C4"] line { stroke-dasharray: 4 5; animation: sl-rain .6s linear infinite; }
.sl-icon path[d^="M34 50"] { animation: sl-flash 3s steps(1) infinite; }
@keyframes sl-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes sl-spin  { to { transform: rotate(360deg); } }
@keyframes sl-drift { from { transform: translateX(-3px); } to { transform: translateX(4px); } }
@keyframes sl-rain  { to { stroke-dashoffset: -9; } }
@keyframes sl-flash { 0%, 8%, 100% { opacity: 1; } 4% { opacity: 0; } }

/* night sky: stars twinkle */
.sl-sky { position: relative; overflow: hidden; }
.sl-sky > * { position: relative; }
#solar-live.is-night .sl-sky::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1.5px 1.5px at 18% 30%, #fff 50%, transparent 51%),
              radial-gradient(1px 1px at 72% 22%, #fff 50%, transparent 51%),
              radial-gradient(1.5px 1.5px at 84% 58%, #fff 50%, transparent 51%),
              radial-gradient(1px 1px at 40% 70%, #fff 50%, transparent 51%),
              radial-gradient(1px 1px at 58% 40%, #fff 50%, transparent 51%),
              radial-gradient(1.5px 1.5px at 92% 18%, #fff 50%, transparent 51%),
              radial-gradient(1px 1px at 30% 12%, #fff 50%, transparent 51%);
  animation: sl-twinkle 3.2s ease-in-out infinite alternate; }
@keyframes sl-twinkle { 0% { opacity: .35; } 60% { opacity: 1; } 100% { opacity: .6; } }

/* sunrise / sunset arrows bob */
.sl-sun svg path:last-child { transform-box: fill-box; transform-origin: center; animation: sl-bob 2.4s ease-in-out infinite; }
.sl-sun > div + div svg path:last-child { animation-delay: -1.2s; }
@keyframes sl-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* charging bar: stripes stream while the panels charge; a bright cursor blinks at the charge head */
#solar-live.is-day .sl-bar:not(.batt) > i {
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.45) 0 6px, transparent 6px 12px), linear-gradient(90deg, #FFC24B, var(--yolk, #FFD93D));
  background-size: 17px 17px, auto; animation: sl-charge .8s linear infinite; }
.sl-bar > i { position: relative; min-width: 10px; }
.sl-bar > i::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: #fff; animation: sl-blink 1s steps(1) infinite; }
.sl-bar.batt > i { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px), linear-gradient(90deg, #4F80C4, var(--navy, #22387A));
  background-size: 17px 17px, auto; animation: sl-charge 2.4s linear infinite reverse; }
@keyframes sl-charge { to { background-position: 17px 0, 0 0; } }
@keyframes sl-blink  { 50% { opacity: 0; } }

/* moon: a ring pulses out from it */
.sl-moon-ico { position: relative; }
.sl-moon-ico::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--yolk, #FFD93D); border-radius: 50%; animation: sl-ring 2.8s ease-out infinite; }
@keyframes sl-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }

/* savings: the figure lands with a snap after counting up; countdown has a blinking cursor */
#solar-live.sl-counted .sl-rm [data-sl="rm"] { display: inline-block; animation: sl-land .45s cubic-bezier(.2,.9,.1,1); }
@keyframes sl-land { 0% { transform: translateY(-6px); } 100% { transform: none; } }
#solar-live.is-waiting .sl-note::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 6px; vertical-align: -2px;
  background: var(--yolk, #FFD93D); animation: sl-blink 1s steps(1) infinite; }
.sl-note { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .sl-live i { animation: none; }
  .sl-bar > i { transition: none; }
  #solar-live.sl-ready:not(.sl-in) .sl-card { opacity: 1; transform: none; }
}