/* ══ Farber brand system — applied to the Farber Solar Calculator═══════════════════
   Source of truth: Farber Brand Guideline (2026 edition), with component patterns
   from Farber2.0-design.html where the guideline is silent.

   Colour hierarchy (guideline 02.2): Navy 50% · Cloud 25% · Orange 12% · Green 8%.
     Navy   — primary surfaces, headlines, structure
     Cloud  — backgrounds, negative space
     Orange — calls to action, highlights, callouts (small doses)
     Green  — bolt, baseline bar, key accents only — never a background field
     Violet / Carbon — functional accents for charts, diagrams and depth
   Type: Anjoman only, Thin → Bold.                                                  */

@font-face { font-family: 'Anjoman'; src: url('fonts/Anjoman-Thin.ttf') format('truetype'); font-weight: 100; font-display: swap; }
@font-face { font-family: 'Anjoman'; src: url('fonts/Anjoman-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Anjoman'; src: url('fonts/Anjoman-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Anjoman'; src: url('fonts/Anjoman-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Anjoman'; src: url('fonts/Anjoman-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Anjoman'; src: url('fonts/Anjoman-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Anjoman'; src: url('fonts/Anjoman-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Anjoman'; src: url('fonts/Anjoman-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* Six approved brand colours */
  --navy: #214A6F; --orange: #F2673B; --green: #8CC540;
  --carbon: #131514; --violet: #736DB2; --cloud: #F1F1F1;
  /* Supporting tones defined in the guideline */
  --ink: #0C1F30; --navy-deep: #16344E; --slate: #5A6B7A; --paper: #F6F6F4;
  --hair: rgba(33, 74, 111, .16); --hair-d: rgba(241, 241, 241, .18);
  /* Tints (opacity of approved colours, not new colours) */
  --navy-t: rgba(33, 74, 111, .07); --orange-t: rgba(242, 103, 59, .1);

  /* Semantic surfaces */
  --page: var(--cloud); --surface: #FFFFFF; --surface2: var(--paper);
  --text-1: var(--ink); --text-2: var(--slate); --text-3: rgba(90, 107, 122, .8);
  --accent-text: var(--navy);   /* value text on light surfaces */
  --line: var(--hair);

  /* Radius & elevation */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-tile: 22px; --r-xl: 28px; --r-pill: 999px;
  --sh-card: 0 2px 16px rgba(33, 74, 111, .08);
  --sh-cta: 0 6px 20px rgba(242, 103, 59, .32);
  --sh-sheet: 0 -6px 30px rgba(12, 31, 48, .22);
  --font: 'Anjoman', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Aliases read by app.js (inline SVG + heat map) */
  --bg: var(--surface); --bg2: var(--surface2); --bg3: var(--cloud);
  --text: var(--text-1); --text2: var(--text-2); --text3: var(--text-3);
  --border: var(--line); --border2: var(--line);
  --hm0: #E3E9EF;
  --roof-fill: var(--cloud); --roof-stroke: rgba(33, 74, 111, .25);
  color-scheme: light dark;
}

/* Dark mode — Ink / Navy Deep surfaces, Cloud text; green stays an accent */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: var(--ink); --surface: var(--navy-deep); --surface2: rgba(241, 241, 241, .05);
    --text-1: var(--cloud); --text-2: rgba(241, 241, 241, .72); --text-3: rgba(241, 241, 241, .5);
    --accent-text: var(--cloud); --line: var(--hair-d);
    --navy-t: rgba(241, 241, 241, .06); --orange-t: rgba(242, 103, 59, .16);
    --sh-card: 0 2px 16px rgba(0, 0, 0, .3);
    --hm0: #1D4262;
    --roof-fill: rgba(241, 241, 241, .06); --roof-stroke: var(--hair-d); }
}
:root[data-theme="dark"] { --page: var(--ink); --surface: var(--navy-deep); --surface2: rgba(241, 241, 241, .05);
    --text-1: var(--cloud); --text-2: rgba(241, 241, 241, .72); --text-3: rgba(241, 241, 241, .5);
    --accent-text: var(--cloud); --line: var(--hair-d);
    --navy-t: rgba(241, 241, 241, .06); --orange-t: rgba(242, 103, 59, .16);
    --sh-card: 0 2px 16px rgba(0, 0, 0, .3);
    --hm0: #1D4262;
    --roof-fill: rgba(241, 241, 241, .06); --roof-stroke: var(--hair-d); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
html { font-size: 13px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-weight: 400; background: var(--page); color: var(--text-1); line-height: 1.5; }
button { font: inherit; color: inherit; }
a { color: var(--navy); font-weight: 600; text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a { color: var(--cloud); }
}
:root[data-theme="dark"] a { color: var(--cloud); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Solid single-colour glyphs (guideline 05: no outlines, no detail strokes) */
.ic { width: 16px; height: 16px; fill: currentColor; color: inherit; flex-shrink: 0; }
.note.warn .ic { width: 16px; height: 16px; color: var(--orange); vertical-align: -3px; margin-inline-end: 6px; }

/* Green baseline bar — the brand's structural accent */
.bar { display: inline-block; width: 22px; height: 4px; border-radius: 1px; background: var(--green); transform: skewX(-20deg); flex-shrink: 0; }

/* ── Layout: full-bleed cover, then one content sheet ── */
.app { --gut: max(48px, calc((100% - 1344px) / 2)); }

/* ── Cover: the location from above (Esri imagery), graded with an ink scrim ── */
.cover {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; background: var(--ink);
  display: flex; flex-direction: column; min-height: 600px; padding: 0 var(--gut);
  --ax: 71%; --ay: 44%;
}
.cover-map {
  position: absolute; z-index: -3; left: var(--ax); top: var(--ay);
  display: grid; grid-template-columns: repeat(13, 256px); grid-auto-rows: 256px;
  translate: calc(var(--px, 1152px) * -1) calc(var(--py, 640px) * -1);
}
.cover-map img { display: block; width: 256px; height: 256px; }
.cover-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(0deg, rgba(12, 31, 48, .92) 0%, rgba(12, 31, 48, 0) 26%),
    linear-gradient(90deg, rgba(12, 31, 48, .95) 0%, rgba(12, 31, 48, .86) 32%, rgba(12, 31, 48, .3) 62%, rgba(12, 31, 48, .18) 100%);
}
.cover-roof { position: absolute; left: var(--px); top: var(--py); width: 1px; height: 1px; overflow: visible; }
.cover-roof .footprint { fill: rgba(242, 103, 59, .14); stroke: var(--orange); stroke-width: 2.5; stroke-dasharray: 9 6; }
.cover-roof .traced { fill: rgba(242, 103, 59, .2); stroke: var(--orange); stroke-width: 3; stroke-linejoin: round; }
.cover-roof circle { fill: #fff; stroke: var(--orange); stroke-width: 3; }
.cover-roof .dot { fill: var(--orange); stroke: #fff; }
.cover-tag {
  position: absolute; z-index: 1; left: var(--ax); top: calc(var(--ay) + var(--half, 70px) + 14px); transform: translateX(-50%);
  font: inherit; font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; cursor: pointer;
  padding: 7px 14px; border-radius: var(--r-pill); background: rgba(12, 31, 48, .8); border: 1px solid rgba(242, 103, 59, .7);
}
.cover-tag:hover { background: var(--ink); border-color: var(--orange); }
.cover-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.cover-bar::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -100vw; right: -100vw; /* full bleed; .cover clips it */ background: linear-gradient(180deg, rgba(12, 31, 48, .9), rgba(12, 31, 48, .72)); border-bottom: 1px solid var(--hair-d); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* Optical centre = the FARBER wordmark, not the bolt: the wordmark's centre sits 27.7% of the
   logo height below the image centre (logo_white_nobar.svg), so lift the image by that much. */
.brand-logo { --logo-h: 50px; display: block; height: var(--logo-h); width: auto; flex-shrink: 0; translate: 0 calc(var(--logo-h) * -.277); }
.brand-div { width: 1px; height: 28px; background: var(--hair-d); }
.brand h1 { font-size: 15px; font-weight: 600; color: rgba(241, 241, 241, .9); white-space: nowrap; }
.actions { display: flex; gap: 8px; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; padding: 9px 14px; border-radius: var(--r-pill); color: #fff; background: rgba(241, 241, 241, .08); border: 1px solid rgba(241, 241, 241, .28); white-space: nowrap; }

.cover-copy { padding: 52px 0 0; max-width: 660px; }
.cover-where { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(241, 241, 241, .72); }
.cover-where .ic { color: var(--orange); }
.hero-fig { font-size: clamp(64px, 7.6vw, 112px); font-weight: 700; letter-spacing: -.035em; line-height: .92; margin-top: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-fig .cur { font-size: .27em; font-weight: 500; letter-spacing: 0; color: rgba(241, 241, 241, .7); margin-right: .35em; }
.hero-save { font-size: 18px; font-weight: 300; color: rgba(241, 241, 241, .82); margin-top: 14px; }
.hero-save .sep { margin: 0 .3em; color: rgba(241, 241, 241, .4); }
.hero-line { font-size: clamp(22px, 2.3vw, 32px); font-weight: 600; letter-spacing: -.012em; line-height: 1.2; margin-top: 28px; max-width: 600px; }
.hero-line b { font-weight: 600; }
.hero-line em { font-style: normal; color: var(--orange); }
.cover-credit { position: absolute; right: 8px; bottom: 4px; font-size: 9px; color: rgba(241, 241, 241, .38); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  padding: 8px 16px; min-height: 38px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text-1);
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--navy); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:hover { border-color: var(--line); }
.btn.on { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Orange = call to action (guideline: "Orange energizes") */
.btn-block { margin-top: 12px; }
.btn-block { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: var(--sh-cta); }
.btn-block:hover { background: var(--orange); border-color: var(--orange); filter: brightness(1.06); }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { background: var(--cloud); border-color: var(--cloud); color: var(--navy); }
}
:root[data-theme="dark"] .btn-primary { background: var(--cloud); border-color: var(--cloud); color: var(--navy); }
.cover .btn { background: rgba(241, 241, 241, .08); border-color: rgba(241, 241, 241, .28); color: #fff; }
.cover .btn:hover { background: rgba(241, 241, 241, .14); border-color: rgba(241, 241, 241, .45); color: #fff; }
.icon-btn { min-height: 40px; padding: 8px 14px; }
@media (max-width: 1000px) {
  .icon-btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
  .icon-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:hover { border-color: var(--cloud); }
  :root:not([data-theme="light"]) .btn.on { background: var(--cloud); border-color: var(--cloud); color: var(--navy); }
}
:root[data-theme="dark"] .btn:hover { border-color: var(--cloud); }
:root[data-theme="dark"] .btn.on { background: var(--cloud); border-color: var(--cloud); color: var(--navy); }

/* ── Sections: numbered contents along the foot of the cover ── */
.tabs { display: flex; gap: 32px; margin-top: auto; padding-top: 56px; border-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: baseline; gap: 8px; flex-shrink: 0;
  font-size: 15px; font-weight: 500; padding: 18px 0 20px; border: none; background: none;
  color: rgba(241, 241, 241, .62); cursor: pointer; white-space: nowrap; transition: color .15s;
}
.tab .n { font-size: 12px; font-weight: 600; color: rgba(241, 241, 241, .4); font-variant-numeric: tabular-nums; }
.tab:hover { color: #fff; }
.tab.active { color: #fff; font-weight: 600; }
.tab.active .n { color: var(--green); }
.tab.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--orange); border-radius: 2px 2px 0 0; }

/* One sheet: content (fluid) + specification column (sticky, hairline left) */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 344px; }
.sheet { width: min(1344px, calc(100% - 96px)); margin: 32px auto 0; background: var(--surface); border-radius: 16px; box-shadow: var(--sh-card); }
#mainout { padding: 40px 44px 52px; min-width: 0; }

/* ── Controls panel ── */
.ctrl { position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow-y: auto; padding: 28px 28px 32px; border-left: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.spec-roof { position: relative; overflow: hidden; isolation: isolate; height: 132px; border-radius: 12px; margin-bottom: 18px; background: var(--ink); --ax: 50%; --ay: 50%; }
.spec-roof .cover-map { z-index: 0; transform-origin: var(--px) var(--py); scale: .55; }
.spec-head h2 { font-size: 20px; font-weight: 600; color: var(--accent-text); letter-spacing: -.005em; }
.spec-head p { font-size: 13px; color: var(--text-2); margin: 4px 0 24px; }
.sheet-head { display: none; }
.grp { border-top: 1px solid var(--line); padding: 16px 0; }
.grp:first-child { border-top: none; padding-top: 0; }
.sect {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--accent-text);
}
.sect::-webkit-details-marker { display: none; }
.sect::after { /* chevron (Iconly Arrow - Down 2 shape, drawn in CSS) */
  content: ''; grid-column: 2; grid-row: 1; align-self: center; width: 8px; height: 8px; margin-right: 3px;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.grp[open] > .sect::after { transform: rotate(-135deg) translateY(-1px); }
.grp-name { grid-column: 1; grid-row: 1; }
.grp-sum { grid-column: 1 / -1; font-size: 12.5px; font-weight: 400; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp[open] .grp-sum { display: none; }
.grp-body { padding-top: 16px; }
.sect:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
.fld { margin-bottom: 14px; }
.fl { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 8px; }
.fl label { font-size: 12px; font-weight: 500; color: var(--text-1); }
.fv { font-size: 13px; font-weight: 700; color: var(--accent-text); text-align: end; white-space: nowrap; }
.hint { font-size: 11px; font-weight: 400; color: var(--text-3); margin-top: 3px; line-height: 1.45; }

/* Range slider — navy fill to the thumb (--p set by app.js), white thumb with navy ring */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; --p: 50%; }
input[type=range]::-webkit-slider-runnable-track {
  height: 5px; border-radius: var(--r-pill);
  background: linear-gradient(var(--navy), var(--navy)) 0 / var(--p) 100% no-repeat, var(--line);
}
input[type=range]::-moz-range-track { height: 5px; border-radius: var(--r-pill); background: var(--line); }
input[type=range]::-moz-range-progress { height: 5px; border-radius: var(--r-pill); background: var(--navy); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7.5px; border-radius: 50%;
  background: #fff; border: 3px solid var(--navy); box-shadow: 0 2px 8px rgba(33, 74, 111, .3); transition: transform .1s;
}
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); box-shadow: 0 2px 8px rgba(33, 74, 111, .3); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(242, 103, 59, .35); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(var(--cloud), var(--cloud)) 0 / var(--p) 100% no-repeat, var(--line); }
  :root:not([data-theme="light"]) input[type=range]::-moz-range-progress { background: var(--cloud); }
  :root:not([data-theme="light"]) input[type=range]::-webkit-slider-thumb, :root:not([data-theme="light"]) input[type=range]::-moz-range-thumb { border-color: var(--cloud); background: var(--navy); }
}
:root[data-theme="dark"] input[type=range]::-webkit-slider-runnable-track { background: linear-gradient(var(--cloud), var(--cloud)) 0 / var(--p) 100% no-repeat, var(--line); }
:root[data-theme="dark"] input[type=range]::-moz-range-progress { background: var(--cloud); }
:root[data-theme="dark"] input[type=range]::-webkit-slider-thumb, :root[data-theme="dark"] input[type=range]::-moz-range-thumb { border-color: var(--cloud); background: var(--navy); }

.num {
  width: 82px; font-family: var(--font); font-size: 13px; font-weight: 700; text-align: end;
  background: var(--surface2); color: var(--text-1); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 3px 7px;
}
.num:focus { outline: none; border-color: var(--navy); }

/* Checkbox rows → toggles (label left, switch right); on = navy */
.chk { display: flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 500; color: var(--text-1); cursor: pointer; line-height: 1.35; }
.chk:has(input[type=checkbox]) { flex-direction: row-reverse; justify-content: space-between; background: var(--surface2); border-radius: var(--r-md); padding: 10px 12px; }
.chk input[type=checkbox] {
  -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; cursor: pointer;
  width: 42px; height: 24px; border-radius: var(--r-pill); background: rgba(90, 107, 122, .3); transition: background .18s;
}
.chk input[type=checkbox]::after {
  content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); transition: inset-inline-start .18s;
}
.chk input[type=checkbox]:checked { background: var(--navy); }
.chk input[type=checkbox]:checked::after { inset-inline-start: 21px; }
.chk input[type=radio] {
  -webkit-appearance: none; appearance: none; flex-shrink: 0; cursor: pointer;
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); transition: border-color .15s, box-shadow .15s;
}
.chk input[type=radio]:checked { border-color: var(--navy); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 10px var(--navy); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chk input[type=checkbox]:checked { background: var(--cloud); }
  :root:not([data-theme="light"]) .chk input[type=checkbox]:checked::after { background: var(--navy); }
  :root:not([data-theme="light"]) .chk input[type=radio]:checked { border-color: var(--cloud); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 10px var(--cloud); }
}
:root[data-theme="dark"] .chk input[type=checkbox]:checked { background: var(--cloud); }
:root[data-theme="dark"] .chk input[type=checkbox]:checked::after { background: var(--navy); }
:root[data-theme="dark"] .chk input[type=radio]:checked { border-color: var(--cloud); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 10px var(--cloud); }

select {
  -webkit-appearance: none; appearance: none; width: 100%; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 500; color: var(--text-1);
  background: var(--surface2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(6.000000, 7.000000)' fill='%235A6B7A' fill-rule='nonzero'%3E%3Cpath d='M4.869,9.63078422 C4.811,9.57428154 4.563,9.36093522 4.359,9.16220166 C3.076,7.99707745 0.976,4.95762299 0.335,3.36678032 C0.232,3.12518266 0.014,2.51436922 0,2.18801754 C0,1.87530443 0.072,1.57720409 0.218,1.29274233 C0.422,0.938139308 0.743,0.653677545 1.122,0.497808086 C1.385,0.397467121 2.172,0.241597662 2.186,0.241597662 C3.047,0.0857282026 4.446,0 5.992,0 C7.465,0 8.807,0.0857282026 9.681,0.213346322 C9.695,0.227959084 10.673,0.383828544 11.008,0.554310765 C11.62,0.867023868 12,1.47783731 12,2.13151486 L12,2.18801754 C11.985,2.613736 11.605,3.5090112 11.591,3.5090112 C10.949,5.01412567 8.952,7.98343887 7.625,9.17681442 C7.625,9.17681442 7.284,9.51290794 7.071,9.65903556 C6.765,9.88699464 6.386,10 6.007,10 C5.584,10 5.19,9.87238188 4.869,9.63078422'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 9px 34px 9px 12px;
}
select:focus { outline: none; border-color: var(--navy); }

/* ── Figures strip: eight readings in one ruled row ── */
.figures { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 0 var(--gut); background: var(--surface); border-bottom: 1px solid var(--line); }
.mc { padding: 20px 16px 20px 0; min-width: 0; }
.mc + .mc { padding-left: 18px; border-left: 1px solid var(--line); }
.ml { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; margin-top: 4px; color: var(--accent-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.mu { font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--text-2); margin-left: 5px; }

/* ── Cards & charts ── */
.card { min-width: 0; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.panel > .card:last-child, .opt-grid > .card { border-bottom: none; margin-bottom: 0; }
.card-title {
  font-size: 20px; font-weight: 600; letter-spacing: -.005em; line-height: 1.25; color: var(--accent-text);
  margin-bottom: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap;
}
.card-title span { font-size: 13px; font-weight: 400; color: var(--text-2); }
/* IQD equivalent — sits on its own line under every $ figure (Rule 11: "IQD" always prefixed) */
.iqd { display: block; font-size: 11px; font-weight: 500; letter-spacing: .01em; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fv .iqd { font-size: 10.5px; margin-top: 0; }
.grant-total .iqd { font-size: 12px; color: rgba(241, 241, 241, .65); }
.ch { position: relative; width: 100%; }
.ch-h140 { height: 140px; } .ch-h160 { height: 175px; } .ch-h200 { height: 215px; } .ch-h220 { height: 235px; }
.note { font-size: 11px; color: var(--text-3); margin-top: 10px; line-height: 1.55; }
.note.warn {
  color: var(--text-1); background: var(--orange-t); padding: 11px 14px; border-radius: var(--r-md); margin: 0 0 10px;
  font-weight: 500; border-inline-start: 4px solid var(--orange);
}
.c-green { color: var(--navy); } .c-blue { color: var(--violet); } .c-sun { color: var(--orange); } .c-red { color: var(--orange); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .c-green { color: var(--green); }
  :root:not([data-theme="light"]) .c-blue { color: #A9A5D6; }
}
:root[data-theme="dark"] .c-green { color: var(--green); }
:root[data-theme="dark"] .c-blue { color: #A9A5D6; }

.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.card .stat-grid { margin-bottom: 0; }
.batt-stat { padding: 16px 16px 16px 0; min-width: 0; }
.batt-stat:not(:nth-child(3n+1)) { padding-left: 18px; border-left: 1px solid var(--line); }
.batt-stat:nth-child(n+4) { border-top: 1px solid var(--line); }
.batt-stat .v { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--accent-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.batt-stat .l { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.35; }

.opt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }

/* ── Heat map: months × days ── */
.heatmap { display: grid; grid-template-columns: 34px repeat(31, minmax(0, 1fr)); gap: 2px; font-size: 11.5px; font-weight: 500; color: var(--text-3); align-items: center; }
.heatmap .cell { height: 12px; border-radius: 3px; }
.hm-legend { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.hm-scale { width: 100px; height: 8px; border-radius: var(--r-pill); }

/* ── Grants ── */
.grant-item { display: flex; justify-content: space-between; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line); gap: 14px; }
.grant-item:last-of-type { border-bottom: none; }
.grant-name { font-size: 12.5px; font-weight: 600; }
.grant-desc { font-size: 11px; font-weight: 400; color: var(--text-2); margin-top: 2px; text-align: justify; }
.grant-val { font-size: 14px; font-weight: 700; color: var(--accent-text); white-space: nowrap; text-align: end; }
.grant-val.muted { color: var(--text-3); font-weight: 500; }
.grant-total {
  position: relative; background: var(--navy); border-radius: var(--r-lg); padding: 15px 18px;
  display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px;
}
.grant-total .l { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(241, 241, 241, .8); }
.grant-total .v { font-size: 24px; font-weight: 700; color: #fff; }
.payback-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pb-box { border-radius: 14px; padding: 20px 22px; }
.pb-box .v { font-size: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pb-box .l { font-size: 13px; font-weight: 400; margin-top: 4px; }
.pb-box.before { background: var(--surface2); } .pb-box.before .v { color: var(--text-2); } .pb-box.before .l { color: var(--text-3); }
.pb-box.after { background: var(--navy); } .pb-box.after .v { color: #fff; } .pb-box.after .l { color: rgba(241, 241, 241, .7); }

/* Informational copy — Body style, justified */
.prose h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--accent-text); margin: 20px 0 6px; }
.prose h3:first-of-type { margin-top: 4px; }
.prose p, .prose li { font-size: 13px; font-weight: 300; color: var(--text-2); text-align: justify; line-height: 1.7; }
.prose strong { font-weight: 600; color: var(--text-1); }
.prose p + p { margin-top: 6px; }
.prose ul { padding-inline-start: 18px; }
.prose li::marker { color: var(--orange); }

#rsvg { display: block; width: 100%; height: auto; }

/* ── Location tab ── */
.loc-search { display: flex; gap: 8px; margin-bottom: 10px; }
.loc-search input {
  flex: 1; min-width: 0; font-family: var(--font); font-size: 13px; color: var(--text-1);
  padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface2);
}
.loc-search input:focus { outline: none; border-color: var(--navy); }
.loc-search input::placeholder { color: var(--text-3); }
.loc-results { list-style: none; margin: 0 0 10px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); max-height: 220px; overflow: auto; box-shadow: var(--sh-card); }
.loc-results li { border-bottom: 1px solid var(--line); }
.loc-results li:last-child { border-bottom: none; }
.loc-results button { display: block; width: 100%; text-align: start; background: none; border: none; padding: 11px 14px; font-size: 12.5px; cursor: pointer; color: var(--text-1); }
.loc-results button:hover { background: var(--navy-t); }
.loc-results .muted { padding: 11px 14px; font-size: 12.5px; color: var(--text-3); }
.map { height: 440px; border-radius: var(--r-lg); background: var(--ink); z-index: 0; overflow: hidden; }
.map.drawing { cursor: crosshair; }
.map.drawing .leaflet-grab { cursor: crosshair; }
.map-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vtx { background: #fff; border: 3px solid var(--navy); border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.vtx.first { background: var(--orange); border-color: #fff; width: 20px !important; height: 20px !important; margin: -10px 0 0 -10px !important; }
.roof-type { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.stat-grid .wide { grid-column: span 2; }
.flip-row { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.warn-text { color: var(--orange) !important; }
@keyframes flash { 0% { box-shadow: 0 0 0 4px rgba(242, 103, 59, .5); background: var(--orange-t); } 100% { box-shadow: 0 0 0 0 transparent; } }
.flash { animation: flash 1.4s ease-out; border-radius: var(--r-md); }
.roof-link { font-size: 11px; line-height: 1.45; margin-top: 6px; padding: 8px 11px; border-radius: var(--r-md); background: var(--navy-t); color: var(--accent-text); font-weight: 500; border-inline-start: 3px solid var(--green); }
.roof-link.manual { background: var(--orange-t); border-inline-start-color: var(--orange); }
.roof-link button { font: inherit; font-weight: 700; background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.date-row { display: flex; gap: 6px; align-items: center; }
.date-row.dp { position: relative; }
.dp-field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--text-1); text-align: start;
  min-height: 36px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface2);
  transition: border-color .15s, box-shadow .15s;
}
.dp-field .ic { color: var(--navy); }
.dp-field .dp-value { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-field .dp-chev { width: 14px; height: 14px; color: var(--text-3); transition: transform .2s; }
.dp-field:hover { border-color: var(--navy); }
.dp-field[aria-expanded="true"] { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-t); }
.dp-field[aria-expanded="true"] .dp-chev { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dp-field .ic { color: var(--cloud); }
  :root:not([data-theme="light"]) .dp-field:hover, :root:not([data-theme="light"]) .dp-field[aria-expanded="true"] { border-color: var(--cloud); }
}
:root[data-theme="dark"] .dp-field .ic { color: var(--cloud); }
:root[data-theme="dark"] .dp-field:hover, :root[data-theme="dark"] .dp-field[aria-expanded="true"] { border-color: var(--cloud); }

/* Calendar popover */
.dp-pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 12px 36px rgba(12, 31, 48, .18); padding: 14px 12px 12px;
  animation: dp-in .16s ease-out;
}
@keyframes dp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dp-pop { background: #1B3D5C; box-shadow: 0 12px 36px rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] .dp-pop { background: #1B3D5C; box-shadow: 0 12px 36px rgba(0, 0, 0, .45); }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dp-title { font-size: 14px; font-weight: 700; color: var(--accent-text); }
.dp-nav {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer;
  border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--accent-text); transition: border-color .15s, background .15s;
}
.dp-nav .ic { width: 14px; height: 14px; }
.dp-nav:hover:not(:disabled) { border-color: var(--navy); }
.dp-nav:disabled { opacity: .35; cursor: default; }
.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px 0; }
.dp-week span { text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--text-3); padding: 2px 0 6px; }
.dp-day {
  justify-self: center; width: 100%; max-width: 36px; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--text-1); transition: background .12s, color .12s;
}
.dp-day:hover { background: var(--navy-t); }
.dp-day.out { color: var(--text-3); font-weight: 500; }
.dp-day.off { color: var(--text-3); opacity: .4; cursor: default; }
.dp-day.today { box-shadow: inset 0 0 0 2px var(--orange); }
.dp-day.sel { background: var(--navy); color: #fff; font-weight: 700; }
.dp-day.sel.today { box-shadow: inset 0 0 0 2px var(--orange), inset 0 0 0 4px var(--navy); }
.dp-day:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dp-day.sel { background: var(--cloud); color: var(--navy); }
  :root:not([data-theme="light"]) .dp-day.sel.today { box-shadow: inset 0 0 0 2px var(--orange), inset 0 0 0 4px var(--cloud); }
}
:root[data-theme="dark"] .dp-day.sel { background: var(--cloud); color: var(--navy); }
:root[data-theme="dark"] .dp-day.sel.today { box-shadow: inset 0 0 0 2px var(--orange), inset 0 0 0 4px var(--cloud); }
.dp-sum {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 10px 2px 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3);
}
.dp-sum b { font-weight: 700; color: var(--accent-text); }
.dp-foot { display: flex; gap: 8px; }
.dp-foot .btn { min-height: 40px; }
.dp-today { flex: 0 0 auto; }
.dp-apply { flex: 1; background: var(--navy); border-color: var(--navy); color: #fff; font-size: 12px; }
.dp-apply:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dp-apply { background: var(--cloud); border-color: var(--cloud); color: var(--navy); }
}
:root[data-theme="dark"] .dp-apply { background: var(--cloud); border-color: var(--cloud); color: var(--navy); }
.date-row > .btn { width: 36px; padding: 0; font-size: 16px; }
.date-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.date-chips .btn { font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 5px 11px; min-height: 30px; background: var(--surface2); }
.date-chips .btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.leaflet-container { font: inherit; }
.leaflet-control-attribution { font-size: 8.5px; background: rgba(255, 255, 255, .55) !important; color: rgba(12, 31, 48, .6) !important; }
.leaflet-bar { border: none !important; box-shadow: var(--sh-card) !important; border-radius: var(--r-md) !important; overflow: hidden; }
.leaflet-bar a { color: var(--navy) !important; }

.panel { display: none; }
.panel.active { display: block; }

/* ── Footer: tagline lockup (Anjoman Bold, white on navy, green bar flush left) ── */
.site-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
  margin: 40px 0 0; padding: 28px var(--gut);
  background: var(--navy); color: rgba(241, 241, 241, .65); font-size: 11.5px;
}
.tagline { display: flex; flex-direction: column; color: #fff; font-size: 16px; font-weight: 700; line-height: 1.1; }

.fab, .backdrop { display: none; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: #fff; padding: 11px 18px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500; box-shadow: 0 8px 24px rgba(12, 31, 48, .3);
  opacity: 0; pointer-events: none; transition: all .2s; z-index: 60;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Responsive ── */
@media (max-width: 1180px) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mc:nth-child(4n+1) { padding-left: 0; border-left: none; }
  .mc:nth-child(n+5) { border-top: 1px solid var(--line); }
  .cols { grid-template-columns: minmax(0, 1fr) 312px; }
  #mainout { padding: 32px 32px 44px; }
}

@media (max-width: 720px) {
  html { font-size: 14px; }
  .app { --gut: 16px; }

  /* Cover: logo + icon actions, the roof upper-right, the answer below it */
  .cover { min-height: 0; --ax: 74%; --ay: 152px; } /* centred between the header band (~80) and the location line (~224) */
  .cover-bar { padding: 18px 0; }
  .brand { gap: 10px; }
  .brand-div, .brand h1 { display: none; }
  .brand-logo { --logo-h: 40px; }
  #annualbadge { display: none; }
  .icon-btn { width: 44px; height: 44px; }
  .cover-map { transform-origin: var(--px) var(--py); scale: .5; }
  .cover-tag { top: var(--ay); left: auto; right: calc(100% - var(--ax) + var(--half-x, 70px) * .5 + 16px); transform: translateY(-50%); font-size: 12px; padding: 6px 11px; }
  .cover-copy { padding-top: 148px; }
  .cover-scrim {
    background:
      linear-gradient(0deg, rgba(12, 31, 48, .96) 0%, rgba(12, 31, 48, .9) 48%, rgba(12, 31, 48, .25) 78%, rgba(12, 31, 48, .55) 100%);
  }
  .hero-fig { font-size: 56px; margin-top: 12px; }
  .hero-save { font-size: 16px; }
  .hero-line { font-size: 21px; margin-top: 14px; }
  .cover-credit { right: 8px; top: 84px; bottom: auto; font-size: 8.5px; } /* just under the header band, clear of the tab rail */
  .prose p, .prose li, .grant-desc { text-align: left; }
  .tabs { gap: 24px; padding-top: 20px; margin: 0 -16px; padding-left: 16px; padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .tab { font-size: 14px; padding: 14px 0 16px; min-height: 48px; }

  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc, .mc + .mc { padding: 11px 12px 11px 0; border-left: none; }
  .mc:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--line); }
  .figures { padding-bottom: 4px; }
  .mc:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ml { font-size: 12.5px; } .mv { font-size: 20px; margin-top: 2px; }

  .sheet { width: 100%; margin: 0; border-radius: 0; box-shadow: none; }
  .cols { grid-template-columns: minmax(0, 1fr); }
  #mainout { padding: 28px 16px 36px; }
  .card { padding-bottom: 32px; margin-bottom: 32px; }
  .card-title { font-size: 18px; }
  .note { font-size: 12px; }
  .opt-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .opt-grid > .card { border-bottom: 1px solid var(--line); margin-bottom: 32px; }
  .opt-grid > .card:last-child { border-bottom: none; margin-bottom: 0; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 32px; }
  .batt-stat, .batt-stat:not(:nth-child(3n+1)) { padding: 14px 12px 14px 0; border-left: none; }
  .batt-stat:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--line); }
  .batt-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stat-grid .wide { grid-column: span 2; padding-left: 0 !important; border-left: none !important; }
  .heatmap { grid-template-columns: 26px repeat(31, minmax(0, 1fr)); gap: 1px; }
  .heatmap .cell { height: 10px; border-radius: 2px; }
  .payback-row { grid-template-columns: minmax(0, 1fr); }
  .site-foot { margin: 0 0 calc(72px + env(safe-area-inset-bottom)); padding: 24px 16px; }

  /* Specification column becomes a bottom sheet */
  .spec-head { display: none; }
  .ctrl {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 50; max-height: 82vh;
    background: var(--surface); border-left: none; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 0 18px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); box-shadow: var(--sh-sheet); overscroll-behavior: contain;
  }
  .ctrl.open { transform: translateY(0); }
  .sheet-head {
    display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1;
    background: var(--surface); padding: 22px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
  }
  .sheet-head::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line); }
  .sheet-head strong { font-size: 17px; font-weight: 700; color: var(--accent-text); }
  .sheet-summary { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }
  .sheet-summary b { color: var(--accent-text); }
  .backdrop { display: block; position: fixed; inset: 0; background: rgba(12, 31, 48, .5) !important; z-index: 40; backdrop-filter: blur(2px); }

  /* Docked action bar (not a floating button) */
  .fab {
    display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--orange); color: #fff; border: none; padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    font-size: 15px; font-weight: 600; text-align: start; cursor: pointer;
  }
  .fab span { flex: 1; }
  .fab .ic { width: 20px; height: 20px; }
  .fab .chev { transform: rotate(180deg); width: 16px; height: 16px; }

  .fl label, .fv { font-size: 13.5px; }
  select { font-size: 16px; padding: 11px 36px 11px 14px; } /* ≥16px stops iOS zooming on focus */
  .num { font-size: 16px; width: 104px; padding: 6px 8px; }
  .chk { font-size: 13.5px; }
  .chk:has(input[type=checkbox]) { padding: 12px 14px; min-height: 48px; }
  .btn { min-height: 44px; }
  .map { height: 58vh; min-height: 300px; }
  .map-tools .btn { flex: 1; font-size: 11px; }
  .loc-search input { font-size: 16px; padding: 11px 14px; }
  .loc-results button { padding: 13px 14px; font-size: 14px; }
  .hint { font-size: 12px; }
  .roof-link { font-size: 12.5px; }
  .dp-field { font-size: 15px; min-height: 44px; }
  .dp-day { max-width: 42px; font-size: 14px; }
  .dp-pop { padding: 16px 14px 14px; }
  .date-row > .btn { width: 44px; }
  .date-chips .btn { font-size: 12.5px; padding: 6px 12px; min-height: 36px; }
  .vtx { width: 22px !important; height: 22px !important; margin: -11px 0 0 -11px !important; }
  .vtx.first { width: 26px !important; height: 26px !important; margin: -13px 0 0 -13px !important; }
  input[type=range] { height: 36px; }
  .fld { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) { .ctrl, .dp-pop { transition: none; animation: none; } }

/* ── Print ── */
@media print {
  .ctrl, .tabs, .actions, .fab, .backdrop, .toast, .cover-credit { display: none !important; }
  .cover { min-height: 0; padding-bottom: 32px; }
  .cols { grid-template-columns: 1fr; }
  .sheet { width: 100%; box-shadow: none; }
  .panel { display: block !important; break-inside: avoid; }
  .panel[hidden] { display: block !important; }
  .card { break-inside: avoid; }
  body { background: #fff; color: #000; }
  .cover, .grant-total, .pb-box, .site-foot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Empty state (no battery → no state-of-charge chart) */
.empty { font-size: 14px; color: var(--text-2); padding: 18px 0 4px; }
.link { font: inherit; font-weight: 600; color: var(--accent-text); background: none; border: none; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ══ RTL (Arabic / Kurdish) ═══════════════════════════════════════════════
   Only the direction-sensitive cases are flipped: the vertical separators
   (which are border-left + matching padding-left), prose alignment, and the
   few corner-anchored overlays. Centred and symmetric rules already work. */
[dir="rtl"] .ctrl { border-left: none; border-right: 1px solid var(--line); }

[dir="rtl"] .mc + .mc,
[dir="rtl"] .batt-stat:not(:nth-child(3n+1)) {
  padding-left: 0; padding-right: 18px;
  border-left: none; border-right: 1px solid var(--line);
}

[dir="rtl"] .prose p,
[dir="rtl"] .prose li,
[dir="rtl"] .grant-desc { text-align: right; }

[dir="rtl"] .cover-credit { right: auto; left: 8px; }

/* KPI values in RTL.
   The containers must stay RTL: that right-aligns them with their labels and
   puts the unit on the correct side of the number (DOM order number→unit
   renders as unit→number, i.e. the number sits right, read first).
   Only the numeral itself is isolated as LTR, so digits, decimals and
   thousands separators keep their order (e.g. "33.315, 44.366"). */
[dir="rtl"] .mv, [dir="rtl"] .iqd, [dir="rtl"] .hero-fig, [dir="rtl"] .hero-save,
[dir="rtl"] .batt-stat .v, [dir="rtl"] .stat .v, [dir="rtl"] .fv, [dir="rtl"] .grp-sum,
[dir="rtl"] .ml, [dir="rtl"] .batt-stat .l {
  direction: rtl; text-align: right;
}
[dir="rtl"] .mv > [data-m], [dir="rtl"] .mv > span:not(.mu),
[dir="rtl"] .batt-stat .v > [data-m], [dir="rtl"] .hero-fig > [id],
[dir="rtl"] .fv > [id], [dir="rtl"] .fv > .num {
  direction: ltr; unicode-bidi: isolate;
}

/* The native range input reverses in RTL (thumb runs right→left), but the
   track fill is painted from the physical left via background-position: 0,
   so the fill and the thumb drift apart. Paint it from the right instead. */
[dir="rtl"] input[type=range]::-webkit-slider-runnable-track { background-position: right; }

@media (max-width: 900px) {
  [dir="rtl"] .mc:nth-child(4n+1) { padding-right: 0; border-right: none; }
}

@media (max-width: 620px) {
  [dir="rtl"] .prose p, [dir="rtl"] .prose li, [dir="rtl"] .grant-desc { text-align: right; }
  [dir="rtl"] .mc, [dir="rtl"] .mc + .mc { padding: 11px 0 11px 12px; border-right: none; }
  [dir="rtl"] .mc:nth-child(2n) { padding-right: 14px; border-right: 1px solid var(--line); border-left: none; }
  [dir="rtl"] .batt-stat,
  [dir="rtl"] .batt-stat:not(:nth-child(3n+1)) { padding: 14px 0 14px 12px; border-right: none; }
  [dir="rtl"] .batt-stat:nth-child(2n) { padding-right: 14px; border-right: 1px solid var(--line); border-left: none; }
  [dir="rtl"] .stat-grid .wide { padding-right: 0 !important; border-right: none !important; }
  [dir="rtl"] .cover-tag { right: auto; left: calc(100% - var(--ax) + var(--half-x, 70px) * .5 + 16px); }
}

/* Longer translated titles must not collide with the action row */
.brand h1 { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.actions { flex-shrink: 0; }

/* With seven action buttons the title has little room; hide it rather than
   truncate to a stub (the logo beside it already identifies the tool). */
@media (max-width: 1280px) { .brand h1 { display: none; } .brand-div { display: none; } }

/* The cover scrim darkens the side the hero copy sits on. That copy moves to
   the right in RTL, so the horizontal gradient has to be mirrored (90deg ->
   270deg) or the Arabic/Kurdish headline lands on bright satellite imagery. */
[dir="rtl"] .cover-scrim {
  background:
    linear-gradient(0deg, rgba(12, 31, 48, .92) 0%, rgba(12, 31, 48, 0) 26%),
    linear-gradient(270deg, rgba(12, 31, 48, .95) 0%, rgba(12, 31, 48, .86) 32%, rgba(12, 31, 48, .3) 62%, rgba(12, 31, 48, .18) 100%);
}