/* ============================================================================
   app.css - layout + component classes for the Home Energy Planner.

   The old prototype inlined every style; here they are named classes so the
   markup in js/screens/*.js stays readable and restyling happens in one place.
   Dynamic values (a computed colour, a bar width) are still set inline from JS.
   ============================================================================ */

/* ---- shell ---------------------------------------------------------------- */
.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .spacer { flex: 1; }
.topbar .divider { width: 1px; height: 22px; background: var(--line); }

.brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--ink);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-1);
}
.brand-mark > i {
  width: 11px; height: 11px; border-radius: 50%; background: var(--sun);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sun) 30%, transparent);
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; line-height: 1.05; }
.brand-sub { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

.status-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 99px;
  padding: 6px 13px 6px 11px; box-shadow: var(--sh-1);
}
.status-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.status-chip .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--ink-2); }

/* segmented control (EN/DE, scenario tabs) */
.seg-group { display: flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 99px; padding: 3px; }
.seg-group.raised { box-shadow: var(--sh-1); }
.seg {
  border: none; cursor: pointer; padding: 6px 13px; border-radius: 99px;
  font-size: 12px; font-weight: 600; white-space: nowrap; transition: .15s;
  background: transparent; color: var(--ink-2);
}
.seg[data-active] { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* project switcher */
.project-select {
  border: 1px solid var(--line); background: var(--surface); border-radius: 99px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; box-shadow: var(--sh-1); max-width: 180px;
}
.icon-btn { cursor: pointer; font-size: 13px; padding: 6px 11px; line-height: 1; transition: .15s; }
.icon-btn:hover { border-color: var(--clay-soft); background: var(--clay-tint); }

/* ---- main / container ----------------------------------------------------- */
.main { flex: 1; min-width: 0; }
.container { max-width: 880px; margin: 0 auto; padding: 34px 32px 90px; }
.container.wide { max-width: 1060px; }
.screen { animation: fade-in .25s ease; }

/* ---- typography helpers --------------------------------------------------- */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sun-2); margin-bottom: 9px; }
.eyebrow.muted { color: var(--ink-3); }
.eyebrow.leaf { color: var(--leaf); }
.display { font-family: var(--serif); font-weight: 400; line-height: 1.02; margin: 0; }
h1.display { font-size: 40px; }
.lead { font-size: 15.5px; color: var(--ink-2); max-width: 52ch; margin: 0 0 26px; line-height: 1.5; }
.mono { font-family: var(--mono); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; margin-bottom: 16px; font-weight: 600; }
.back-link:hover { color: var(--ink); }

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 99px; font-weight: 600; cursor: pointer; transition: .15s;
  border: 1px solid transparent; font-size: 14.5px; padding: 13px 24px;
}
/* --sun (#bd7414) under white text measures 3.7:1 - under WCAG AA's 4.5:1 for this button's
   ~15px label (not "large text" by the 18.66px/bold threshold). --sun-2, already the
   darker-accent token used for text elsewhere in this palette, measures 4.8:1 - --sun itself
   is untouched (still used for sliders/focus/every other CTA-adjacent accent) so this is
   scoped to the one place text sits directly on it. Roadmap F11 contrast audit, 2026-08-10. */
.btn-primary { background: var(--sun-2); color: #fff; box-shadow: var(--sh-1); }
.btn-primary:hover { background: #8f540c; }
.btn-ghost { background: var(--surface); color: var(--ink-2); border-color: var(--line); padding: 13px 20px; font-size: 14px; }
.btn-ghost:hover { border-color: var(--line-2); color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #3a3226; }
.btn-cta { padding: 15px 26px; font-size: 15px; box-shadow: 0 8px 20px -6px rgba(189, 116, 20, .6); }

.nav-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
}

/* ---- cards ---------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-1); }
.card-title { font-weight: 650; font-size: 15px; margin-bottom: 16px; }

/* mono avatar tile shared by hub/existing/upgrades/results */
.tile {
  border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 700; flex-shrink: 0;
}

/* ---- forms ---------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.input {
  width: 100%; border: 1px solid var(--line-2); background: var(--surface-2);
  border-radius: var(--r-md); padding: 12px 14px; font-size: 14.5px; color: var(--ink); outline: none;
}
.input:focus { border-color: var(--sun); background: var(--surface); }
.field + .field { margin-top: 16px; }

.chip {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
  font-weight: 600; font-size: 13px; padding: 9px 14px; border-radius: 99px; cursor: pointer; transition: .15s;
}
.chip[data-active] { border-color: var(--sun); background: var(--sun-tint); color: var(--sun-2); }

.step-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2);
  background: var(--surface-2); font-size: 22px; color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.step-btn:hover { border-color: var(--sun); color: var(--sun-2); }

.note {
  padding: 13px 15px; border-radius: var(--r-md); font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.note.sun { background: var(--sun-tint); border: 1px solid var(--sun-soft); }
.note.leaf { background: var(--leaf-tint); border: 1px solid var(--leaf-soft); }
.note.clay { background: var(--clay-tint); border: 1px solid var(--clay-soft); }

/* Info-box tooltip (roadmap F18, js/tooltip.js) - CSS-only hover/focus popover. */
.tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-left: 5px; vertical-align: middle;
  background: var(--paper-2); color: var(--ink-3); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 10px; font-style: italic; font-weight: 700;
  cursor: help; position: relative; outline: none;
}
.tip:hover, .tip:focus-visible { background: var(--sun-tint); color: var(--sun-2); border-color: var(--sun-soft); }
.tip-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
  width: max-content; min-width: 160px; max-width: 240px;
  background: var(--ink); color: #fff; font-family: var(--sans); font-size: 12px; font-style: normal;
  font-weight: 400; line-height: 1.45; text-align: left; padding: 9px 11px; border-radius: var(--r-md);
  box-shadow: var(--sh-1); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 20;
}
.tip-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.tip:hover .tip-bubble, .tip:focus .tip-bubble, .tip:focus-within .tip-bubble {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}

/* toggle switch (upgrade consider) */
.switch { width: 44px; height: 26px; border-radius: 99px; position: relative; cursor: pointer; transition: .2s; flex-shrink: 0; background: var(--line-2); }
.switch[data-on] { background: var(--sun); }
.switch > i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: var(--sh-1); }
.switch[data-on] > i { left: 21px; }
.switch.sm { width: 34px; height: 20px; }
.switch.sm > i { width: 14px; height: 14px; top: 3px; left: 3px; }
.switch.sm[data-on] > i { left: 17px; }

/* ---- hub ------------------------------------------------------------------ */
.hub-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.progress-pill { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 7px 8px 7px 16px; box-shadow: var(--sh-1); font-size: 12.5px; color: var(--ink-2); }
.progress-pill .sep { height: 16px; width: 1px; background: var(--line); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 16px; margin-bottom: 22px; }
.hub-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; cursor: pointer; box-shadow: var(--sh-1); transition: transform .18s, box-shadow .18s, border-color .18s; }
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.hub-card .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hub-card .title { font-weight: 650; font-size: 16px; margin-bottom: 4px; }
.hub-card .summary { font-size: 13px; color: var(--ink-2); line-height: 1.45; min-height: 37px; }
.hub-card .action { margin-top: 14px; font-size: 12.5px; font-weight: 600; color: var(--sun-2); }

.badge-done { font-size: 11px; font-weight: 700; color: var(--leaf); background: var(--leaf-tint); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.badge-todo { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); padding: 3px 8px; border-radius: 99px; }

/* The sixth tile: this project's plan. Spans the whole grid row - it is the outcome the
   five setup tiles feed, and it carries the primary CTA when there is no plan yet. */
.plan-tile { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 24px 26px; }
.plan-tile .f1 { min-width: 240px; }
.plan-tile .title { font-family: var(--serif); font-size: 25px; line-height: 1.1; margin-bottom: 4px; font-weight: 400; }
.plan-tile .body { font-size: 13.5px; color: var(--ink-2); max-width: 46ch; line-height: 1.45; }
.plan-tile .plan-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }

/* No plan yet - the build CTA lives here (it used to be a separate always-on banner). */
.plan-tile.empty { background: linear-gradient(120deg, #241f18, #3a3226); border-color: transparent; box-shadow: var(--sh-2); cursor: default; }
.plan-tile.empty:hover { transform: none; }
.plan-tile.empty .title { color: #fff; font-size: 27px; }
.plan-tile.empty .body { color: rgba(255,255,255,.62); }

.plan-tile.ready { background: var(--leaf-tint); border-color: var(--leaf-soft); }
.plan-tile.ready:hover { border-color: var(--leaf); }
.plan-tile.running { background: var(--sun-tint); border-color: var(--sun-soft); }
.plan-tile.loading, .plan-tile.sample { cursor: default; }
.plan-tile.loading:hover { transform: none; box-shadow: var(--sh-1); }
.plan-tile.loading .title, .plan-tile.running .title, .plan-tile.sample .title { font-family: var(--sans); font-size: 14.5px; color: var(--ink-2); font-weight: 500; max-width: 52ch; }

.plan-kpis { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; }
.plan-kpis .kv { min-width: 0; }
.plan-kpis .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.plan-kpis .v { font-family: var(--serif); font-size: 26px; line-height: 1; }
.plan-kpis .v .u { font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin-left: 2px; }

/* ---- roof faces table (name/area/tilt/azimuth, per row) -------------------- */
.roof-row { display: flex; align-items: center; gap: 8px; }
.roof-name { flex: 2; min-width: 0; }
.roof-num { flex: 1; min-width: 0; }
.roof-del { flex: none; width: 28px; }

/* ---- location map card (Leaflet + OSM, roadmap F7) ------------------------- */
.two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
.map-card { background: var(--ink); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); position: relative; min-height: 420px; }
.map-frame { position: absolute; inset: 0; z-index: 0; }
/* Leaflet's own container/panes/controls - kept close to defaults, just themed to fit. */
.map-frame.leaflet-container { background: var(--ink); font-family: var(--sans); }
.map-frame .leaflet-control-attribution { background: rgba(36,31,24,.72); color: rgba(255,255,255,.75); font-size: 10.5px; }
.map-frame .leaflet-control-attribution a { color: rgba(255,255,255,.9); }
.map-card .coords { position: absolute; left: 16px; bottom: 14px; z-index: 1; pointer-events: none; }
.map-card .coords .k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 3px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.map-card .coords .v { font-family: var(--mono); font-size: 12.5px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.map-card .region { position: absolute; top: 14px; left: 16px; z-index: 1; pointer-events: none; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.75); text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* ---- home / prices -------------------------------------------------------- */
.price-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.price-val { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--sun-2); }

/* ---- household ------------------------------------------------------------ */
.stepper { display: flex; align-items: center; gap: 16px; }
.stepper .count { font-family: var(--serif); font-size: 46px; line-height: 1; width: 56px; text-align: center; }
.person-chip { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px 6px 6px; }
.person-chip .av { width: 26px; height: 26px; border-radius: 50%; background: var(--leaf-soft); color: var(--leaf); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.person-chip input { border: none; background: transparent; font-size: 13px; color: var(--ink-2); width: 8ch; outline: none; }
.person-chip input:focus { border-bottom: 1px solid var(--sun); }
.tag-optional { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); background: var(--leaf-tint); padding: 2px 7px; border-radius: 99px; }
.time-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.time-cell { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 12px; }
.time-cell input[type=time] { border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-sm); padding: 5px 8px; font-family: var(--mono); font-size: 12px; color: var(--ink); }
.chev { font-size: 22px; color: var(--ink-3); transition: .2s; }
.chev[data-open] { transform: rotate(180deg); }

/* ---- household person blocks ---------------------------------------------- */
.person-block { border: 1px solid transparent; border-radius: var(--r-md); padding: 4px; transition: .15s; }
.person-block[data-open] { border-color: var(--line); background: var(--surface-2); padding: 12px; }
/* the rounded name pill */
.person-chip { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; padding: 6px 16px 6px 6px; min-width: 0; }
.person-block[data-open] .person-chip { background: var(--surface); }
.person-chip:focus-within { border-color: var(--sun); }
.person-name { border: none; background: transparent; font-size: 14px; font-weight: 600; color: var(--ink); width: 11ch; outline: none; }
.person-name::placeholder { color: var(--ink-3); font-weight: 500; }
.av { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--leaf-soft); color: var(--leaf); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.routine-toggle { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 99px; padding: 7px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.routine-toggle:hover, .routine-toggle[data-open] { border-color: var(--line-2); color: var(--ink); }
.routine-toggle .chev { font-size: 16px; }

/* ---- existing / upgrades cards -------------------------------------------- */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; max-width: 840px; }
.infra-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 18px; cursor: pointer; transition: .15s; box-shadow: var(--sh-1); }
.infra-card[data-on] { border-color: var(--line-2); }
.infra-card:not([data-on]) { opacity: .55; }
.infra-card .row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.infra-card .name { font-weight: 600; font-size: 14.5px; margin-bottom: 3px; }
.infra-card .detail { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.check { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 1.5px solid var(--line-2); color: transparent; }
.check[data-on] { background: var(--leaf); color: #fff; border-color: var(--leaf); }
.infra-edit { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-field label { font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); display: block; margin-bottom: 3px; }
.mini-field input { width: 100%; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: var(--r-sm); padding: 6px 8px; font-size: 12.5px; color: var(--ink); outline: none; }
.replace-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.replace-row.compact { margin-top: 10px; }
.btn-remove { grid-column: 1 / -1; justify-self: start; border: 1px solid var(--clay-soft); background: transparent; color: var(--clay); border-radius: 99px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-remove:hover { background: var(--clay-soft); }
.add-infra { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 840px; }

.catalog-list { display: flex; flex-direction: column; gap: 13px; max-width: 820px; }
.catalog-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); transition: .15s; overflow: hidden; }
.catalog-card[data-on] { border-color: var(--line-2); box-shadow: var(--sh-1); }
.catalog-card .head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.catalog-card .name { font-weight: 650; font-size: 16px; }
.catalog-card .desc { font-size: 13px; color: var(--ink-2); line-height: 1.4; }
.opts-toggle { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; user-select: none; }
.offers { padding: 4px 20px 20px 82px; display: flex; flex-direction: column; gap: 12px; }
.offers-hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.offer-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.offer { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); padding: 10px 15px; cursor: pointer; transition: .15s; min-width: 96px; }
.offer[data-active] { border-color: var(--sun); background: var(--sun-tint); }
.offer .offer-body { flex: 1; }
.offer .cap { font-family: var(--mono); font-size: 15px; font-weight: 700; }
.offer .vendor { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.offer .price { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.offer .tick { flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-2); display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; color: transparent; margin-top: 1px; }
.offer[data-active] .tick { background: var(--sun); border-color: var(--sun); color: #fff; }

/* ---- optimize ------------------------------------------------------------- */
.optimize { max-width: 560px; margin: 5vh auto 0; text-align: center; }
.spinner { width: 74px; height: 74px; margin: 0 auto 26px; position: relative; }
.spinner .ring { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--line); }
.spinner .arc { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--sun); border-right-color: transparent; border-bottom-color: transparent; animation: spin 1s linear infinite; }
.spinner .core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.spinner .core > i { width: 11px; height: 11px; border-radius: 50%; background: var(--sun); }
.opt-steps { display: flex; flex-direction: column; gap: 9px; max-width: 380px; margin: 0 auto; text-align: left; }
.opt-step { display: flex; align-items: center; gap: 11px; font-size: 13.5px; }
.opt-dot { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.opt-dot.done { background: var(--leaf); color: #fff; }
.opt-dot.active { border: 2px solid var(--sun); border-right-color: transparent; animation: spin .9s linear infinite; }
.opt-dot.todo { border: 2px solid var(--line-2); }

/* elapsed-time / patience / cancel on the optimize screen (roadmap F10) */
.opt-elapsed-row { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 24px; font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.opt-elapsed-row #opt-elapsed { font-size: 15px; }
.opt-patience { max-width: 42ch; margin: 10px auto 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.opt-cancel-note { margin-top: 8px; font-size: 11px; color: var(--ink-3); }

/* honest failure card (F10 real-errors-over-demo) */
.opt-fail-mark { width: 60px; height: 60px; margin: 0 auto 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--clay-tint); color: var(--clay); border: 1px solid var(--clay-soft); font-family: var(--serif); font-size: 34px; line-height: 1; }
.opt-fail-detail { max-width: 52ch; margin: 4px auto 0; padding: 11px 14px; border-radius: var(--r-md); background: var(--clay-tint); border: 1px solid var(--clay-soft); color: var(--clay); font-size: 12.5px; word-break: break-word; text-align: left; }

/* topbar running/failed job chip (clickable) */
.job-chip { cursor: pointer; }
.job-chip .dot.spin { animation: pulse 1.1s ease-in-out infinite; }

/* ---- results -------------------------------------------------------------- */
.banner { display: flex; align-items: flex-start; gap: 12px; border-radius: var(--r-md); padding: 13px 16px; margin-bottom: 20px; }
.banner .icon { font-size: 15px; line-height: 1.2; }
.banner .title { font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.banner .body { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.banner.demo { background: var(--sun-tint); border: 1px solid var(--sun-soft); }
.banner.live { background: var(--leaf-tint); border: 1px solid var(--leaf-soft); }

.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.kpi-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }
/* four tiles (phased plan: savings · payback · total · autarky) */
.kpi-grid.four { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.kpi { border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sh-1); display: flex; flex-direction: column; justify-content: center; background: var(--surface); border: 1px solid var(--line); }
.kpi.hero { background: linear-gradient(135deg, #3d7a51, #2f6440); color: #fff; padding: 24px 26px; box-shadow: var(--sh-2); }
.kpi .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.kpi.hero .k { color: rgba(255,255,255,.7); }
.kpi .big { font-family: var(--serif); font-size: 40px; line-height: .95; }
.kpi.hero .big { font-size: min(6vw, 52px); }
.kpi .sub { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.kpi.hero .sub { color: rgba(255,255,255,.78); font-size: 13.5px; margin-top: 8px; }

.results-body { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; align-items: start; }
.plot-frame { width: 100%; height: 320px; border-radius: var(--r-md); background: #fff; }
.plot-frame-tall { height: 520px; }
.legend { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.legend .item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); }
.legend .swatch { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
.tick-row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }

.buy-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.buy-row .name { font-size: 13.5px; font-weight: 600; }
.buy-row .detail { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.buy-row .price { font-family: var(--mono); font-size: 13px; font-weight: 700; }
.buy-total { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; }
.buy-total .big { font-family: var(--serif); font-size: 24px; }

.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.kv { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.kv .k { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px; }
.kv .v { font-size: 16px; font-weight: 700; color: var(--ink); }

/* ---- planning horizon (multi-period input) -------------------------------- */
.stepper.mini { gap: 12px; }
.stepper.mini .count { font-size: 22px; width: 30px; }
.step-btn.sm { width: 34px; height: 34px; font-size: 18px; }

/* ---- phased (multi-period) results ---------------------------------------- */
.phase-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.phase-card { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--sun); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-1); }
.phase-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.phase-year { font-family: var(--serif); font-size: 30px; line-height: 1; display: flex; align-items: baseline; gap: 10px; }
.phase-final { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); background: var(--leaf-tint); padding: 3px 8px; border-radius: 99px; }
.phase-spend { font-family: var(--mono); font-weight: 700; font-size: 15px; text-align: right; }
.phase-spend-k { display: block; font-weight: 400; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
.phase-buys { margin-top: 12px; display: flex; flex-direction: column; }
.phase-buys .buy-row:last-child { border-bottom: none; }
.phase-foot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.phase-caps-k { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.phase-kv { display: flex; gap: 10px; }
.phase-kv .kv { min-width: 108px; margin: 0; }

/* ---- small utilities ------------------------------------------------------ */
.flex { display: flex; }
.ac { align-items: center; }
.jb { justify-content: space-between; }
.gap8 { gap: 8px; } .gap10 { gap: 10px; } .gap12 { gap: 12px; }
.wrap { flex-wrap: wrap; }
.f1 { flex: 1; }
.mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .mt22 { margin-top: 22px; }
.mb16 { margin-bottom: 16px; }

/* ---- debug panel (config.debug only) -------------------------------------- */
.debug-panel {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: min(460px, calc(100vw - 32px));
  background: #1c1a15; color: #e9e2d2; border: 1px solid #3a352b;
  border-radius: var(--r-md); box-shadow: var(--sh-3); overflow: hidden;
  font-family: var(--mono);
}
.debug-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: #252118; border-bottom: 1px solid #3a352b; font-size: 11px; letter-spacing: .04em; }
.debug-btn { border: 1px solid #4a4437; background: transparent; color: #cdbf9f; border-radius: 6px; padding: 3px 9px; font-family: var(--mono); font-size: 10.5px; cursor: pointer; }
.debug-btn:hover { background: #322c20; }
.debug-body { max-height: min(52vh, 460px); overflow: auto; padding: 6px; }
.debug-empty { padding: 18px 12px; font-size: 11.5px; color: #9a9080; text-align: center; }
.debug-entry { border: 1px solid #322c20; border-radius: 6px; margin: 6px 2px; overflow: hidden; }
.debug-entry.req { border-left: 3px solid var(--sun); }
.debug-entry.res { border-left: 3px solid var(--leaf); }
.debug-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 9px; font-size: 11px; background: #232019; }
.debug-badge { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.debug-badge.req { background: color-mix(in srgb, var(--sun) 30%, #232019); color: #f4d9a8; }
.debug-badge.res { background: color-mix(in srgb, var(--leaf) 30%, #232019); color: #bfe0c6; }
.debug-ts { color: #8c8470; margin-left: auto; }
.debug-status.ok { color: #8fd39c; } .debug-status.bad { color: #e79b8a; }
/* A chart that hasn't arrived yet. The numbers around it are already on screen - charts are
   fetched separately because each is up to a few MB (see js/plots.js). */
.chart-pending { display: flex; align-items: center; justify-content: center; gap: 14px; height: 240px;
  border: 1px dashed var(--line-2); border-radius: var(--r-md); background: var(--surface-2);
  font-size: 13px; color: var(--ink-3); }
.chart-pending.failed { color: var(--clay); border-color: var(--clay-soft); }
.btn.btn-sm { padding: 5px 12px; font-size: 12px; }

/* time · size of a response - the pair that explains a slow-feeling call */
.debug-cost { color: #b7ad95; } .debug-cost.slow { color: #e7c78a; font-weight: 700; }
.debug-entry pre { margin: 0; padding: 8px 10px; font-size: 10.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; color: #d8cfb9; max-height: 240px; overflow: auto; }

/* ---- jobs panel (roadmap F10 "see & cancel running jobs") ------------------ */
.jobs-btn { cursor: pointer; }
.jobs-overlay { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center; padding: 64px 16px 16px; }
.jobs-backdrop { position: absolute; inset: 0; background: rgba(28, 24, 18, .34); backdrop-filter: blur(2px); }
.jobs-panel { position: relative; width: min(480px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; animation: fade-in .2s ease; }
.jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.jobs-title { font-family: var(--serif); font-size: 21px; line-height: 1; }
.jobs-subtitle { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-3); margin-top: 5px; }
.jobs-body { overflow: auto; padding: 8px; }
.jobs-empty { padding: 26px 18px; font-size: 13px; color: var(--ink-3); text-align: center; line-height: 1.5; }
.job-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-md); }
.job-row + .job-row { border-top: 1px solid var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }
.job-main { flex: 1; min-width: 0; }
.job-project { font-weight: 600; font-size: 13.5px; }
.job-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.job-actions { display: flex; gap: 8px; flex-shrink: 0; }
.job-pill { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.job-pill.run { background: var(--sun-soft); color: var(--sun-2); }
.job-pill.done { background: var(--leaf-soft); color: var(--leaf); }
.job-pill.fail { background: var(--clay-soft); color: var(--clay); }
.job-pill.canc { background: var(--paper-2); color: var(--ink-3); }
.btn-jobs { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 99px; padding: 6px 13px; font-size: 12px; font-weight: 600; cursor: pointer; }
.btn-jobs:hover { border-color: var(--line-2); color: var(--ink); }
.btn-jobs.cancel { border-color: var(--clay-soft); color: var(--clay); }
.btn-jobs.cancel:hover { background: var(--clay-soft); }
.btn-jobs.watch { border-color: var(--sun-soft); color: var(--sun-2); }
.btn-jobs.watch:hover { background: var(--sun-tint); }

/* ---- auth screens & account (roadmap F1b) --------------------------------- */
.auth-wrap { max-width: 430px; margin: 6vh auto 0; }
.auth-card { padding: 30px 30px 26px; animation: fade-in .25s ease; }
.auth-title { font-size: 32px; margin-bottom: 8px; }
.auth-lead { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 22px; }
.auth-field { display: block; }
.auth-field + .auth-field { margin-top: 14px; }
.auth-field .input { width: 100%; }
.auth-hint { font-size: 12px; color: var(--ink-3); line-height: 1.45; margin-top: 9px; }
.auth-actions { margin-top: 20px; }
.btn.block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .6; cursor: default; }
.auth-links { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.link-btn { border: none; background: none; padding: 0; font: inherit; font-weight: 650; color: var(--sun-2); cursor: pointer; }
.link-btn:hover { color: var(--sun); text-decoration: underline; }
.auth-msg { border-radius: var(--r-md); padding: 11px 14px; font-size: 12.5px; line-height: 1.45; margin-bottom: 18px; }
.auth-msg.bad { background: var(--clay-tint); border: 1px solid var(--clay-soft); color: var(--clay); }
.auth-msg.good { background: var(--leaf-tint); border: 1px solid var(--leaf-soft); color: var(--leaf); }
.auth-address { font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; word-break: break-all; }
.auth-mark { width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 28px; line-height: 1; }
.auth-mark.ok { background: var(--leaf-tint); border: 1px solid var(--leaf-soft); color: var(--leaf); }
.auth-mark.bad { background: var(--clay-tint); border: 1px solid var(--clay-soft); color: var(--clay); }
.auth-splash { text-align: center; margin-top: 8vh; }

.account-chip { cursor: pointer; max-width: 210px; }
.account-chip .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-id { display: flex; align-items: center; gap: 14px; }
.account-email { font-size: 16px; font-weight: 650; margin-top: 2px; word-break: break-all; }
.account-uid { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.account-out { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-1); }

/* ---- responsive ----------------------------------------------------------- */
/* Four KPI tiles need more room than three - drop to 2×2 before everything else stacks. */
@media (max-width: 1040px) {
  .kpi-grid.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .container { padding: 24px 18px 80px; }
  .two-col, .grid-2, .kpi-grid, .kpi-grid.four, .results-body { grid-template-columns: 1fr; }
  h1.display { font-size: 32px; }
  /* The topbar's chip row (jobs/status/project-switcher/account/lang) is sized for a
     desktop-width single line (roadmap F11 responsive audit) - on a phone it no longer
     fits and, being a plain nowrap flex row, pushed the whole page into horizontal
     scroll instead of just breaking to a second line. flex-wrap only ever activates once
     content stops fitting, so this is a no-op at tablet/desktop widths. */
  .topbar { padding: 12px 16px; gap: 10px; flex-wrap: wrap; row-gap: 8px; }
  .brand-sub { display: none; }
  /* Catalog card header (icon + name/desc + product-count/switch): the name/desc block
     has min-width:0 so, kept on one nowrap line with the other two, it was squeezed down
     to a one-word-per-line sliver instead of the row wrapping. Same fix as .topbar above,
     plus forcing the trailing count+switch group onto its own full-width line rather than
     letting the wrap algorithm re-squeeze it against the icon. */
  .catalog-card .head { flex-wrap: wrap; row-gap: 10px; }
  .catalog-card .head > *:last-child { flex-basis: 100%; justify-content: space-between; }
  /* Roof-faces table (name/area/tilt/azimuth inputs in one row): four columns plus a
     delete button don't fit a phone width. Stack name full-width, the three numeric
     columns as a row beneath it - mirrors the .mini-field label/input pattern used for
     existing-infra editing elsewhere in this file. */
  .roof-row { flex-wrap: wrap; row-gap: 6px; }
  .roof-name { flex-basis: 100%; }
  .roof-num { flex: 1 1 0; }
  /* .tip-bubble centers itself under its icon (left:50%+translateX(-50%)), which is fine
     when there's ~120px clear on both sides but not on a small screen: several tips (e.g.
     existing.js's "Replace if a better option pays off") sit near a narrow card's right
     edge, pushing the centered 240px bubble off the right of the viewport. Icon-relative
     centering can't be clamped to the viewport in CSS alone (the icon's offset parent
     isn't the viewport), so below this width the bubble becomes a fixed bottom sheet
     instead - anchored to the viewport's own edges, which no icon position can overflow. */
  .tip-bubble {
    position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto;
    width: auto; max-width: none; min-width: 0;
    transform: translateY(6px); z-index: 90;
  }
  .tip:hover .tip-bubble, .tip:focus .tip-bubble, .tip:focus-within .tip-bubble { transform: translateY(0); }
  .tip-bubble::after { display: none; }
}