:root {
  --bg: #0b0d11;
  --nav: #0e1014;
  --surface: #15181e;
  --surface-2: #1b1f26;
  --border: #252a32;
  --border-soft: #1e222a;
  --text: #f3f4f6;
  --muted: #8b91a0;
  --faint: #565c69;
  --brand: #8dc63f;
  --brand-dark: #3faa47;
  --brand-tint: rgba(141, 198, 63, 0.14);
  --blue: #5b9df6;
  --blue-tint: rgba(91, 157, 246, 0.14);
  --violet: #9b8cf9;
  --violet-tint: rgba(155, 140, 249, 0.14);
  --green: #4fd08a;
  --green-tint: rgba(79, 208, 138, 0.14);
  --danger: #f0715a;
  --sun: #f5c452;
  --morning: #8dc63f;
  --midday: #5b9df6;
  --evening: #9b8cf9;
  --radius: 14px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.mono { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; font-variant-numeric: tabular-nums; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
}

h1 { font-size: 1.3rem; margin: 0; font-weight: 800; }
h2 { font-size: 1.05rem; margin: 0 0 4px; font-weight: 700; }
.muted { color: var(--muted); font-size: 0.9rem; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon {
  font-size: 1rem; width: 26px; height: 26px; border-radius: 8px;
  background: var(--brand-tint); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-logo { padding: 4px; object-fit: contain; }

/* Login */
.center-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
}
.login-card { width: 100%; max-width: 360px; }
.login-card .subtitle { margin: 8px 0 20px; color: var(--muted); font-size: 0.9rem; }
.login-card label { display: block; margin-bottom: 14px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.login-card input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 0.95rem;
  background: var(--surface-2);
  color: var(--text);
}
.login-card input:focus { outline: none; border-color: var(--brand); }
.error-text { color: var(--danger); font-size: 0.85rem; margin-top: 10px; }

.btn-primary, .btn-secondary, .btn-ghost {
  cursor: pointer;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 10px 16px;
  border: 1px solid transparent;
  font-family: inherit;
}
.btn-primary { background: var(--text); color: #111318; width: 100%; }
.btn-primary:hover { background: var(--brand); color: #0d1a08; }
.btn-secondary { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.btn-ghost:hover { color: var(--text); }
.btn-primary.is-loading, .btn-secondary.is-loading, .btn-ghost.is-loading {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: default;
}
/* Inside a button the sun matches the button's own text color rather than its usual gold — gold
   reads fine on a status line's dark surface but can wash out against .btn-primary's light fill. */
.btn-primary.is-loading .loading-sun, .btn-secondary.is-loading .loading-sun, .btn-ghost.is-loading .loading-sun { color: currentColor; }

/* App shell */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: var(--nav);
  border-bottom: 1px solid var(--border-soft);
}
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 0.9rem; color: var(--muted); }

.account-menu { position: relative; }
.account-avatar {
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand-tint); color: var(--brand); font-weight: 800; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.account-avatar:hover { background: var(--brand); color: #0d1a08; }
.account-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
}
.account-dropdown-header { padding: 2px 4px 10px; }
.account-name { font-weight: 800; font-size: 1rem; color: var(--text); }
.account-role { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: var(--faint); margin-top: 2px; }
.account-dropdown-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.account-dropdown-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 9px 4px; font-size: 0.88rem; font-weight: 600; color: var(--text);
  cursor: pointer; border-radius: 8px; font-family: inherit;
}
.account-dropdown-item:hover { background: var(--surface-2); }
.account-dropdown-item.danger { color: var(--danger); }

.tabbar {
  display: flex;
  gap: 4px;
  padding: 0 28px;
  background: var(--nav);
  border-bottom: 1px solid var(--border-soft);
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 12px 6px;
  margin-right: 20px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }

.content { max-width: 1080px; margin: 0 auto; padding: 24px 20px 60px; }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  color: var(--muted);
  margin-top: 16px;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.dragover { border-color: var(--brand); background: var(--brand-tint); }
.file-label { display: inline-block; margin-top: 10px; }

.or-divider { text-align: center; color: var(--faint); font-size: 0.8rem; margin: 16px 0; }

.inline-form { display: flex; gap: 10px; }
.inline-form input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 0.9rem;
  background: var(--surface-2);
  color: var(--text);
}

.status-text { margin-top: 14px; font-size: 0.9rem; color: var(--muted); }
.status-text.error { color: var(--danger); }
.status-text.success { color: var(--green); }
.status-text.loading { display: flex; align-items: center; gap: 8px; }

/* A little spinning, pulsing sun — the shared "something is loading" indicator, used anywhere a
   fetch/analysis is in flight (report generation, roof analysis, list loads, login, ...) instead
   of a plain text-only status. Rotates as a whole for the "spinning" read, while the sun's own
   core pulses independently so it doesn't just look like a static icon stuck spinning. */
.loading-sun { display: inline-flex; flex: none; color: var(--sun); }
.loading-sun svg { animation: loading-sun-spin 2.4s linear infinite; transform-origin: 50% 50%; }
.loading-sun svg circle { animation: loading-sun-pulse 1.2s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes loading-sun-spin { to { transform: rotate(360deg); } }
@keyframes loading-sun-pulse { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .loading-sun svg, .loading-sun svg circle { animation: none; }
}

.loading-block { display: flex; align-items: center; gap: 8px; }

.note-banner {
  background: var(--brand-tint);
  border: 1px solid rgba(226, 162, 77, 0.35);
  color: var(--brand);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 0.85rem;
  margin: 10px 0 0;
}

.sheet-select-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.card-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.sheet-select { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.sheet-select select {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 0.9rem;
  min-width: 220px;
  background: var(--surface-2);
  color: var(--text);
}

.chart-wrap { margin-top: 12px; height: 340px; }

.profile-segment-row { display: flex; gap: 20px; flex-wrap: wrap; margin: 4px 0 10px; }
.seg-item { display: flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--muted); }
.seg-item strong { color: var(--text); }
.seg-item .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* Replaces Chart.js's own legend, which has no way to widen the gap between a marker and its
   own label (only the space between separate items) — full control via plain flexbox instead. */
.chart-legend { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--muted); }
.chart-legend-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid; flex: none; }

/* Landing / create-report CTA */
.landing-card {
  text-align: center;
  padding: 56px 24px;
}
.brand-icon-lg {
  width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 16px;
  background: var(--brand-tint); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.landing-card h2 { font-size: 1.4rem; margin-bottom: 8px; }
.landing-card .muted { max-width: 46ch; margin: 0 auto 22px; }
.landing-card .btn-primary { width: auto; padding: 12px 26px; font-size: 0.95rem; }

/* Report creation form */
.form-section { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--border-soft); }
.form-section:last-of-type { border-bottom: none; margin-bottom: 8px; padding-bottom: 0; }
.form-section h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 700;
}
.form-section h3 .fi { color: var(--brand); flex: none; }
.optional-tag {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  color: var(--faint);
}
#report-form > .form-section:first-child { margin-top: 4px; }
.form-section .dropzone { margin-top: 10px; }

.building-block {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; margin-bottom: 16px;
}
.building-block:last-child { margin-bottom: 0; }
.building-block-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.building-name-input {
  flex: 1; font-size: 0.95rem; font-weight: 700; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text);
}
.building-block .spec-form { margin-top: 0; }
.building-block .bill-candidates { margin-top: 10px; }
.form-section > input[type="url"] {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 0.9rem;
  background: var(--surface-2);
  color: var(--text);
}
.bill-candidates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bill-candidate-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  max-width: 260px;
  font-family: inherit;
}
.bill-candidate-chip:hover { border-color: var(--brand); }
.bill-candidate-chip.selected { border-color: var(--brand); background: var(--brand-tint); }
.bill-candidate-chip strong { font-size: 0.88rem; color: var(--text); }
.bill-candidate-chip span { font-size: 0.75rem; color: var(--muted); overflow-wrap: anywhere; }

.price-field {
  display: block;
  max-width: 240px;
  margin-top: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.price-field input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 0.92rem;
  background: var(--surface-2);
  color: var(--text);
}
.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; }

.spec-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 16px;
  margin-top: 16px;
  align-items: start;
}
.spec-form label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.spec-form input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font-size: 0.92rem;
  background: var(--surface-2);
  color: var(--text);
}
.spec-submit { grid-column: 1 / -1; justify-self: start; }
.checkbox-field { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-field input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 19px; height: 19px; margin: 0; padding: 0;
  flex: none; display: inline-grid; place-content: center; border-radius: 6px;
  border: 1.5px solid var(--border); background: var(--surface-2); cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.checkbox-field input[type="checkbox"]:hover { border-color: var(--brand); }
.checkbox-field input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
.checkbox-field input[type="checkbox"]:checked::after {
  content: ""; width: 5px; height: 9px; border: solid #0b0d10; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.checkbox-field input[type="checkbox"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The two per-building toggles (30-minute data / power bill) sit side by side as short labels,
   not the old single full-sentence checkbox — compact-toggle keeps their text small and tight. */
.building-toggle-row { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 14px 0 4px; }
.compact-toggle span { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
/* Each building's usage/bill sub-sections are dense repeated blocks (up to two per building, times
   however many buildings a report has) — noticeably smaller dropzone padding and tighter dividers
   than the single one-off upload elsewhere in the app keep a multi-building form from sprawling. */
.usage-data-fields .dropzone,
.bill-fields .dropzone { padding: 14px; margin-top: 8px; }
.usage-data-fields .or-divider,
.bill-fields .or-divider { margin: 8px 0; }
.usage-data-fields, .bill-fields { margin-bottom: 4px; }
.field-hint { display: block; font-size: 0.76rem; font-weight: 500; color: var(--faint); margin-top: 4px; }
#sell-rate-hint { white-space: nowrap; }
.address-suggestions {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 4px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; max-height: 220px; overflow-y: auto;
}
.address-suggestion {
  display: block; width: 100%; text-align: left; padding: 9px 12px; font-size: 0.85rem;
  background: none; border: none; border-bottom: 1px solid var(--border-soft); color: var(--text); cursor: pointer;
}
.address-suggestion:last-child { border-bottom: none; }
.address-suggestion:hover { background: var(--surface); }
.address-map-field { grid-column: 1 / -1; margin-top: 4px; }
.address-map-preview { width: 100%; height: 220px; border-radius: 12px; overflow: hidden; background: var(--surface-2); margin-top: 6px; }
.building-map-field { margin: 14px 0; }
.file-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.file-status-row .status-text { margin: 0; }
.remove-file-btn { padding: 4px 10px; font-size: 0.8rem; flex: none; }
.blurb-textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px; font-size: 0.86rem; line-height: 1.5;
  background: var(--surface-2); color: var(--text); font-family: inherit; resize: vertical;
}

/* ---- Building selector (multi-building properties) ---- */
.building-selector { margin: -8px 0 28px; }
.building-selector-label { margin-bottom: 8px; }
.building-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.building-tab {
  padding: 7px 14px; border-radius: 99px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted); font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.building-tab:hover { color: var(--text); border-color: var(--muted); }
.building-tab.active { background: var(--brand-tint); border-color: var(--brand); color: var(--brand); }

/* ---- Report hero ---- */
.report-hero { margin-bottom: 28px; }
.report-wordmark { height: 28px; display: block; margin-bottom: 18px; }
.report-hero h1 { font-size: 1.8rem; letter-spacing: -0.01em; }
.report-hero .addr { color: var(--muted); font-size: 0.92rem; margin-top: 6px; }
.report-hero .meta { color: var(--faint); font-size: 0.78rem; margin-top: 10px; }

/* ---- Numbered section head ---- */
.divider { height: 1px; background: var(--border-soft); border: none; margin: 30px 0 16px; }

.sec-head { display: flex; align-items: baseline; gap: 12px; margin: 24px 0 16px; }
.sec-head:first-of-type { margin-top: 0; }
.sec-head .num { font-family: "IBM Plex Mono", monospace; color: var(--brand); font-weight: 700; font-size: 0.85rem; }
.sec-head h2 { font-size: 1.05rem; }
.sec-head .hint { margin-left: auto; font-size: 0.8rem; color: var(--faint); text-align: right; }
.sec-head.sec-hidden-head h2, .sec-head.sec-hidden-head .hint,
.card-head-row.sec-hidden-head h3, .card-head-row.sec-hidden-head .psub-inline,
.card-head-row.sec-hidden-head .results-label, .results-label.sec-hidden-head { opacity: 0.4; }

/* Eye toggle — lets a rep hide a section before exporting/printing the report */
.sec-toggle {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin-left: 8px;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--faint); cursor: pointer;
}
.sec-head .sec-toggle { margin-left: 12px; }
.sec-toggle:hover { color: var(--text); border-color: var(--muted); }
.sec-toggle.is-hidden { color: var(--brand); border-color: var(--brand); background: var(--brand-tint); }
@media print { .sec-toggle { display: none !important; } }

/* Generic bordered box — used sparingly now (just the Investment & return shell) */
.icard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column;
}

.roof-insights-card { margin-top: 16px; }
.roof-insights-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.roof-insights-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.roof-faces-editor { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.roof-faces-rows { display: flex; flex-direction: column; gap: 8px; }
.roof-face-row { display: grid; grid-template-columns: 1fr 100px 120px auto; gap: 8px; align-items: center; }
.roof-face-row select, .roof-face-row input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.88rem; background: var(--surface-2); color: var(--text);
}
.roof-face-remove-row {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  padding: 0; flex: none; color: var(--muted);
}
.roof-faces-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.roof-faces-editor-save { display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) { .roof-face-row { grid-template-columns: 1fr 1fr; } .roof-face-remove-row { justify-self: end; } }

.attachments-card { padding: 8px; gap: 0; }
.attachment-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 12px;
  border-radius: 10px; text-decoration: none; color: inherit;
}
.attachment-row:hover { background: var(--surface-2); }
.attachment-icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); color: var(--brand);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.attachment-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.attachment-name { font-size: 0.88rem; font-weight: 700; color: var(--text); }
.attachment-meta { font-size: 0.76rem; color: var(--faint); }

/* Investment & return splits into two boxes: the assumptions a rep can tweak, and — set apart in
   the brand colour since it's the number the whole page is building towards — the actual return. */
.assumptions-card { padding: 22px 22px 24px; margin-bottom: 20px; }
.results-card {
  padding: 22px 22px 24px;
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  margin-bottom: 20px;
}
.results-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--brand); margin-bottom: 16px;
}
/* When a .results-label doubles as a card-head-row (carries its own hide-section toggle, e.g.
   Suggested panel placement), cancel card-head-row's justify-content: space-between — this label's
   children are a flat icon/text/button run rather than card-head-row's usual two wrapper children,
   so space-between would scatter them instead of just pushing the toggle to the end. */
.results-label.card-head-row { justify-content: flex-start; }
/* .cost-guide-btn's own margin-left: auto is meant for a narrow, shrink-wrapped label (like
   Solar system size's .scol-label, centered inside a flex column with no free space to consume) —
   here .results-label is a full-width block, so that auto margin and the toggle's own auto margin
   below would split the row's real free space between them, landing the info button mid-row
   instead of snug against the title. Zeroing it out here lets the row's own gap place it right
   after the text, and leaves the toggle as the only element still pushed to the far right. */
.results-label .info-tip-btn { margin-left: 0; }
.results-label .sec-toggle { margin-left: auto; }
.results-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.disclaimer-note {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
}
.disclaimer-note-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint);
}
.disclaimer-note-label svg { color: var(--faint); flex: none; }
.disclaimer-note p { font-size: 0.78rem; color: var(--faint); margin: 0; }
.send-report-row { display: flex; justify-content: center; margin-top: 18px; }
.send-report-row .btn-primary { width: auto; padding-left: 22px; padding-right: 22px; }
.self-consume-note { font-size: 0.78rem; color: var(--faint); max-width: none; width: 100%; text-align: left; margin-top: 10px; }
.budget-card { padding: 22px 22px 24px; margin-bottom: 20px; }
.budget-card-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
}
.budget-toggle-hint { font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.budget-card-toggle:hover .budget-toggle-hint { color: var(--brand); }
.budget-card-body { margin-top: 18px; }
.budget-card-grid { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; }
.budget-card-inputs { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.budget-card-inputs .input-field { margin: 0; }
.budget-card-inputs #budget-hint { margin: 0; }
.budget-card-inputs #budget-hint:empty { display: none; }
.budget-card-result { flex: 1; min-width: 200px; display: flex; }
.budget-result-placeholder { color: var(--faint); font-size: 0.85rem; margin: auto; }
.budget-result-scol { width: 100%; border-color: #7c3aed; background: linear-gradient(180deg, rgba(124,58,237,0.1), transparent 60%), var(--surface); }
.scol-label-left { justify-content: flex-start; text-align: left; align-self: stretch; }
.pill.purple { background: rgba(124, 58, 237, 0.14); color: #7c3aed; }
/* justify-content:space-between here would treat the icon, the title text, and the Clear button
   as three separate flex items and center the title between the other two — margin-left:auto on
   the button alone keeps the icon+title pinned left while still pushing Clear to the right. */
.budget-clear-btn { margin-left: auto; padding: 4px 12px; font-size: 0.76rem; text-transform: none; letter-spacing: normal; font-weight: 600; }

/* Budget-sized system is set apart from the site's own "Estimated return" (brand green) with its
   own accent, so a rep can tell at a glance which numbers are the recommendation and which are
   the customer's budget scenario. */
.results-card.budget-sized-card { background: rgba(124, 58, 237, 0.1); border-color: #7c3aed; }
.scenario.budget { border-color: #7c3aed; background: linear-gradient(180deg, rgba(124,58,237,0.12), transparent 40%), var(--surface); }
.scenario.budget .headline .num { color: #7c3aed; }

.comparison-card { background: var(--surface); border-color: var(--border); }
.comparison-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.comparison-col {
  flex: 1; min-width: 200px; text-align: center; padding: 18px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.comparison-col-title { font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.comparison-spec { font-size: 0.82rem; color: var(--faint); margin-top: 6px; }
.comparison-num { font-family: "IBM Plex Mono", monospace; font-size: 1.7rem; font-weight: 800; color: var(--text); margin-top: 10px; }
.comparison-unit { font-size: 0.7rem; font-weight: 600; color: var(--muted); text-transform: none; margin-left: 4px; }
.comparison-sub { font-size: 0.78rem; color: var(--muted); margin-top: 6px; }
.comparison-more-pill { margin-top: 10px; max-width: 100%; white-space: normal; text-align: left; line-height: 1.3; }
.comparison-more-pill svg { flex: none; }
.comparison-col.budget-col { border-color: #7c3aed; background: linear-gradient(180deg, rgba(124,58,237,0.12), transparent 60%), var(--surface-2); }
.comparison-col.budget-col .comparison-num { color: #7c3aed; }

/* ---- Simple, borderless metric rows — used consistently for every "just numbers" section ---- */
.simple-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 8px;
  flex: 1;
}
.simple-row.cols-3 { grid-template-columns: repeat(3, 1fr); }
.simple-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .simple-row { grid-template-columns: 1fr 1fr; } }
.scol {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
}
.scol-label { display: flex; align-items: center; gap: 7px; font-size: 1rem; font-weight: 800; color: var(--text); }
.scol-label .li { color: var(--brand); flex: none; }
.scol-label.stacked { flex-direction: column; gap: 2px; }
/* Peak sun hours' info button lives inline inside a <span> alongside the label text (so the
   "Daily average" sub-line can sit on its own row below both) rather than as a flex sibling of it —
   .cost-guide-btn's margin-left: auto does nothing in that plain-inline context, leaving it
   touching the text with no gap at all. */
.scol-label.stacked .info-tip-btn { margin-left: 6px; }
.scol-label-sub { font-size: 0.72rem; font-weight: 600; color: var(--faint); }
.scol-note { font-size: 0.78rem; color: var(--faint); max-width: 26ch; }

.scol-media { width: 100%; border-radius: 12px; overflow: hidden; height: 180px; background: var(--surface-2); position: relative; }
.map-embed { width: 100%; height: 100%; border: none; display: block; }
.map-fallback { display: flex; align-items: center; justify-content: center; color: var(--faint); height: 100%; }
.map-caption { font-size: 0.76rem; color: var(--faint); margin: 0; line-height: 1.4; }
.map-pin-icon { background: transparent; border: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.building-pin-label.leaflet-tooltip {
  background: rgba(15,17,21,0.9); color: #fff; border: 1px solid var(--border);
  border-radius: 6px; font-size: 0.72rem; font-weight: 700; padding: 2px 7px; box-shadow: none;
}
.building-pin-label.leaflet-tooltip::before { display: none; }

.scol-plain { flex: 1; align-self: stretch; width: 100%; display: flex; align-items: center; justify-content: center; }
.building-pitch-list { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.building-pitch-item { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); }
.building-pitch-item:last-child { border-bottom: none; padding-bottom: 0; }
.building-pitch-item span:last-child { font-size: 1.3rem; font-weight: 800; color: var(--text); }
.scol-big { font-size: 2.6rem; font-weight: 800; }
.scol-big .unit { font-size: 1.2rem; font-weight: 700; color: var(--muted); vertical-align: super; }

.scol-stat-row { display: flex; align-items: baseline; justify-content: space-between; width: 100%; font-size: 0.82rem; padding-top: 8px; border-top: 1px dashed var(--border-soft); }
.scol-stat-label { color: var(--faint); }
.scol-stat-value { font-weight: 800; color: var(--text); }

.area-frame {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 10px 16px;
}
.area-frame .corner { position: absolute; width: 10px; height: 10px; border-color: var(--brand); border-style: solid; border-width: 0; }
.area-frame .corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.area-frame .corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.area-frame .corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.area-frame .corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.area-value { font-size: 2.6rem; font-weight: 800; white-space: nowrap; }
.area-value .unit { font-size: 1.2rem; font-weight: 700; color: var(--muted); margin-left: 3px; }

.sun-circle { position: relative; display: flex; align-items: center; justify-content: center; color: var(--brand); flex: 1; min-height: 200px; }
.sun-value { position: absolute; text-align: center; color: var(--text); }
.sun-value-num { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.sun-value-unit { font-size: 0.85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

/* split bar card */
.split-labels { display: flex; justify-content: space-between; width: 100%; margin-bottom: 4px; }
.split-labels .side.right { text-align: right; }
.split-labels .v { font-size: 1.6rem; font-weight: 800; }
.split-labels .k { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }
.split-bar { width: 100%; height: 10px; border-radius: 99px; overflow: hidden; display: flex; background: var(--border); }
.split-bar .a { background: var(--brand); }
.split-bar .b { background: var(--violet); }
.split-pct { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; font-size: 0.76rem; color: var(--faint); }

/* fit pill */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; padding: 5px 10px; border-radius: 99px; align-self: center; }
.pill.green { background: var(--green-tint); color: var(--green); }
.pill.warn { background: rgba(240, 113, 90, 0.14); color: var(--danger); }

.efficiency-slider-row { width: 100%; margin-top: 6px; }
.efficiency-slider-label { display: flex; justify-content: space-between; font-size: 0.76rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.efficiency-slider-value { color: var(--brand); font-weight: 700; }
.efficiency-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 99px;
  background: var(--border); outline: none; cursor: pointer; margin: 0;
}
.efficiency-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); cursor: pointer; border: 2px solid var(--surface);
}
.efficiency-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--brand); cursor: pointer;
  border: 2px solid var(--surface);
}
.efficiency-slider::-moz-range-track { background: var(--border); height: 4px; border-radius: 99px; }

/* ---- Investment inputs ---- */
.beneficiary-field { display: block; margin-bottom: 18px; color: var(--muted); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.beneficiary-field select {
  display: block; width: 100%; margin-top: 8px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; color: var(--text); font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem; font-weight: 700; text-transform: none; letter-spacing: normal; cursor: pointer;
}
.beneficiary-field select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.tier-select {
  display: block; width: 100%; margin-top: 8px; padding: 6px 8px; font-size: 0.76rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif;
}
.tier-select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
/* Sits beside the Save button instead of stacked full-width above the input fields, so the
   assumptions card doesn't carry an extra row of height just for this — the caption stays, just
   scoped to this one compact column instead of spanning the whole card. */
.beneficiary-field-inline { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 0; white-space: nowrap; }
.beneficiary-field-inline select {
  width: auto; min-width: 200px; margin-top: 0;
  padding: 10px 16px; border-radius: 9px; font-size: 0.9rem;
}
#self-consume-note { margin: -6px 0 16px; }
.input-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.input-field { flex: 1; min-width: 150px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; position: relative; }
.input-field .fl { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--muted); font-size: 0.76rem; font-weight: 600; }
.input-field .fl svg { color: var(--faint); }
.input-field .fs { display: flex; align-items: center; gap: 4px; }
.input-field .fs span { color: var(--faint); }
.input-field input { background: none; border: none; outline: none; color: var(--text); font-family: "IBM Plex Mono", monospace; font-size: 1.05rem; width: 100%; font-variant-numeric: tabular-nums; }

.cost-guide-btn {
  margin-left: auto; display: inline-flex; background: none; border: none; padding: 0;
  color: var(--faint); cursor: pointer; flex: none;
}
.cost-guide-btn:hover { color: var(--brand); }
.cost-guide-popover {
  position: absolute; top: 100%; left: 0; margin-top: 6px; z-index: 30; width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
/* The purely-explanatory tooltips open upward instead — their button usually sits right above
   the metric's own value/note/pill, so opening downward like the cost guides do would cover
   that content instead of sitting clear of it. */
.info-tip-popover { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 6px; left: 50%; transform: translateX(-50%); }
.cost-guide-headline { font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.cost-guide-note { font-size: 0.76rem; color: var(--muted); line-height: 1.4; margin: 0 0 6px; }
.cost-guide-source { font-size: 0.7rem; color: var(--faint); margin: 0 0 10px; }
.cost-guide-use-btn { width: 100%; padding: 7px 10px; font-size: 0.82rem; }
/* .cost-guide-popover's position:absolute anchors to the nearest positioned ancestor — every other
   info-tip button sits right at the top of its own (short) card, so that ancestor and "right above
   the button" are basically the same place. The panel-placement tooltip sits well down inside the
   much taller Roof analysis card, so without its own positioned wrapper here, the popover was
   anchoring to that outer card's top edge instead — landing hundreds of pixels above the button,
   off the top of the screen. */
.roof-allocation { position: relative; }

.scenario-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .scenario-grid { grid-template-columns: 1fr; } }
.scenario { position: relative; border: 1px solid var(--border); border-radius: 16px; padding: 20px; background: var(--surface); display: flex; flex-direction: column; }
.scenario.hi { border-color: var(--green); background: linear-gradient(180deg, rgba(79,208,138,0.08), transparent 40%), var(--surface); }
.scenario-title { font-weight: 700; font-size: 0.95rem; }
.scenario-sub { font-size: 0.76rem; color: var(--muted); margin-bottom: 14px; }
.sline { display: flex; justify-content: space-between; font-size: 0.83rem; padding: 7px 0; border-bottom: 1px solid var(--border-soft); color: var(--muted); }
.sline span:last-child { color: var(--text); font-weight: 600; }
.sline-value-lg { font-size: 1.15rem; font-weight: 800; }
.sline:last-of-type { border-bottom: none; }
.sline.sline-gap-top { margin-top: 16px; }
/* position: relative so each row's own info-tip popover (now nested inside this span, not a
   trailing sibling) anchors right above its own button — without this, position:absolute falls
   back to the nearest positioned ancestor, which is the whole .scenario card, landing the popover
   near the top of the card instead of next to the row it explains. Same root cause as
   .roof-allocation below. */
.sline-label-tip { display: inline-flex; align-items: center; gap: 7px; position: relative; }
/* margin-top: auto (in the now-flex-column .scenario card) pushes the headline — and whatever
   comes after it — down by exactly the difference in content above it, so the Payback/ROI tiles
   land at the same height in both the Solar-only and Solar+battery cards regardless of how many
   investment-breakdown lines either one has above it. */
.headline { display: flex; gap: 10px; margin: auto 0 16px; }
.headline .hitem { flex: 1; background: var(--surface-2); border-radius: 12px; padding: 14px; text-align: center; }
.headline .num { font-size: 1.9rem; font-weight: 800; }
.scenario.hi .headline .num { color: var(--green); }
.headline .lbl { font-size: 0.7rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }
.roi-empty { font-size: 0.85rem; color: var(--muted); }

.ppa-projection-toggle { width: 100%; justify-content: center; margin-top: 16px; font-size: 0.8rem; padding: 8px 12px; }
.ppa-projection-toggle svg { flex: none; }
.ppa-projection-panel { margin-top: 12px; }
.ppa-projection-note { font-size: 0.78rem; color: var(--faint); margin: 0 0 10px; }
.ppa-projection-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 10px; }
.ppa-projection-table { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 0.8rem; }
.ppa-projection-table th {
  text-align: right; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--border-soft); font-weight: 700;
  background: var(--surface-2);
}
.ppa-projection-table th:first-child, .ppa-projection-table td:first-child { text-align: left; }
.ppa-projection-table td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--border-soft); color: var(--muted); }
.ppa-projection-table tr:last-child td { border-bottom: none; }
.ppa-projection-table tr.ppa-escalation-start td { border-top: 1px dashed var(--brand); color: var(--text); }
.ppa-projection-summary {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 0.85rem; color: var(--muted);
}
.ppa-projection-summary span:last-child { color: var(--brand); font-weight: 800; font-size: 1rem; }

.export-toggle-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.export-toggle-row .checkbox-field { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.export-rate-field { flex: 1; min-width: 180px; margin: 0; }

.export-breakdown-toggle { width: 100%; justify-content: center; margin-top: 16px; font-size: 0.8rem; padding: 8px 12px; }
.export-breakdown-toggle svg { flex: none; }
.export-breakdown-panel { margin-top: 12px; }
.stacked-bar { display: flex; width: 100%; height: 34px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.stacked-bar .seg { display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; color: #14171c; white-space: nowrap; }
.stacked-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.stacked-legend .item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); }
.stacked-legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.export-breakdown-note { font-size: 0.78rem; color: var(--faint); margin-top: 12px; }

.save-row { display: flex; justify-content: space-between; align-items: center; gap: 14px 20px; margin-top: 18px; flex-wrap: wrap; }
.save-row-actions { display: flex; align-items: center; gap: 14px; }
.save-row-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.checkbox-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.checkbox-field-wrap { display: flex; align-items: center; gap: 6px; position: relative; }

/* ---- Chart cards: same dark surface as the rest of the page, no jarring light block ---- */
.paper-card {
  background: var(--surface); color: var(--text); border-radius: 16px; padding: 24px 24px 18px;
  margin-bottom: 20px;
}
.paper-card h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; }
.paper-card .psub { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
.paper-card .psub strong { color: var(--text); font-size: 1.1em; font-weight: 800; }
.paper-card .chart-wrap { margin-top: 6px; height: 300px; }

/* Report log table */
#report-table-wrap, .table-scroll { overflow-x: auto; }
.report-table { width: 100%; min-width: 820px; border-collapse: collapse; margin-top: 12px; font-size: 0.9rem; }
.report-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 700;
}
.report-table td { padding: 10px; border-bottom: 1px solid var(--border-soft); }
.report-table tbody tr { cursor: pointer; }
.report-table tbody tr:hover { background: var(--surface-2); }
.empty-state { color: var(--muted); font-size: 0.9rem; margin-top: 10px; }

.detail-header-row {
  display: flex; gap: 10px; margin-bottom: 16px;
  position: sticky; top: 0; z-index: 10; background: var(--bg);
}

/* Leaflet's own panes (tiles, markers, tooltips) use z-index values up to ~700, which is high
   enough to paint over page-level UI like the sticky header above once a map card scrolls
   through that fixed band — isolating each map into its own stacking context keeps those
   z-indexes from ever being compared against anything outside the map itself. */
.leaflet-container { isolation: isolate; }

/* ---- Send report modal ---- */
.hero-actions { display: flex; justify-content: flex-end; margin-bottom: -10px; }
.send-report-btn { display: inline-flex; align-items: center; gap: 8px; }
.modal-overlay {
  position: fixed; inset: 0; background: rgba(4, 5, 7, 0.7);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50;
  overflow-y: auto;
}
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; width: 100%; max-width: 380px; max-height: calc(100vh - 40px); overflow-y: auto; margin: auto; }
.modal-card h2 { margin-bottom: 8px; }
.modal-card .muted { font-size: 0.85rem; margin-bottom: 4px; }
.modal-card label { display: block; margin: 14px 0 0; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.modal-card input, .modal-card textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 9px; font-size: 0.95rem;
  background: var(--surface-2); color: var(--text); font-family: inherit;
}
.modal-card textarea { resize: vertical; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

.modal-card.modal-wide { max-width: 720px; }

/* --- Power Authority Request document --- */
.poa-sheet { min-height: 0; }
.poa-date { text-align: right; }
.poa-date .k { display: block; font-size: 0.72rem; color: #8a9184; text-transform: uppercase; letter-spacing: 0.05em; }
.poa-date .v { font-size: 0.95rem; font-weight: 700; }
.poa-title { font-size: 1.8rem; font-weight: 800; margin-top: 12px; }
.poa-subtitle { font-size: 0.95rem; color: #57604f; margin-top: 4px; margin-bottom: 28px; }
.poa-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-bottom: 24px; }
.poa-static-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; padding: 18px 20px; background: #f5f7f2; border-radius: 12px; margin-bottom: 28px; }
.poa-field-wide { grid-column: 1 / -1; }
.poa-field .k, .poa-static-row .k { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8a9184; margin-bottom: 4px; }
.poa-field .v, .poa-static-row .v { display: block; font-size: 0.95rem; font-weight: 600; border-bottom: 1px solid #dde3d6; padding-bottom: 6px; }
.poa-body-text { font-size: 0.88rem; color: #3a4034; line-height: 1.6; margin-bottom: 32px; }
.poa-body-text p { margin-bottom: 12px; }
.poa-sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: auto; margin-bottom: 32px; }
.poa-sign-field .k { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8a9184; margin-bottom: 24px; }
.poa-sign-field .v { display: block; font-size: 0.95rem; font-weight: 600; border-bottom: 1px solid #1a1f16; padding-bottom: 6px; min-height: 1.3em; }
.poa-sign-line { display: block; border-bottom: 1px solid #1a1f16; height: 1.3em; }
.roof-draw-map-wrap { position: relative; margin-top: 14px; }
.roof-draw-map { width: 100%; height: 420px; border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: crosshair; }
.roof-draw-compass {
  position: absolute; top: 12px; right: 12px; width: 54px; height: 54px; z-index: 500;
  background: rgba(10, 12, 15, 0.72); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%;
  pointer-events: none;
}
.roof-draw-compass span {
  position: absolute; color: #fff; font-size: 0.68rem; font-weight: 700; font-family: "IBM Plex Mono", monospace;
}
.roof-draw-compass .n { top: 3px; left: 50%; transform: translateX(-50%); }
.roof-draw-compass .s { bottom: 3px; left: 50%; transform: translateX(-50%); }
.roof-draw-compass .e { right: 5px; top: 50%; transform: translateY(-50%); }
.roof-draw-compass .w { left: 5px; top: 50%; transform: translateY(-50%); }

.print-only { display: none; }

/* ---- Print / PDF export: light, paper-friendly palette; hide app chrome and raw inputs ---- */
@media print {
  :root {
    --bg: #ffffff; --nav: #ffffff; --surface: #ffffff; --surface-2: #f2f4ef;
    --border: #d8dcd3; --border-soft: #e4e7e0;
    --text: #14171b; --muted: #4b5160; --faint: #7a8090;
    --brand: #2f8f3a; --brand-dark: #256e2d; --brand-tint: rgba(47, 143, 58, 0.12);
  }
  body { background: #fff; }
  /* Chrome/Safari drop background colours in print unless told otherwise — without this the
     daylight/night split bar and highlighted scenario card render as blank white boxes. */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }

  .topbar, .tabbar, .no-print, .sec-toggle,
  #landing-card, #report-form-card, #log-list-view,
  .detail-header-row, .card,
  .assumptions-card, #self-consume-note,
  .sheet-select { display: none !important; }
  .content { padding: 0; max-width: 100%; }
  .print-only { display: block; }

  /* The report's own responsive breakpoints are keyed to viewport width, which some print
     engines report as narrow (page width) — without this override, Property overview collapses
     from 4 columns to 2, and the ROI scenario cards stack instead of sitting side by side. */
  .simple-row { grid-template-columns: repeat(4, 1fr) !important; }
  .simple-row.cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .simple-row.cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .scenario-grid { grid-template-columns: 1fr 1fr !important; }

  /* Keep a section, card or chart together rather than letting the page break split it in half. */
  .report-section, .paper-card, .icard, .scenario, .simple-row, .report-hero {
    break-inside: avoid; page-break-inside: avoid;
  }
  .divider { break-after: avoid; page-break-after: avoid; }
  .sec-head { break-after: avoid; page-break-after: avoid; }
}

/* ==========================================================================
   Proposal preview — a self-contained light-themed document, deliberately
   distinct from the app's own dark UI (this is a printable sales document,
   not a dashboard). Every rule here is scoped under .proposal-* so nothing
   here can collide with or be affected by the rest of the app's styles.
   ========================================================================== */
.proposal-overlay {
  position: fixed; inset: 0; z-index: 60; background: #e9ede4; overflow-y: auto;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171b16; line-height: 1.5;
}
.proposal-topbar {
  position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 28px; background: #171b16; color: #fff;
}
.proposal-topbar .l { font-size: 0.85rem; font-weight: 700; }
.proposal-topbar .actions { display: flex; gap: 10px; }
.proposal-topbar button {
  font-family: inherit; font-size: 0.85rem; font-weight: 700; border-radius: 8px; padding: 8px 16px;
  border: 1px solid rgba(255,255,255,0.25); background: transparent; color: #fff; cursor: pointer;
}
.proposal-topbar button.primary { background: #2f8f3a; border-color: #2f8f3a; }
.proposal-topbar button:hover { opacity: 0.85; }

.proposal-body { padding-block: 36px; }
.proposal-mono { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; font-variant-numeric: tabular-nums; }
.proposal-body h1, .proposal-body h2, .proposal-body h3 { text-wrap: balance; margin: 0; }
.proposal-body p { margin: 0; }
.proposal-body img { display: block; }

.proposal-sheet {
  max-width: 880px; min-height: 1140px; margin: 0 auto 28px; background: #fff;
  border-radius: 6px; box-shadow: 0 1px 3px rgba(20,25,15,0.08), 0 18px 40px -20px rgba(20,25,15,0.35);
  padding: 56px 64px 64px; position: relative; display: flex; flex-direction: column;
}
.proposal-sheet-footer {
  margin-top: auto; padding-top: 24px; border-top: 1px solid #eaeee4;
  display: flex; justify-content: space-between; align-items: center; font-size: 0.72rem; color: #8a9184;
}

.proposal-eyebrow-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 44px; }
.proposal-wordmark { height: 30px; }
.proposal-estimate-badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: #b9762f; background: #f7ead9;
  padding: 6px 12px; border-radius: 99px;
}
.proposal-estimate-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #b9762f; }

.proposal-cover-kicker { font-size: 0.85rem; font-weight: 700; color: #2f8f3a; letter-spacing: 0.02em; margin-bottom: 14px; }
.proposal-cover-headline { font-size: 2.7rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.015em; max-width: 15ch; }
.proposal-cover-headline em { font-style: normal; color: #2f8f3a; }
.proposal-cover-sub { font-size: 1.02rem; color: #57604f; margin-top: 16px; max-width: 54ch; }

.proposal-cover-meta { display: flex; gap: 40px; margin-top: 34px; flex-wrap: wrap; }
.proposal-cover-meta .k { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8a9184; margin-bottom: 4px; }
.proposal-cover-meta .v { font-size: 0.95rem; font-weight: 700; color: #171b16; }

.proposal-hero-strip {
  display: grid; grid-template-columns: 1.15fr repeat(3, 1fr); gap: 1px; background: #dde3d6;
  border: 1px solid #dde3d6; border-radius: 14px; overflow: hidden; margin-top: 40px;
}
.proposal-hero-cell { background: #fff; padding: 22px 18px; min-width: 0; }
.proposal-hero-cell.hi { background: #2f8f3a; }
.proposal-hero-cell .num { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.proposal-hero-cell.hi .num { font-size: 2.1rem; }
.proposal-hero-cell.hi .num, .proposal-hero-cell.hi .lbl { color: #fff; }
.proposal-hero-cell .lbl { font-size: 0.74rem; color: #8a9184; margin-top: 6px; }

.proposal-aerial-frame {
  margin-top: 32px; border-radius: 14px; overflow: hidden; position: relative; border: 1px solid #dde3d6;
  height: 280px;
}
.proposal-aerial-frame .proposal-aerial-map { width: 100%; height: 100%; }
.proposal-aerial-caption {
  position: absolute; left: 16px; bottom: 14px; background: rgba(23,27,22,0.72); color: #fff;
  font-size: 0.76rem; padding: 6px 12px; border-radius: 8px; z-index: 401; pointer-events: none;
}

.proposal-page-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.proposal-page-kicker .n { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; font-weight: 700; color: #2f8f3a; }
.proposal-page-kicker .t { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8a9184; }
.proposal-page-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 6px; }
.proposal-page-dek { font-size: 0.92rem; color: #57604f; max-width: 62ch; margin-bottom: 32px; }
/* Extra breathing room specifically before the page 2 spec tiles and the page 3 chart — scoped
   to just those two pages rather than bumping every page's dek spacing. */
.proposal-page-dek:has(+ .proposal-spec-row),
.proposal-page-dek:has(+ .proposal-chart-card) { margin-bottom: 48px; }

.proposal-spec-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.proposal-spec-tile { border: 1px solid #dde3d6; border-radius: 14px; padding: 18px 16px; text-align: center; }
.proposal-spec-tile .icon-wrap {
  width: 44px; height: 44px; border-radius: 12px; background: #e6f3e4; display: flex;
  align-items: center; justify-content: center; margin: 0 auto 12px;
}
.proposal-spec-tile .icon-wrap svg { width: 22px; height: 22px; stroke: #2f8f3a; }
.proposal-spec-tile .v { font-size: 1.4rem; font-weight: 800; }
.proposal-spec-tile .k { font-size: 0.76rem; color: #8a9184; margin-top: 4px; }

.proposal-metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.proposal-metric-card { border: 1px solid #dde3d6; border-radius: 14px; padding: 18px 20px 20px; }
.proposal-metric-card .icon-wrap {
  width: 34px; height: 34px; border-radius: 9px; background: #f7ead9; display: flex;
  align-items: center; justify-content: center; margin-bottom: 12px;
}
.proposal-metric-card .icon-wrap svg { width: 18px; height: 18px; stroke: #b9762f; }
.proposal-metric-card .lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8a9184; margin-bottom: 8px; }
.proposal-metric-card .big { font-size: 1.6rem; font-weight: 800; }
.proposal-metric-card .big .unit { font-size: 0.95rem; font-weight: 700; color: #8a9184; margin-left: 3px; }
.proposal-metric-card .note { font-size: 0.8rem; color: #57604f; margin-top: 8px; }

.proposal-split-card { border: 1px solid #dde3d6; border-radius: 14px; padding: 20px 22px; margin-bottom: 32px; }
.proposal-split-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.proposal-split-head .lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8a9184; }
.proposal-split-bar-2 { display: flex; height: 30px; border-radius: 8px; overflow: hidden; }
.proposal-split-bar-2 .a { background: #2f8f3a; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.78rem; font-weight: 700; }
.proposal-split-bar-2 .b { background: #2b3a4a; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.78rem; font-weight: 700; }
.proposal-split-legend { display: flex; gap: 26px; margin-top: 14px; font-size: 0.82rem; color: #57604f; }
.proposal-split-legend .item { display: flex; align-items: center; gap: 7px; }
.proposal-split-legend .sw { width: 10px; height: 10px; border-radius: 3px; }

.proposal-warranty-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.proposal-warranty-tile { border: 1px dashed #dde3d6; border-radius: 12px; padding: 16px; text-align: center; }
.proposal-warranty-tile .v { font-size: 1.15rem; font-weight: 800; color: #1f6b28; }
.proposal-warranty-tile .k { font-size: 0.76rem; color: #8a9184; margin-top: 3px; }

.proposal-chart-card { border: 1px solid #dde3d6; border-radius: 14px; padding: 22px 24px 18px; margin-bottom: 28px; }
.proposal-chart-card .chart-wrap { height: 220px; }
.proposal-chart-legend { display: flex; gap: 22px; margin-top: 8px; font-size: 0.8rem; color: #57604f; }
.proposal-chart-legend .item { display: flex; align-items: center; gap: 7px; }
.proposal-chart-legend .sw { width: 16px; height: 3px; border-radius: 2px; }
.proposal-chart-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-weight: 800; font-size: 0.95rem; flex-wrap: wrap; }
.proposal-chart-card-total { font-size: 0.85rem; font-weight: 800; color: #1f6b28; }

.proposal-benefits-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.proposal-benefit-tile { border: 1px solid #dde3d6; border-radius: 14px; padding: 16px; }
.proposal-benefit-tile .icon-wrap {
  width: 34px; height: 34px; border-radius: 10px; background: #eef4ea;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.proposal-benefit-tile .icon-wrap svg { width: 18px; height: 18px; stroke: #2f8f3a; }
.proposal-benefit-tile .t { font-size: 0.85rem; font-weight: 800; margin-bottom: 4px; }
.proposal-benefit-tile .d { font-size: 0.78rem; color: #57604f; line-height: 1.4; }

.proposal-revenue-list { border: 1px solid #dde3d6; border-radius: 14px; overflow: hidden; }
.proposal-revenue-list .row { display: flex; justify-content: space-between; padding: 14px 20px; font-size: 0.9rem; border-bottom: 1px solid #eaeee4; color: #57604f; }
.proposal-revenue-list .row:last-child { border-bottom: none; background: #e6f3e4; font-weight: 800; color: #1f6b28; font-size: 1rem; }
.proposal-revenue-list .row span:last-child { color: #171b16; font-weight: 700; font-family: "IBM Plex Mono", monospace; }
.proposal-revenue-list .row:last-child span:last-child { color: #1f6b28; }

.proposal-face-card { border: 1px solid #dde3d6; border-radius: 14px; overflow: hidden; margin-bottom: 32px; }
.proposal-face-card .head { display: flex; justify-content: space-between; padding: 12px 20px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a9184; background: #f3f5ef; border-bottom: 1px solid #eaeee4; }
.proposal-face-card .row { display: flex; justify-content: space-between; padding: 12px 20px; font-size: 0.88rem; color: #57604f; border-bottom: 1px solid #eaeee4; }
.proposal-face-card .row:last-of-type { border-bottom: none; }
.proposal-face-card .row span:first-child { color: #171b16; font-weight: 700; }
.proposal-face-card .row span:last-child { font-family: "IBM Plex Mono", monospace; font-weight: 700; color: #171b16; }
.proposal-face-note { padding: 12px 20px; font-size: 0.76rem; color: #8a9184; background: #f9faf7; }

.proposal-estimate-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; font-size: 0.86rem; }
.proposal-estimate-meta .k { color: #8a9184; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.proposal-estimate-meta .v { font-weight: 700; margin-top: 2px; }
table.proposal-quote { width: 100%; border-collapse: collapse; font-size: 0.86rem; margin-bottom: 4px; }
table.proposal-quote th {
  text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: #8a9184;
  padding: 10px 4px; border-bottom: 2px solid #171b16; font-weight: 700;
}
table.proposal-quote th.num, table.proposal-quote td.num { text-align: right; }
table.proposal-quote td { padding: 16px 4px; border-bottom: 1px solid #eaeee4; vertical-align: top; }
table.proposal-quote ul { margin: 8px 0 0; padding-left: 18px; color: #57604f; font-size: 0.84rem; }
table.proposal-quote li { margin-bottom: 3px; }
.proposal-quote-totals { margin-top: 6px; }
.proposal-quote-totals .row { display: flex; justify-content: space-between; padding: 9px 4px; font-size: 0.88rem; }
.proposal-quote-totals .row.final { border-top: 2px solid #171b16; margin-top: 4px; padding-top: 14px; font-size: 1.15rem; font-weight: 800; }
.proposal-quote-totals .row span:last-child { font-family: "IBM Plex Mono", monospace; font-weight: 700; }

.proposal-roadmap { display: flex; gap: 0; margin-bottom: 36px; }
.proposal-roadmap .step { flex: 1; position: relative; padding-right: 18px; }
.proposal-roadmap .step:not(:last-child)::after {
  content: ''; position: absolute; top: 21px; right: 0; width: 18px; height: 2px; background: #dde3d6;
}
.proposal-roadmap .step .circle {
  width: 42px; height: 42px; border-radius: 50%; background: #171b16; color: #fff;
  display: flex; align-items: center; justify-content: center; font-family: "IBM Plex Mono", monospace;
  font-weight: 700; font-size: 1.05rem; margin-bottom: 14px;
}
.proposal-roadmap .step.current .circle { background: #2f8f3a; }
.proposal-roadmap .step .t { font-size: 0.85rem; font-weight: 700; line-height: 1.3; }
.proposal-roadmap .step .d { font-size: 0.76rem; color: #8a9184; margin-top: 4px; }

.proposal-payment-list { border: 1px solid #dde3d6; border-radius: 14px; overflow: hidden; margin-bottom: 28px; }
.proposal-payment-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #eaeee4; }
.proposal-payment-row:last-child { border-bottom: none; }
.proposal-payment-row .idx {
  font-family: "IBM Plex Mono", monospace; font-size: 0.76rem; font-weight: 700; color: #8a9184;
  flex: none; width: 68px;
}
.proposal-payment-row .desc { flex: 1; font-size: 0.88rem; }
.proposal-payment-row .pct { font-size: 0.82rem; color: #8a9184; flex: none; width: 44px; text-align: right; }
.proposal-payment-row .amt { font-family: "IBM Plex Mono", monospace; font-weight: 700; flex: none; width: 110px; text-align: right; }

.proposal-conditions-list { font-size: 0.84rem; color: #57604f; }
.proposal-conditions-list li { margin-bottom: 8px; }

.proposal-sign-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; }
.proposal-sign-box { border-top: 1px solid #171b16; padding-top: 10px; }
.proposal-sign-box .l { font-size: 0.76rem; color: #8a9184; }

.proposal-tc-section { margin-bottom: 22px; }
.proposal-tc-section h3 { font-size: 0.92rem; font-weight: 800; margin-bottom: 6px; }
.proposal-tc-section p { font-size: 0.8rem; color: #57604f; line-height: 1.55; }
.proposal-tc-two-col { columns: 2; column-gap: 36px; }
.proposal-tc-two-col .proposal-tc-section { break-inside: avoid; }

@media print {
  body.proposal-open > *:not(.proposal-overlay) { display: none !important; }
  .proposal-overlay { position: static !important; overflow: visible !important; }
  .proposal-topbar { display: none !important; }
  .proposal-sheet { box-shadow: none; margin: 0; border-radius: 0; page-break-after: always; min-height: 100vh; }
}