:root {
  --paper: #f7f5f0;
  --ink: #1c2530;
  --teal: #1c6e5c;
  --teal-dark: #175a4b;
  --maroon: #7a1f2b;
  --line: rgba(28, 37, 48, 0.1);
  --shadow: 0 8px 24px rgba(28, 37, 48, 0.14);
  --shadow-lg: 0 10px 28px rgba(28, 37, 48, 0.2);
  --note-ink: rgba(28, 37, 48, 0.6);
  --note-link: var(--teal);
  --gutter: 24px;
  --panel-w: 440px;
}

/* Only the map-adjacent text recolors per theme; the floating cards stay
   light in every theme, the way the design has them. */
[data-theme="sand"] { --note-ink: rgba(28, 37, 48, 0.62); }
[data-theme="ink"] { --note-ink: rgba(240, 240, 235, 0.72); --note-link: #7fd4bd; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #eceae3;
  color: var(--ink);
  font-family: "Work Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-dark); text-decoration: underline; }

#map { position: absolute; inset: 0; }
#map canvas { cursor: crosshair; }

#loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; opacity: 0.5; }

.card { background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); }

/* top bar */
#top { position: absolute; top: 24px; left: 24px; right: 24px; z-index: 10; display: flex; align-items: center; gap: 16px; }
#brand { display: flex; align-items: center; gap: 12px; padding: 12px 20px; flex: none; }
#brand span { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }

#searchwrap { position: relative; flex: 1 1 260px; min-width: 150px; max-width: 420px; }
#sfield { display: flex; align-items: center; gap: 10px; padding: 13px 18px; }
#sfield svg { flex: none; opacity: 0.55; }
#search { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
#search::placeholder { color: var(--ink); opacity: 0.5; }

.results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1; padding: 6px; display: none; max-height: 320px; overflow-y: auto; text-align: left; }
.results.on { display: block; }

/* start card: the savings page's first ask, a zip */
#start { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 12; width: min(460px, calc(100vw - 2 * var(--gutter))); padding: 28px 30px 30px; box-shadow: var(--shadow-lg); }
#start[hidden] { display: none; }
#start .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--teal); }
#start h1 { font-family: "Space Grotesk", sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 8px 0 6px; }
#start .sub { font-size: 14px; opacity: 0.65; line-height: 1.45; }
#start-search { position: relative; margin-top: 18px; }
#start-search .field { margin-top: 0; padding: 14px 16px; font-size: 17px; border-width: 2px; border-color: rgba(28, 110, 92, 0.45); }
.res { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.res.sel, .res:hover { background: rgba(28, 37, 48, 0.06); }
.res .nm { font-size: 13.5px; font-weight: 500; min-width: 0; }
.res .nm i { display: block; font-style: normal; font-size: 11.5px; opacity: 0.55; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; font-family: "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; }

/* theme switcher */
#vars { margin-left: auto; display: flex; gap: 8px; flex: 0 1 auto; min-width: 0; }
.vg { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-width: 0; }
.vg .vl { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.45; }
.vg .opts { display: flex; gap: 3px; }
.vg button, .vg .opts a, .metric-opts button { border: 0; background: transparent; padding: 5px 9px; border-radius: 7px; font: inherit; font-size: 12px; font-weight: 500; color: var(--ink); opacity: 0.55; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.vg button:hover, .vg .opts a:hover, .metric-opts button:hover { opacity: 0.9; background: rgba(28, 37, 48, 0.06); text-decoration: none; }
.vg button.on, .vg .opts a.on, .metric-opts button.on { opacity: 1; background: var(--teal); color: var(--paper); font-weight: 600; }

/* tab bar -- plain navigation between the map pages */
#tabs { flex: none; padding: 6px; }

@media (max-width: 1180px) { .vg .vl { display: none; } .vg { padding: 8px 10px; } }
@media (max-width: 940px) { .vg button, .vg .opts a { padding: 5px 7px; font-size: 11.5px; } #top { gap: 12px; } }
@media (max-width: 820px) { #brand span { display: none; } #brand { padding: 12px 14px; } }
@media (max-width: 720px) { #tabs { display: none; } }

/* zoom */
#zoom { position: absolute; right: 24px; top: 88px; z-index: 10; display: flex; flex-direction: column; overflow: hidden; width: 36px; }
#zoom button { height: 35px; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); opacity: 0.6; cursor: pointer; }
#zoom button + button { border-top: 1px solid var(--line); }
#zoom button:hover { opacity: 1; background: rgba(28, 37, 48, 0.06); }

/* legend */
#legend { position: absolute; left: 24px; bottom: 24px; z-index: 10; padding: 16px 18px; width: 214px; background: rgba(247, 245, 240, 0.94); backdrop-filter: blur(3px); }
#legend .lab { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.6; }
#ramp { height: 9px; border-radius: 5px; margin-top: 12px; }
#legend .ends { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; opacity: 0.6; font-family: "Space Grotesk", sans-serif; font-variant-numeric: tabular-nums; }
#legend .cap { margin-top: 10px; font-size: 11.5px; opacity: 0.55; line-height: 1.4; }
#legend .nd { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 11.5px; opacity: 0.55; }
#legend .sw { width: 12px; height: 12px; border-radius: 3px; background: #e3e0d7; box-shadow: inset 0 0 0 1px var(--line); flex: none; }
#legend .nd + .nd { margin-top: 5px; }

/* Savings view: a wider panel that splits the screen with the map, so the
   household's zip stays in view beside its numbers. Narrow screens keep the
   panel on top of the map, since a split there would leave no map at all.
   The panel is the main content, so on a split it takes most of the width. */
.savings { --panel-w: 560px; }
@media (min-width: 1000px) {
  .savings { --panel-w: 60vw; }
  .savings:has(#panel.on) #map { right: var(--panel-w); }
  .savings:has(#panel.on) #top,
  .savings:has(#panel.on) #zoom,
  .savings:has(#panel.on) #note { right: calc(var(--panel-w) + var(--gutter)); }
  /* The top bar now fits the narrower map, so drop the same labels the
     narrow-screen rules drop. */
  .savings:has(#panel.on) #brand span,
  .savings:has(#panel.on) .vg .vl { display: none; }
  /* The map is now the narrow side: the map-style picker and the contact
     note do not fit beside the search and the legend, so they wait for the
     panel to close. */
  .savings:has(#panel.on) #vars,
  .savings:has(#panel.on) #note { display: none; }
}
/* A wide panel would stretch each picker past what its options need. */
#panel select.field { max-width: 420px; }

/* The panel lays itself out by its own width: one column in the narrow
   overlay, two once there is room for the questions beside the estimate. */
#panel { container-type: inline-size; --qlab-w: 130px; --qrow-gap: 12px; }
#panel .qrow select.field { margin-top: 0; flex: 1 1 200px; }
#panel .refine .qrow { margin-top: 12px; }
#panel .qrow .field.bill { margin-top: 0; flex: 1 1 100px; max-width: 160px; }
#panel .qrow select.field.unit { flex: 0 0 84px; }
/* Under the control, not under the label. */
#panel .hint { padding-left: calc(var(--qlab-w) + var(--qrow-gap)); }
/* The EV answer and its miles stay on one line. */
#panel .qrow:has(#f-miles) { flex-wrap: nowrap; }
#panel .qrow .inline .field { width: 80px; }
/* Values sit next to each other, not spread across the box. */
#panel .cmp { grid-template-columns: repeat(3, auto); gap: 12px 24px; justify-content: start; }
#panel .top .bigfig { justify-self: start; max-width: 100%; }
/* Wide enough for the three values; a long flat-plan name wraps instead of
   pushing the utility column narrow. */
#panel .top #opportunity { max-width: 480px; }
#panel .top .fact { font-size: 15px; }
#panel .top .fact select.field { font-size: 15px; }
@container (min-width: 760px) {
  #panel .top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
  #panel .top .bigfig { margin-top: 16px; }
  #panel .calc-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  /* The estimate stays in view while the questions scroll past it. */
  #panel .calc-grid .estbox { grid-column: 2; grid-row: 1; position: sticky; top: 12px; }
  #panel .calc-grid .questions { grid-column: 1; grid-row: 1; }
  .plan .seasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px; }
  .plan .seasons .season + .season { margin-top: 0; }
}

#note { position: absolute; right: 24px; bottom: 16px; z-index: 10; max-width: 352px; text-align: right; font-size: 11.5px; line-height: 1.55; color: var(--note-ink); }
#note a { color: var(--note-link); }

/* hover card */
#hover { position: absolute; z-index: 15; /* over the legend (10), under the panel (20) */ pointer-events: none; opacity: 0; transition: opacity 0.1s; padding: 15px 18px; width: 262px; box-shadow: var(--shadow-lg); }
#hover.on { opacity: 1; }
#hover .t { font-weight: 600; font-size: 14px; }
#hover .m { opacity: 0.65; font-size: 12px; margin-top: 3px; line-height: 1.4; }
#hover .m u { text-decoration: none; color: var(--teal); font-weight: 500; }
#hover .v { margin-top: 9px; font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 700; color: var(--maroon); font-variant-numeric: tabular-nums; }
#hover .v i { font-size: 13px; font-weight: 500; opacity: 0.7; font-style: normal; }
#hover .s { margin-top: 6px; font-size: 12px; opacity: 0.7; }
#hover .s b { font-weight: 600; opacity: 1; }
#hover .s b.fig { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 14px; color: var(--maroon); font-variant-numeric: tabular-nums; }
#hover .h { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.45; }

/* tier bars */
.tiers { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.tier { display: grid; grid-template-columns: 1fr 62px 40px; gap: 8px; align-items: center; font-size: 11.5px; }
.tier .n { opacity: 0.62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier .b { height: 7px; border-radius: 4px; background: rgba(28, 37, 48, 0.08); overflow: hidden; }
.tier .b i { display: block; height: 100%; border-radius: 4px; }
.tier .p { text-align: right; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; }

/* population */
.pop { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.pop .pr { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pop .pk { font-size: 11.5px; opacity: 0.6; }
.pop .pv { font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pop .pbar { display: flex; gap: 2px; margin-top: 6px; }
.pop .pbar i { flex: 1; height: 6px; border-radius: 2px; background: var(--teal); }
.pop .pl { margin-top: 5px; font-size: 11px; opacity: 0.55; }

/* detail panel */
#panel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--panel-w); max-width: 92vw; z-index: 20; background: var(--paper); box-shadow: -16px 0 40px rgba(28, 37, 48, 0.22); padding: 30px 30px 40px; overflow-y: auto; transform: translateX(102%); transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
#panel.on { transform: none; }
#panel .close { display: flex; justify-content: flex-end; }
#panel .close button { border: 0; background: transparent; cursor: pointer; padding: 2px; opacity: 0.5; color: var(--ink); }
#panel .close button:hover { opacity: 1; }
#panel .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.5; margin-top: 4px; }
#panel h2 { font-family: "Space Grotesk", sans-serif; font-size: 27px; font-weight: 700; margin: 6px 0 4px; letter-spacing: -0.01em; }
#panel .util { font-size: 14px; opacity: 0.7; line-height: 1.45; }
#panel h3 { font-weight: 600; font-size: 15px; margin: 0; }
#panel .sub { font-size: 12.5px; opacity: 0.6; margin-top: 3px; }

.bigfig { margin-top: 20px; border-radius: 14px; padding: 18px 20px; background: linear-gradient(135deg, rgba(122, 31, 43, 0.08), rgba(217, 84, 47, 0.08)); }
.bigfig .k { font-size: 12px; opacity: 0.6; }
.bigfig .v { font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 700; color: var(--maroon); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.bigfig .v i { font-size: 14px; font-weight: 500; opacity: 0.7; font-style: normal; }

.tariff { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 500; }
.rule { height: 1px; background: var(--line); margin: 22px 0; }

/* every utility serving the zip, not just the winner */
.plans { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.plan { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.plan.best { border-color: rgba(122, 31, 43, 0.3); background: rgba(122, 31, 43, 0.035); }
.plan .ph { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan .pn { font-size: 13px; font-weight: 600; }
.plan .pp { font-size: 12.5px; opacity: 0.65; margin-top: 2px; line-height: 1.4; }
.plan .pw { font-size: 11.5px; opacity: 0.55; margin-top: 4px; }
.plan .badge { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--maroon); }
.plan .badge.ev { color: var(--teal); }
.plan .badge.review { color: var(--ink); opacity: 0.5; }

/* how much we know about the numbers: a leading dot carries the level, so the
   three states are distinguishable without three colours of text */
.plan .conf { font-size: 11.5px; opacity: 0.55; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.plan .conf::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.plan .conf.ours { color: var(--maroon); opacity: 0.85; }
.plan .conf.urdb_verified { opacity: 0.7; }
.plan .conf.urdb_unchecked::before { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.plan .tariff + .tariff { margin-left: 16px; }

/* the zip's basics: who serves it and whether time-of-use exists */
.facts { margin-top: 16px; display: grid; gap: 8px; }
.fact { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 13.5px; line-height: 1.4; }
.fact .fk { opacity: 0.55; }
.fact .fv { font-weight: 500; }
.fact select.field { margin-top: 0; padding: 6px 10px; font-weight: 500; }
/* Utility names run long ("Sacramento Municipal Utility District"), so the
   picker takes the full width under its label instead of being cut off. */
.fact:has(select) { grid-template-columns: 1fr; gap: 4px; }
#tou { display: contents; }

.qlab { display: block; margin-top: 16px; font-size: 13px; font-weight: 500; }
[data-when][hidden] { display: none; }

/* a question, its answer and any follow-up on one line */
.qrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px var(--qrow-gap, 12px); margin-top: 16px; }
.qrow .qlab { margin-top: 0; flex: 0 0 var(--qlab-w, 150px); }
.seg.sm { margin-top: 0; flex: none; }
.seg.sm button { flex: none; padding: 7px 16px; }
.qrow .inline { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.8; }
.qrow .inline[hidden] { display: none; }
.qrow .inline .field { margin-top: 0; width: 96px; padding: 7px 10px; }

/* flat rate vs. the plan's cheapest rate */
.cmp { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; margin-top: 10px; align-items: end; }
.cmp .n { font-family: "Space Grotesk", sans-serif; font-size: 20px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cmp .v { margin-top: 2px; }

.plan .when { font-size: 12.5px; margin-top: 10px; line-height: 1.5; }
/* The panel has room for real bars; the hover card keeps the compact ones. */
.plan .tier { grid-template-columns: 110px 1fr 48px; }
.plan .season + .season { margin-top: 16px; }
.plan .sn { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; margin-top: 12px; }
.plan .conf { margin-top: 14px; }
.plan .credits { font-size: 11.5px; opacity: 0.55; margin-top: 4px; padding-left: 12px; line-height: 1.5; }
.plan .when b { font-weight: 600; }
.plan .links { display: flex; flex-wrap: wrap; gap: 0 18px; }

.refine { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.refine summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--teal); }
.refine summary:hover { color: var(--teal-dark); }
.seg { display: flex; gap: 8px; margin-top: 8px; }
.seg button { flex: 1; padding: 9px 0; border: 0; border-radius: 9px; background: rgba(28, 37, 48, 0.06); font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; }
.seg button.on { background: var(--teal); color: var(--paper); font-weight: 600; }
.field { margin-top: 8px; width: 100%; padding: 10px 14px; border: 1px solid rgba(28, 37, 48, 0.16); border-radius: 9px; font: inherit; font-size: 13.5px; background: transparent; color: var(--ink); outline: none; }
.field:focus { border-color: rgba(28, 110, 92, 0.5); box-shadow: 0 0 0 3px rgba(28, 110, 92, 0.1); }
.field::placeholder { opacity: 0.45; }

.estbox { margin-top: 14px; background: rgba(28, 110, 92, 0.08); border-radius: 14px; padding: 18px 20px; }
.estbox .k { font-size: 12.5px; opacity: 0.65; }
.estbox .v { font-family: "Space Grotesk", sans-serif; font-size: 40px; font-weight: 700; color: var(--teal); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.estbox .v i { font-size: 15px; font-weight: 500; opacity: 0.7; font-style: normal; }
.estbox .s { font-size: 11.5px; line-height: 1.45; opacity: 0.6; margin-top: 6px; }
.estbox .s div + div { margin-top: 4px; }
.estbox .v.lose { color: var(--maroon); }
.estbox .v .m { font-family: "Work Sans", sans-serif; font-size: 14px; font-weight: 500; opacity: 0.75; margin-top: 2px; }
.estbox .lines { margin-top: 12px; display: grid; gap: 4px; font-size: 13px; }
.estbox .line { display: grid; grid-template-columns: 1fr auto 72px; gap: 8px; font-variant-numeric: tabular-nums; }
.estbox .line span:last-child, .estbox .line .kwh { text-align: right; }
.estbox .line .kwh { opacity: 0.55; }
.estbox .line.head { font-size: 11.5px; opacity: 0.55; }
.estbox .win { color: var(--teal); font-weight: 600; }
.estbox .lose { color: var(--maroon); font-weight: 600; }
.estbox .method { margin-top: 10px; font-size: 11.5px; line-height: 1.5; }
.estbox .method summary { cursor: pointer; opacity: 0.7; }
.estbox .method p { margin: 6px 0 0; opacity: 0.7; }
#panel .hint { font-size: 11.5px; opacity: 0.55; margin-top: 6px; }

.cta { margin-top: 20px; width: 100%; background: var(--teal); color: var(--paper); border: 0; text-align: center; padding: 13px 0; border-radius: 10px; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.cta:hover { background: var(--teal-dark); }
.caveat { margin-top: 16px; font-size: 11px; line-height: 1.5; opacity: 0.5; }

/* maplibre's own chrome, toned down to match */
.maplibregl-ctrl-attrib { font-size: 10px; border-radius: 8px 0 0 0; }
.maplibregl-ctrl-bottom-right { z-index: 5; }