/* Bijli Mitra — "Marigold & Slate". Warm-paper light theme; marigold = solar (Rajasthan
   sun/marigold), slate = grid, clay = outage. Space Grotesk (display + tabular figures) +
   Inter (body). Mobile-first. No framework. */

:root {
  --paper:   #FAF8F3;
  --surface: #FFFFFF;
  --ink:     #1C1814;
  --muted:   #857C71;
  --line:    #EAE3D6;
  --solar:   #E08A1E;
  --solar-soft: #FBEBD2;
  --grid:    #33425A;
  --grid-soft:  #E4E7EC;
  --cut:     #9B3B2E;
  --good:    #2F7D5B;

  --r: 16px;          /* card radius */
  --r-sm: 10px;
  --gap: 14px;
  --pad: 16px;
  --shadow: 0 1px 2px rgba(28,24,20,.04), 0 6px 20px rgba(28,24,20,.05);
  --maxw: 800px;

  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --display: "Space Grotesk", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -.01em; }
.tnum { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--solar); outline-offset: 2px; border-radius: 4px; }

/* ---------------- layout ---------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad) 64px; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--pad);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
/* nowrap is load-bearing: when "Solar Mantri" wrapped to two lines, align-items:center put the
   dot midway between them, which reads as a crooked logo. Type shrinks instead of wrapping. */
.brand { font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--solar); box-shadow: 0 0 0 3px var(--solar-soft); }
.topbar__spacer { flex: 1; }

/* period navigation */
.period { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.period button { width: 30px; height: 30px; border: 0; background: transparent; border-radius: 999px; color: var(--ink); font-size: 16px; line-height: 1; display: grid; place-items: center; }
.period button:disabled { color: var(--line); cursor: default; }
.period button:not(:disabled):hover { background: var(--grid-soft); }
.period__label { font-family: var(--display); font-weight: 600; font-size: .9rem; min-width: 92px; text-align: center; padding: 0 4px; }

.iconbtn { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; color: var(--ink); font-size: 15px; }
.iconbtn:hover { background: var(--grid-soft); }
.iconbtn.spin { animation: spin .8s linear infinite; }

/* Narrow phones: brand + month nav + 3 icon buttons must share one row (~390px). Scale the
   whole bar down together rather than letting any one piece wrap. */
@media (max-width: 460px) {
  .topbar { gap: 6px; padding: 10px 12px; }
  .brand { font-size: .88rem; gap: 5px; }
  .brand .dot { width: 7px; height: 7px; box-shadow: 0 0 0 2.5px var(--solar-soft); }
  .period { padding: 2px; }
  .period__label { min-width: 58px; font-size: .8rem; padding: 0 2px; }
  .period button { width: 26px; height: 26px; font-size: 14px; }
  .iconbtn { width: 31px; height: 31px; font-size: 13px; }
  .iconbtn svg { width: 15px; height: 15px; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- section headers ---------------- */
.sec { margin: 26px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sec h2 { font-size: 1.06rem; }
.eyebrow { font-family: var(--display); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hint { font-size: .78rem; color: var(--muted); }

/* ---------------- cards ---------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad); box-shadow: var(--shadow); }
.card + .card { margin-top: var(--gap); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.card__title { font-size: .82rem; color: var(--muted); font-family: var(--sans); font-weight: 600; }

/* ---------------- hero: sun-gauge ---------------- */
/* Two hero cards (coverage + live output): native scroll-snap carousel on phones,
   side-by-side grid from 640px up. ponytail: no carousel library, CSS does it. */
.heroes { margin-top: 18px; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.heroes::-webkit-scrollbar { display: none; }
.heroes > .hero { margin-top: 0; scroll-snap-align: center; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: width .2s, background .2s; }
.dots span.on { width: 18px; background: var(--solar); }
.hero { margin-top: 18px; background: linear-gradient(180deg, var(--solar-soft) 0%, var(--surface) 55%); border: 1px solid var(--line); border-radius: 20px; padding: 8px 16px 18px; box-shadow: var(--shadow); text-align: center; }
.hero__gauge { width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 260 / 168; }
.hero__line { font-size: .95rem; color: var(--ink); margin: 2px 0 0; }
.hero__line b { color: var(--solar); font-family: var(--display); }
.hero__sub { font-size: .8rem; color: var(--muted); margin: 4px 0 0; }

/* ---------------- stat grid ---------------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: var(--gap); }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 13px; box-shadow: var(--shadow); }
.stat__label { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.stat__value { font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat__unit { font-size: .72rem; color: var(--muted); font-weight: 500; margin-left: 3px; }
.stat__delta { font-size: .72rem; margin-top: 4px; color: var(--muted); font-variant-numeric: tabular-nums; }
.stat__delta.up { color: var(--good); }
.stat__delta.down { color: var(--cut); }
.stat--solar { background: linear-gradient(180deg, var(--solar-soft), var(--surface)); border-color: color-mix(in srgb, var(--solar) 22%, var(--line)); }
.stat--accent .stat__value { color: var(--grid); }
/* net-metering callout sits below the KPI cards — space it only when it renders */
#netmeter:not(:empty) { display: block; margin-top: var(--gap); }

/* ---------------- charts ---------------- */
.chart { width: 100%; aspect-ratio: 640 / 240; }
/* day-level charts render charts.js's H2 viewBox (640x256) for the second date row — the box
   must match or the SVG letterboxes inside .chart and shrinks with gaps down both sides */
.chart--tall { aspect-ratio: 640 / 256; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: var(--muted); margin: 0; padding: 0; list-style: none; }
.legend--stack { flex-direction: column; gap: 0; width: 100%; }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.ring { width: 100%; max-width: 210px; margin: 6px auto 0; aspect-ratio: 1; }

/* two-up row: energy mix + bill (stacks on mobile; equal height on desktop) */
.duo { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 620px) { .duo { grid-template-columns: 1fr 1fr; align-items: stretch; } }
#callout:not(:empty) { margin-top: var(--gap); }

/* donut card: ring on top, legend as aligned rows pinned to the bottom */
.duocard { display: flex; flex-direction: column; }
.duocard .legend--stack { margin-top: auto; padding-top: 14px; }
.legend--stack .legend__item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 9px 2px; border-top: 1px solid var(--line); font-size: .85rem; }
.legend--stack .legend__lab { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.legend--stack .legend__val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* bill breakup line items */
.billbreak { margin-top: 12px; }
.brow { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; padding: 5px 0; color: var(--ink); }
.brow span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.brow--muted, .brow--muted span:last-child { color: var(--muted); font-weight: 500; }
.brow--sub { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 8px; }
.brow--total { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 9px; font-size: 1.02rem; }
.brow--total span { font-weight: 700; }
.brow--total span:last-child { color: var(--grid); }
.bnote { margin-top: 11px; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.bnote b { color: var(--good); }

/* ---------------- toggle ---------------- */
.toggle { display: inline-flex; background: var(--grid-soft); border-radius: 999px; padding: 3px; }
.toggle button { border: 0; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.toggle button.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(28,24,20,.08); }

/* ---------------- list (recent cuts) ---------------- */
.list { display: flex; flex-direction: column; }
.list__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); }
.list__row:first-child { border-top: 0; }
.list__title { font-weight: 600; font-size: .9rem; }
.list__sub { font-size: .76rem; color: var(--muted); }
.list__val { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cut); }

/* ---------------- table ---------------- */
.tablewrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.table th { text-align: right; font-weight: 600; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.table th:first-child, .table td:first-child { text-align: left; }
.table td { padding: 9px 6px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; text-align: right; }
.table tr:last-child td { border-bottom: 0; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; }
.badge--good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.badge--warn { background: color-mix(in srgb, var(--cut) 13%, transparent); color: var(--cut); }
.badge--muted { background: var(--grid-soft); color: var(--muted); }
.tag { display: inline-block; font-family: var(--sans); font-size: .68rem; font-weight: 600; color: var(--solar); background: var(--solar-soft); padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }

/* ---------------- callout ---------------- */
.callout { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--solar); border-radius: var(--r-sm); padding: 14px; box-shadow: var(--shadow); }
.callout--good { border-left-color: var(--good); }
.callout__icon { font-size: 20px; line-height: 1; }
.callout__big { font-family: var(--display); font-weight: 600; font-size: 1.15rem; }
.callout__big span { font-size: .82rem; color: var(--muted); font-weight: 500; }
.callout__text { font-size: .82rem; color: var(--muted); margin: 4px 0 0; }
.callout__ico { flex: none; color: var(--solar); padding-top: 1px; }
.callout__ico .ic { width: 22px; height: 22px; }
.callout--good .callout__ico { color: var(--good); }

/* inline line-icons (stroke = currentColor, so they inherit the text color) */
.ic { width: 14px; height: 14px; flex: none; display: inline-block; vertical-align: -2px; }
.stat--solar .stat__label .ic { color: var(--solar); }

/* ---------------- banner (errors / stale) ---------------- */
.banner { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: var(--r-sm); font-size: .85rem; }
.banner--error { background: color-mix(in srgb, var(--cut) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cut) 30%, var(--line)); color: var(--cut); }
.banner--stale { background: var(--solar-soft); border: 1px solid color-mix(in srgb, var(--solar) 30%, var(--line)); color: #8a5a12; }
.banner--ok { background: color-mix(in srgb, var(--good) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--good) 30%, var(--line)); color: var(--good); }
.banner button { margin-left: auto; border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: 4px 12px; font-size: .78rem; font-weight: 600; }

/* ---------------- skeleton / loading ---------------- */
.skel { position: relative; overflow: hidden; background: var(--grid-soft); border-radius: 8px; color: transparent !important; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: shimmer 1.3s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* last-updated caption (under sticky topbar) */
/* Sits between the sticky topbar and the first card. The 10px bottom collapses with the hero's
   18px top, so the top must be 18px too or the caption reads as tucked under the bar. */
.updated { margin: 18px 0 10px; font-size: .76rem; color: var(--muted); }

/* ---------------- footer ---------------- */
.foot { margin-top: 30px; text-align: center; font-size: .76rem; color: var(--muted); }
.foot a, .hint a { color: var(--solar); font-weight: 600; }

/* ---------------- static pages (privacy, delete-account) ----------------
   Prose inside the same .card shell as the dashboard, so there's no second visual language to
   maintain. ponytail: one class, no page-specific layout. */
.doc { max-width: 720px; padding-top: 4px; }
.doc h3 { font-size: .95rem; margin: 0 0 8px; }
.doc p, .doc li { font-size: .88rem; color: var(--muted); line-height: 1.65; margin: 0 0 10px; }
.doc li { margin: 0 0 6px; }
.doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc p:last-child, .doc ul:last-child { margin-bottom: 0; }
.doc b { color: var(--ink); font-weight: 600; }
.doc a { color: var(--solar); font-weight: 600; }
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--grid-soft); border-radius: 5px; padding: 1px 5px; color: var(--ink); }
.topbar a.brand { color: inherit; text-decoration: none; }

/* ---------------- auth + onboarding ---------------- */
.auth { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; }
.auth__hero { padding: 40px var(--pad) 10px; }
.auth__brand { font-family: var(--display); font-weight: 600; font-size: 1.3rem; display: flex; align-items: center; gap: 9px; }
.auth__tagline { font-family: var(--display); font-size: 1.9rem; line-height: 1.12; letter-spacing: -.02em; margin: 20px 0 8px; max-width: 12ch; }
.auth__sub { color: var(--muted); max-width: 40ch; }
.auth__note { color: var(--muted); font-size: .8rem; max-width: 42ch; line-height: 1.8; margin: 14px 0 0; }
.panel { align-self: end; background: var(--surface); border: 1px solid var(--line); border-radius: 22px 22px 0 0; box-shadow: var(--shadow); padding: 24px var(--pad) 34px; }
.panel__wrap { max-width: var(--maxw); margin: 0 auto; width: 100%; }
.panel h2 { font-size: 1.15rem; margin-bottom: 4px; }
.panel__hint { font-size: .82rem; color: var(--muted); margin: 0 0 16px; }
.field { display: block; margin-bottom: 13px; }
.field__label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.field input { width: 100%; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; }
.field input:focus { border-color: var(--solar); background: var(--surface); outline: none; }
.field__err { color: var(--cut); font-size: .76rem; margin-top: 5px; }
/* average-line legend under the solar-performance chart. Lives outside the plot because in-chart
   pills collided with the bars and their value labels; the dashes mirror the SVG rules. */
.avgrow { margin-top: 10px; justify-content: center; align-items: center; gap: 14px; font-variant-numeric: tabular-nums; }
.avgrow__lead { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.avgrow b { font-family: var(--display); color: var(--ink); font-weight: 600; margin-left: 2px; }
.avgrow .legend__item--unit { color: var(--muted); }
.legend__rule { width: 16px; height: 0; border-top: 2px dashed var(--c); border-top-style: dashed;
  border-image: none; display: inline-block; opacity: .9; }

/* section-header tools (legend + year picker) */
.sec__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.yearpick { font: inherit; font-size: .82rem; font-weight: 600; font-family: var(--display); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; }
.yearpick:focus-visible { outline: 2px solid var(--solar); outline-offset: 1px; }

/* show/hide toggle injected into every password input (see eyeball() in app.js) */
.field__wrap { position: relative; display: block; }
.field__wrap input { padding-right: 46px; }
.field__eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
  display: grid; place-items: center; border: 0; background: none; color: var(--muted); border-radius: 10px; }
.field__eye:hover { color: var(--ink); background: var(--grid-soft); }
.field__eye:focus-visible { outline: 2px solid var(--solar); outline-offset: -2px; }
/* read-only value styled like a disabled input (settings → account email) */
.acctval { display: block; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--grid-soft); color: var(--muted); word-break: break-all; }
.btn { width: 100%; border: 0; border-radius: 12px; padding: 13px; font-family: var(--display); font-weight: 600; font-size: .95rem; }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #000; }
.btn--solar { background: var(--solar); color: #3a2405; }
.btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.btn--google { background: var(--surface); color: var(--ink); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 9px; }
.btn--google:hover { background: var(--paper); }
.gsi { display: flex; justify-content: center; min-height: 40px; }
.btn--google svg { width: 18px; height: 18px; flex: none; }
.orline { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--muted); font-size: .72rem; }
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn:disabled { opacity: .55; cursor: default; }
.formmsg { font-size: .84rem; margin-top: 10px; }
.formmsg--err { color: var(--cut); }
.linkbtn { background: none; border: 0; color: var(--solar); font-weight: 600; padding: 0; text-decoration: underline; }
.divider { text-align: center; color: var(--muted); font-size: .74rem; margin: 16px 0; }

/* ---------------- responsive up ---------------- */
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .auth__tagline { font-size: 2.6rem; }
  .heroes { grid-auto-columns: 1fr; overflow: visible; }
  .dots { display: none; }
  .hero__line { font-size: 1.15rem; }
  /* solar-less accounts keep the single wide hero: gauge left, headline right */
  .hero:only-child { display: grid; grid-template-columns: 280px 1fr; align-items: center; text-align: left; gap: 24px; padding: 24px 28px; }
  .hero:only-child .hero__gauge { margin: 0; }
}