/* Helios — whole-building energy analysis. IEA & Building Insights Together edition.
   Official IEA branding palette (IEA Primary Deep Blue, Clean Energy Cyan, Neutral Slates). */
:root{
  /* IEA Brand & Co-branding Palette */
  --iea-navy:#002244;
  --iea-blue:#004f9e;
  --iea-blue-hover:#003d7a;
  --iea-blue-light:#e6f0fa;
  --iea-cyan:#00a3e0;
  --iea-slate-dark:#1e293b;
  --iea-slate-mid:#475569;
  --iea-slate-light:#94a3b8;
  --iea-bg:#f8fafc;
  --iea-card:#ffffff;
  --iea-border:#e2e8f0;
  --iea-border-strong:#cbd5e1;

  /* BIT & Helios token mappings (maintaining compatibility with existing selectors) */
  --core-deep:#002244;
  --core-deep-soft:#1e293b;
  --core-deep-mid:#334155;
  --core-deep-tint:#e6f0fa;
  --core-accent:#004f9e;
  --core-accent-deep:#003d7a;
  --core-accent-soft:#475569;
  --core-accent-bright:#00a3e0;
  --core-accent-tint:#e6f0fa;
  --core-ink:#0f172a;
  --core-ink-soft:#1e293b;
  --core-ink-muted:#475569;
  --core-ink-faint:#64748b;
  --core-paper:#f8fafc;
  --core-paper-warm:#f1f5f9;
  --core-paper-cool:#ffffff;
  --core-line:#e2e8f0;
  --core-line-strong:#94a3b8;
  --core-secondary:#475569;
  --core-secondary-deep:#1e293b;
  --core-secondary-soft:#94a3b8;
  --core-secondary-tint:#f1f5f9;
  --core-rose-deep:#b91c1c;
  --core-rose-soft:#fecaca;
  --core-rose-tint:#fef2f2;
  --core-amber:#b45309;
  --core-amber-deep:#92400e;
  --core-amber-soft:#fde68a;
  --core-amber-tint:#fefce8;
  --core-sky:#0284c7;
  --core-sky-deep:#0369a1;
  --core-sky-soft:#bae6fd;
  --core-sky-tint:#f0f9ff;
  --core-green:#15803d;
  --core-green-tint:#f0fdf4;
  --core-focus:#004f9e;
  --core-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --core-font-serif:Georgia,serif;
  --core-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  
  /* Modern clean shape contracts */
  --radius-control:6px;
  --radius-panel:8px;
  --radius-dialog:12px;
  --radius-status:999px;

  /* Legacy names kept for the application code */
  --navy:var(--iea-navy);
  --blue:var(--iea-blue);
  --cyan:var(--iea-cyan);
  --bg:var(--core-paper);
  --card:var(--core-paper-cool);
  --line:var(--core-line);
  --ink:var(--core-ink);
  --muted:var(--core-ink-muted);
  --ok:var(--core-green);
  --warn:var(--core-amber-deep);
  --hot:var(--core-rose-deep);
  --heat:#c2410c;
  --cool:#0284c7;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
body{font-family:var(--core-font-sans); background:var(--bg); color:var(--ink); font-size:14px; line-height:1.5;}
.hidden,[hidden]{display:none !important;}
:where(button,input,select,textarea){font:inherit;}
:where(button,a,input,select,[tabindex]):focus-visible{outline:3px solid var(--core-focus); outline-offset:2px;}
::selection{background:var(--core-accent-tint); color:var(--core-deep);}

/* Gate Modal & Replay Modal styling */
.gate-overlay{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(circle at 50% 20%, #002d62 0%, #001733 100%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.gate-box{
  background:#ffffff; border-radius:12px; max-width:440px; width:100%;
  padding:36px 32px; box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);
  text-align:center; border:1px solid #e2e8f0;
}
.gate-logos{
  display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:24px;
}
.gate-logos img, .gate-logos svg{
  height:38px; width:auto;
}
.gate-logos .divider{
  width:1px; height:32px; background:#cbd5e1;
}
.gate-title{
  font-size:22px; font-weight:700; color:#002244; margin-bottom:6px; letter-spacing:-0.02em;
}
.gate-subtitle{
  font-size:13px; color:#64748b; margin-bottom:24px; line-height:1.45;
}
.gate-form{
  display:flex; flex-direction:column; gap:14px;
}
.gate-input{
  width:100%; padding:11px 14px; font-size:14px; border:1px solid #cbd5e1;
  border-radius:6px; outline:none; transition:border-color 0.15s, box-shadow 0.15s;
}
.gate-input:focus{
  border-color:#004f9e; box-shadow:0 0 0 3px rgba(0,79,158,0.15);
}
.gate-btn{
  width:100%; padding:11px 16px; background:#004f9e; color:#ffffff; font-weight:600;
  font-size:14px; border:none; border-radius:6px; cursor:pointer; transition:background 0.15s;
}
.gate-btn:hover{
  background:#003d7a;
}
.gate-error{
  color:#b91c1c; font-size:12.5px; margin-top:4px; min-height:18px; text-align:left;
}
.gate-footer{
  margin-top:24px; padding-top:16px; border-top:1px solid #f1f5f9; font-size:11.5px; color:#94a3b8;
}

/* Header Co-branding */
.top .brand{display:flex; align-items:center; gap:16px;}
.top .brand-logos{display:flex; align-items:center; gap:12px;}
.top .brand-logos .iea-brand-logo{height:28px; width:auto;}
.top .brand-logos .brand-sep{width:1px; height:24px; background:var(--core-line-strong); opacity:0.4;}
.top .brand-logos svg{width:26px; height:26px; color:var(--core-ink);}

/* Import / Replay Modal styling */
.drop-zone{
  border:2px dashed var(--core-line-strong); border-radius:8px; padding:28px 20px;
  text-align:center; background:var(--core-paper-warm); cursor:pointer;
  transition:border-color 0.2s, background-color 0.2s; margin-bottom:16px;
}
.drop-zone:hover, .drop-zone.dragover{
  border-color:var(--iea-blue); background:var(--iea-blue-light);
}
.drop-zone-icon{
  width:40px; height:40px; color:var(--iea-blue); margin-bottom:8px;
}
.drop-zone-text{
  font-size:13.5px; font-weight:500; color:var(--core-ink);
}
.drop-zone-hint{
  font-size:12px; color:var(--core-ink-muted); margin-top:4px;
}
.bundle-preview{
  background:var(--core-paper); border:1px solid var(--core-line); border-radius:6px;
  padding:14px; margin-bottom:16px; text-align:left; font-size:12.5px; display:none;
}
.bundle-preview-title{
  font-weight:600; color:var(--iea-navy); margin-bottom:6px; display:flex; justify-content:space-between;
}
.bundle-preview-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; color:var(--core-ink-muted);
}
.bundle-preview-grid strong{
  color:var(--core-ink); font-weight:500;
}

.top{background:var(--core-paper); color:var(--core-ink); display:flex; align-items:center; gap:16px; padding:8px 24px; min-height:56px; border-bottom:1px solid var(--core-line);}
@media (max-width:600px){.top{padding:8px 16px; gap:10px;} .top .sub{font-size:11px;} .top .logo{font-size:20px;}}
.top .brand{display:flex; align-items:center; gap:12px;}
.top .brand svg{width:30px; height:30px; flex:0 0 30px; color:var(--core-ink);}
.top .logo{font-family:var(--core-font-sans); font-weight:400; font-size:22px; letter-spacing:-.02em; line-height:1;}
.top .logo span{color:var(--core-accent);}
.top .sub{font-size:12px; color:var(--core-ink-muted); margin-top:4px;}
.top-right{margin-left:auto; display:flex; align-items:center; gap:12px;}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:11px; padding:3px 10px; border-radius:var(--radius-status); font-weight:600; letter-spacing:.02em; border:1px solid transparent; white-space:nowrap;}
.badge-warn{background:var(--core-amber-tint); color:var(--core-amber-deep); border-color:var(--core-amber-soft);}
.badge-ok{background:var(--core-green-tint); color:var(--core-green); border-color:#b7c8b3;}
.run-state{font-size:12px; color:var(--core-ink-muted); font-family:var(--core-font-mono);}

.layout{display:grid; grid-template-columns:264px 1fr; min-height:calc(100vh - 56px);}

/* Step rail */
.rail{background:var(--card); border-right:1px solid var(--line); padding:22px 16px; position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;}
.rail h3{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--core-ink-faint); margin-bottom:12px; font-weight:600;}
.step{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:9px 10px; border:0; background:transparent; text-align:left; border-radius:var(--radius-control); cursor:pointer; margin-bottom:2px; font-size:13.5px; color:var(--muted);}
.step:hover{background:var(--core-paper-warm); color:var(--ink);}
.step.active{background:var(--core-accent-tint); color:var(--core-accent-deep); font-weight:600;}
.step .num{width:24px; height:24px; border-radius:var(--radius-control); background:var(--core-paper-warm); color:var(--core-ink-faint); display:grid; place-items:center; font-size:11px; font-weight:600; flex:0 0 24px; font-family:var(--core-font-mono); border:1px solid var(--line);}
.step.active .num{background:var(--core-accent); color:#fff; border-color:var(--core-accent);}
.step.done .num{background:var(--core-green); color:#fff; border-color:var(--core-green);}
.step .tick{color:var(--core-green); font-weight:600; margin-left:auto;}
.step.done .tick::after{content:"Done"; font-size:10px; letter-spacing:.04em; text-transform:uppercase;}
.step:not(.done) .tick{display:none;}
.runbtn{margin-top:18px; width:100%; padding:12px; border:1px solid var(--core-accent); border-radius:var(--radius-control); background:var(--core-accent); color:#fff; font-size:14px; font-weight:600; cursor:pointer;}
.runbtn:disabled{background:var(--core-secondary-soft); border-color:var(--core-secondary-soft); cursor:not-allowed;}
.runbtn:hover:not(:disabled){background:var(--core-accent-deep); border-color:var(--core-accent-deep);}
.rail-status{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.5;}
.rail hr{border:none; border-top:1px solid var(--line); margin:14px 0;}
.rail-actions{display:flex; flex-direction:column; gap:8px;}
.rail-actions .smallbtn{margin:0;}

/* Reading column */
.main{padding:28px 32px 48px; max-width:1180px; min-width:0; width:100%;}
.section{display:block; padding-bottom:8px; margin-bottom:36px;}
.section::before{content:""; display:block; height:1px; background:var(--line); margin-bottom:22px;}
.section:first-child::before{display:none;}
.eyebrow{font-family:var(--core-font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--core-ink-faint); margin-bottom:8px;}
.section h2{font-size:22px; font-weight:400; letter-spacing:-.015em; margin-bottom:4px; color:var(--ink);}
.section .sub{color:var(--muted); font-size:13.5px; margin-bottom:18px; max-width:78ch;}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-panel); padding:18px; margin-bottom:14px; min-width:0;}
.card h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--core-ink-faint); margin-bottom:14px; display:flex; align-items:center; gap:8px; font-weight:600;}

.grid{display:grid; gap:14px;}
.g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}

.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:5px; font-weight:500;}
.field input,.field select{width:100%; padding:9px 11px; border:1px solid var(--core-line-strong); border-radius:var(--radius-control); font-size:14px; background:#fff; color:var(--ink);}
.field input:focus,.field select:focus{outline:2px solid var(--core-accent-soft); outline-offset:0; border-color:var(--core-accent);}
.field input[readonly]{background:var(--core-paper-warm); font-weight:600; color:var(--core-deep-soft);}
.field input[type=range]{padding:0; accent-color:var(--core-accent); border:0;}
.hint{font-size:11.5px; color:var(--core-ink-faint); margin-top:4px; font-weight:400; display:block; line-height:1.45;}
.chip{display:inline-block; background:var(--core-green-tint); color:var(--core-green); border-radius:var(--radius-control); font-size:12px; padding:4px 10px; font-weight:600; margin-right:6px;}
.pill{display:inline-block; font-size:11.5px; background:var(--core-paper-warm); border:1px solid var(--line); color:var(--core-ink-muted); padding:2px 8px; border-radius:var(--radius-status);}

.form-actions{display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap;}
.weather-info{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);}
.warnings{font-size:12.5px; color:var(--warn); margin-top:8px; line-height:1.5;}
.warnings .err{color:var(--hot); font-weight:600;}
.computed,.computed-line{font-size:13px; color:var(--muted); margin-top:10px;}
.computed b,.computed-line b{color:var(--core-deep-soft); font-variant-numeric:tabular-nums;}
.result-freshness{padding:9px 12px; margin:-4px 0 14px; border:1px solid var(--line); border-radius:var(--radius-control); font-size:12.5px; font-weight:500;}
.result-freshness.neutral{background:var(--core-paper-cool); color:var(--muted);}
.result-freshness.pending{background:var(--core-accent-tint); border-color:var(--core-sky-soft); color:var(--core-accent-deep);}
.result-freshness.fresh{background:var(--core-green-tint); border-color:#b7c8b3; color:var(--core-green);}
.result-freshness.stale{background:var(--core-amber-tint); border-color:var(--core-amber-soft); color:var(--core-amber-deep);}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-control); border:1px solid var(--core-line-strong); background:#fff; font-size:13px; font-weight:500; color:var(--core-ink); cursor:pointer; margin-right:8px;}
.btn:hover{border-color:var(--core-accent); color:var(--core-accent);}
.btn.primary{background:var(--core-accent); color:#fff; border-color:var(--core-accent); font-weight:600;}
.btn.primary:hover{background:var(--core-accent-deep); border-color:var(--core-accent-deep); color:#fff;}
.btn.sm{padding:5px 10px; font-size:12px;}
.btn-big{font-size:14px; padding:11px 20px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.smallbtn{margin:0; padding:8px 12px; border:1px solid var(--core-line-strong); background:#fff; border-radius:var(--radius-control); font-size:13px; color:var(--core-ink); cursor:pointer;}
.smallbtn:hover{border-color:var(--core-accent); color:var(--core-accent);}

/* Segmented toggles and tabs */
.toggle{display:inline-flex; border:1px solid var(--core-line-strong); border-radius:var(--radius-control); overflow:hidden; flex-wrap:wrap; background:#fff;}
.toggle button{border:none; background:#fff; padding:8px 16px; font-size:13px; cursor:pointer; color:var(--muted);}
.toggle button.active{background:var(--core-accent); color:#fff; font-weight:600;}

/* Tables */
.table{width:100%; border-collapse:collapse; font-size:12.5px;}
.table th,.table td{text-align:left; padding:7px 9px; border-bottom:1px solid var(--line); vertical-align:middle;}
.table th{color:var(--core-ink-faint); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:600;}
.table input[type=number],.table input[type=text],.table select{width:100%; min-width:60px; padding:6px 8px; border:1px solid var(--core-line-strong); border-radius:var(--radius-control); font-size:12.5px; background:#fff;}
.table .bad-input{border-color:var(--hot) !important; background:var(--core-rose-tint) !important;}

/* Envelope tabs */
.envelope-tabs{display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;}
.envelope-tabs .tab{border:1px solid var(--core-line-strong); background:#fff; padding:7px 14px; border-radius:var(--radius-control); cursor:pointer; font-size:13px; color:var(--muted);}
.envelope-tabs .tab.active{background:var(--core-accent); color:#fff; border-color:var(--core-accent); font-weight:600;}
.env-toggle{display:inline-flex; border:1px solid var(--core-line-strong); border-radius:var(--radius-control); overflow:hidden; margin-bottom:12px; background:#fff;}
.env-toggle button{border:none; background:#fff; padding:6px 14px; font-size:12.5px; cursor:pointer; color:var(--muted);}
.env-toggle button.active{background:var(--core-accent); color:#fff; font-weight:600;}
.material-row{background:var(--core-paper-cool);}

/* Results */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:16px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-panel); padding:16px;}
.kpi .lbl{font-size:12px; color:var(--core-ink-faint);}
.kpi .val{font-size:24px; font-weight:600; margin-top:4px; word-break:break-word; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--core-deep-soft);}
.kpi .unit{font-size:12px; color:var(--muted); font-weight:500; margin-left:2px;}
.kpi .dlt{font-size:12px; margin-top:5px; min-height:15px;}
.kpi-hint{font-size:11px; color:var(--core-ink-faint); margin-top:3px; line-height:1.35;}
.up{color:var(--ok);} .down{color:var(--hot);} .neu{color:var(--muted);}

/* Monthly bars */
.bars{display:flex; align-items:flex-end; gap:6px; height:200px; padding:10px 4px 26px; position:relative; flex:1; min-width:0;}
.bar-col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; position:relative; cursor:pointer; min-width:0;}
.bar-up{display:flex; flex-direction:column; justify-content:flex-end; width:100%;}
.bar-down{display:flex; flex-direction:column; justify-content:flex-start; width:100%;}
.zero-axis{position:absolute; left:0; right:0; border-top:1.5px solid var(--core-ink-muted); z-index:1; pointer-events:none;}
.seg.bpv{border-radius:0 0 2px 2px;}
/* data patterns in official IEA report palette */
.pat-heat{background:#ea580c;}
.pat-cool{background:repeating-linear-gradient(135deg, #0284c7 0 4px, #e0f2fe 4px 7px); box-shadow:inset 0 0 0 1px #0284c7;}
.m-short{display:none;}
.pat-hvac{background:#004f9e;}
.pat-base{background:repeating-linear-gradient(0deg, #64748b 0 3px, #f1f5f9 3px 6px); box-shadow:inset 0 0 0 1px #64748b;}
.pat-ev{background:repeating-linear-gradient(45deg, #0d9488 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, #0d9488 0 2px, #ccfbf1 2px 6px); box-shadow:inset 0 0 0 1px #0d9488;}
.bar-up{position:relative;}
.grid-mark{position:absolute; left:-2px; right:-2px; border-top:2px dashed #002244; z-index:2; pointer-events:none;}
.grid-swatch{background:none !important; border:0 !important; border-top:2px dashed #002244 !important; height:0 !important; width:18px !important; vertical-align:middle !important;}
.view-toggle{display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 10px;}
.view-toggle .btn{margin-right:0;}
.view-toggle .btn[aria-pressed="true"]{background:var(--iea-blue); color:#fff; border-color:var(--iea-blue); font-weight:600;}
.pat-pv{background-color:#fef08a; background-image:radial-gradient(#b45309 1.4px, transparent 1.7px); background-size:5px 5px;}
.seg{width:100%; min-height:0;}
.seg.bh{border-radius:2px 2px 0 0;}
.seg.bc{border-radius:0 0 2px 2px;}
.bh{background:#ea580c;} .bc{background:#0284c7;}
.mbar{font-size:10px; color:var(--core-ink-faint); text-align:center; position:absolute; bottom:-18px; width:100%; font-weight:600; font-family:var(--core-font-mono);}
.bar-mark{position:absolute; left:0; right:0; border-top:1px dashed var(--core-line-strong); font-size:9px; color:var(--core-secondary-soft); transform:translateY(-100%);}
.axis-note{font-size:11px;}
.legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--muted); align-items:center; margin-top:12px;}
.swatch{display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px;}
.chart-legend .swatch{width:16px; height:14px; border:1px solid var(--core-line-strong); vertical-align:-2px;}
.legend-key{display:inline-flex; align-items:center;}
.chart-table{margin-top:10px; font-size:12.5px;}
.chart-table summary{cursor:pointer; min-height:44px; display:flex; align-items:center; color:var(--core-accent-deep); font-weight:600;}
.table-scroll{overflow-x:auto; max-width:100%;}
.data-table td{font-variant-numeric:tabular-nums;}
.data-table th[scope=row]{font-weight:500; color:var(--ink); text-transform:none; letter-spacing:0; font-size:12.5px;}
.data-table .total-row th,.data-table .total-row td{font-weight:700; border-top:2px solid var(--core-line-strong);}
.data-table .unit{color:var(--muted); font-size:11px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.chart-note{margin-top:10px;}

/* Balance */
.bal-row{display:flex; justify-content:space-between; padding:6px 8px; border-radius:var(--radius-control); font-size:13px;}
.bal-row:nth-child(odd){background:var(--core-paper-cool);}
.bal-row b{color:var(--core-deep-soft);}
.bal-total{display:flex; justify-content:space-between; padding:8px; margin-top:8px; background:var(--core-paper-warm); border-radius:var(--radius-control); font-weight:600; font-size:13.5px;}

/* Sliders */
.slider-row{padding:8px 0;}
.slider-row label{font-size:12.5px; color:var(--muted); display:flex; justify-content:space-between;}
.slider-row input[type=range]{width:100%; margin-top:6px; accent-color:var(--core-accent);}
.uval{font-weight:600; color:var(--core-accent); font-variant-numeric:tabular-nums;}

/* Dialogs */
.modal{position:fixed; inset:0; background:rgba(11,22,48,.55); display:grid; place-items:center; z-index:50;}
.modal-box{background:#fff; border-radius:var(--radius-dialog); padding:22px; width:min(460px,92vw); border:1px solid var(--line); box-shadow:0 20px 50px rgba(11,22,48,.28);}
.modal-box h3{margin-bottom:12px; color:var(--core-deep-soft); font-size:16px; font-weight:600;}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
.modal-head h3{margin:0;}
.saved-item{display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-control); margin-bottom:8px; font-size:13px; background:var(--core-paper-cool);}
.saved-item .name{font-weight:600; flex:1;}
.form-row{display:flex; gap:8px; margin-top:12px;}
.form-row input{flex:1; padding:9px 11px; border:1px solid var(--core-line-strong); border-radius:var(--radius-control); font-size:14px;}

.override{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); margin-top:6px;}
.override input{accent-color:var(--core-accent);}

/* City autocomplete */
.city-results{max-height:200px; overflow-y:auto; border:1px solid var(--core-line-strong); border-radius:var(--radius-control); margin-top:6px; background:#fff; display:none;}
.city-results.open{display:block;}
.city-results .city-opt{display:block; width:100%; min-height:44px; padding:9px 11px; cursor:pointer; font-size:13px; border:0; border-bottom:1px solid var(--line); background:#fff; text-align:left; color:var(--ink);}
.city-results .city-opt:hover,.city-results button.city-opt:focus-visible{background:var(--core-paper-warm);}
.city-results .city-empty{cursor:default;}
.city-results .city-opt .co-sub{display:block; color:var(--muted); font-size:11.5px;}

/* Geometry */
.subcard{background:var(--core-paper-cool); border:1px solid var(--line); border-radius:var(--radius-panel); padding:14px; margin-bottom:14px;}
.subcard h4{margin-bottom:0;}
.subcard-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:8px;}
.section-head-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:8px;}
.btn-group{display:inline-flex; gap:6px; flex-wrap:wrap;}
.pill-req{display:inline-block; font-size:11.5px; background:var(--core-accent-tint); border:1px solid var(--core-sky-soft); color:var(--core-accent-deep); padding:3px 10px; border-radius:var(--radius-status); font-weight:500;}
.status-msg{font-size:12px; margin-left:8px; font-weight:600;}
.status-msg.err{color:var(--hot);}
.status-msg.ok{color:var(--ok);}
.hint-inline{color:var(--muted); font-weight:400; font-size:11px;}
.check-label{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; cursor:pointer; color:var(--ink);}
.check-label input{accent-color:var(--core-accent);}

/* Footprint visualiser */
.visualizer-card{background:var(--core-paper-cool);}
.viz-container{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:8px;}
#geometry-canvas{background:#fff; border:1px solid var(--line); border-radius:var(--radius-panel); max-width:100%;}
.viz-legend{display:flex; flex-direction:column; gap:8px; font-size:12px; color:var(--ink);}
.legend-item{display:flex; align-items:center; gap:8px;}
.viz-swatch{width:14px; height:14px; border-radius:2px; display:inline-block;}
.wall-swatch{background:var(--core-accent);}
.roof-swatch{background:var(--core-sky-soft); border:1px dashed var(--core-accent-soft);}
.sun-swatch{background:var(--core-amber); border-radius:50%;}

.wall-row-mem{display:flex; gap:6px; align-items:center; flex-wrap:wrap; background:#fff; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-panel); margin-bottom:8px; transition:border-color .15s; width:100%;}
.wall-row-mem:hover{border-color:var(--core-sky-soft);}
.wall-row-mem input[type=text], .wall-row-mem input[type=number], .wall-row-mem select{padding:6px 8px; border:1px solid var(--core-line-strong); border-radius:var(--radius-control); font-size:13px;}
.wall-row-mem input:focus, .wall-row-mem select:focus{outline:2px solid var(--core-accent-soft); border-color:var(--core-accent);}
.wall-row-mem .row-field-group{display:inline-flex; align-items:center; gap:4px;}
.wall-row-mem .field-tag{font-size:10.5px; font-weight:600; color:var(--core-ink-faint); text-transform:uppercase; letter-spacing:.04em;}
.wall-row-mem .btn-del-danger{margin-left:auto !important; background:var(--core-rose-tint); border-color:var(--core-rose-soft); color:var(--core-rose-deep); font-weight:600; padding:6px 12px; border-radius:var(--radius-control);}
.wall-row-mem .btn-del-danger:hover{background:var(--core-rose-deep); border-color:var(--core-rose-deep); color:#fff;}

/* Diagram guide */
.diagram-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:10px;}
.diagram-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-panel); padding:12px; display:flex; flex-direction:column; gap:8px;}
.diagram-title{font-size:12px; font-weight:600; color:var(--core-deep-soft);}
.guide-svg{width:100%; height:auto; display:block; border-radius:var(--radius-control);}
.diagram-desc{font-size:11.5px; color:var(--core-ink-muted); line-height:1.45; margin-top:2px;}
.diagram-desc b{color:var(--core-deep-soft);}

/* Openings */
.openings-hero-card{background:var(--core-paper-cool); border:1px solid var(--core-line-strong); padding:16px;}
.openings-presets-box{display:flex; flex-direction:column; justify-content:space-between; height:100%;}
.shading-template-bar{margin-top:14px; padding-top:10px; border-top:1px solid var(--line);}
.shading-template-bar label{display:block; font-size:12px; font-weight:600; color:var(--core-deep-soft); margin-bottom:6px;}
.shading-preset-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.wall-openings-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-panel); padding:14px; margin-bottom:14px;}
.wall-openings-card-header{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:10px; border-bottom:1px solid var(--line); padding-bottom:8px;}
.wall-openings-actions{display:flex; gap:8px;}

/* Charts and tooltips */
.chart-card{position:relative;}
.chart-subtitle{font-size:11.5px; font-weight:400; color:var(--core-ink-faint); text-transform:none; letter-spacing:0; margin-left:6px;}
.chart-wrapper{display:flex; height:220px; align-items:flex-end; gap:8px; position:relative; padding-bottom:20px;}
.y-axis-labels{position:relative; height:200px; width:48px; flex:0 0 48px; text-align:right; font-size:10px; color:var(--core-ink-faint); border-right:1px solid var(--line); font-family:var(--core-font-mono);}
.y-axis-labels span{position:absolute; right:6px; transform:translateY(50%); white-space:nowrap;}
.chart-tooltip{position:absolute; background:rgba(11,22,48,.95); color:#fff; padding:6px 10px; border-radius:var(--radius-control); font-size:11.5px; pointer-events:none; z-index:100; box-shadow:0 4px 14px rgba(11,22,48,.25); white-space:nowrap;}
.chart-header-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;}
.chart-header-row .diagram-title{margin-bottom:0;}

/* Component balance in IEA Palette */
.balance-chart-box{margin-top:10px;}
.hbars{display:flex; flex-direction:column; gap:8px;}
.hbar-row{display:grid; grid-template-columns:130px 1fr 80px; align-items:center; gap:10px; font-size:12px;}
.hbar-label{color:var(--ink); font-weight:500;}
.hbar-track{background:var(--core-paper-warm); height:18px; border-radius:var(--radius-control); overflow:hidden; position:relative;}
.hbar-fill{height:100%; border-radius:var(--radius-control); transition:width .3s ease;}
.hbar-fill.loss{background:linear-gradient(90deg, #d97706, #b91c1c);}
.hbar-fill.gain{background:linear-gradient(90deg, #0284c7, #004f9e);}
.hbar-val{font-weight:600; text-align:right; color:var(--core-deep-soft); font-size:11.5px; font-variant-numeric:tabular-nums;}

.mode-pane{display:none;}
.mode-pane.active{display:block;}
.weather-footer{font-size:12.5px; color:var(--muted); line-height:1.7;}

/* Split results */
.split-results-container{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:10px;}
.results-column{background:#fff; border:1px solid var(--line); border-radius:var(--radius-panel); padding:16px;}
.baseline-column{background:var(--core-paper-cool); border-color:var(--core-line-strong);}
.current-column{background:#fff; border-color:var(--core-accent-soft);}
.column-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid var(--line);}
.column-header h3{font-size:14px; font-weight:600; color:var(--core-deep-soft); margin:0;}
.pill-err{background:var(--core-rose-tint); color:var(--core-rose-deep); border-color:var(--core-rose-soft); font-weight:600;}
.pill-live{background:var(--core-accent-tint); color:var(--core-accent-deep); border-color:var(--core-sky-soft); font-weight:600;}
.kpis-split{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px;}
.kpis-split .kpi{padding:10px 12px;}
.kpis-split .kpi .lbl{font-size:11px;}
.kpis-split .kpi .val{font-size:18px; margin-top:2px;}

/* Climate charts */
.climate-charts-panel{background:var(--core-paper-cool); border:1px solid var(--line);}
.climate-charts-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:12px;}
.climate-chart-card{min-height:270px; background:#fff;}
.chart-canvas-container{position:relative; width:100%; height:220px;}
.climate-empty-state{grid-column:1 / -1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 16px; background:#fff; border:1px dashed var(--core-line-strong); border-radius:var(--radius-panel); text-align:center;}
.climate-empty-state .empty-icon{font-size:28px; margin-bottom:6px;}
.climate-empty-state .empty-text{font-size:13px; color:var(--muted); font-weight:500;}

/* Envelope stack */
.env-wall-stack{display:flex; flex-direction:column; gap:14px;}
.env-wall-item{background:#fff; border:1px solid var(--line); border-radius:var(--radius-panel); padding:14px; overflow-x:auto;}
.env-wall-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--line);}

/* Hybrid controls */
.hybrid-box{margin-top:12px; padding:12px; background:var(--core-paper-cool); border:1px solid var(--line); border-radius:var(--radius-panel);}

@media (max-width: 900px){
  .split-results-container{grid-template-columns:1fr;}
  .kpis-split{grid-template-columns:repeat(2, 1fr);}
  .diagram-grid{grid-template-columns:1fr;}
  .climate-charts-grid{grid-template-columns:1fr;}
  .layout{grid-template-columns:1fr;}
  .rail{position:static; height:auto; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:14px 16px;}
  .rail h3,.rail hr{display:none;}
  .rail .rail-status{display:block; width:100%; margin-top:4px;}
  .step{flex:1 1 22%; padding:6px; font-size:12px;}
  .runbtn{width:auto; flex:1; margin-top:0;}
  .rail-actions{flex-direction:row;}
  .main{padding:22px 18px 40px;}
  .g3,.g4{grid-template-columns:repeat(2,1fr);}
  .kpis{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 560px){
  .top{padding:8px 16px;}
  .top .sub{font-size:11px; color:var(--core-ink-muted); margin-top:4px;}
  .main{padding:18px 14px 36px;}
  .g2,.g3,.g4,.kpis{grid-template-columns:1fr;}
  .kpis-split{grid-template-columns:1fr 1fr;}
  .hbar-row{grid-template-columns:96px 1fr 70px;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}


/* Energy management and renewables */
.energy-card-head{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.energy-card-head h4{margin-bottom:0;}
.energy-card-lead{margin:6px 0 0;}
.energy-card.is-on{border-color:var(--core-accent-soft);}
.energy-card-body{margin-top:14px;}
.switch{display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-size:13px; font-weight:600; color:var(--ink);}
.switch input{width:20px; height:20px; accent-color:var(--core-accent); margin:0;}
.switch-inline{font-weight:500; margin-bottom:6px;}
.fieldset{border:1px solid var(--line); border-radius:var(--radius-panel); padding:12px 14px 14px; margin:0 0 12px; min-width:0;}
.fieldset legend{font-size:12px; font-weight:700; color:var(--core-deep-soft); padding:0 6px; text-transform:uppercase; letter-spacing:.05em;}
.fieldset > .hint{margin:0 0 10px;}
.field input:disabled,.field select:disabled{background:var(--core-paper-warm); color:var(--core-ink-muted);}

/* Result cards */
.card-lead{margin:-6px 0 12px;}
.stat-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;}
.stat{border:1px solid var(--line); border-radius:var(--radius-panel); padding:10px 12px; background:#fff; min-width:0;}
.stat .lbl{font-size:11.5px; color:var(--core-ink-faint);}
.stat .val{font-size:18px; font-weight:600; color:var(--core-deep-soft); font-variant-numeric:tabular-nums; margin-top:2px; overflow-wrap:anywhere;}
.stat .unit{font-size:11.5px; color:var(--muted); font-weight:500;}
.stat-hint{font-size:11px; color:var(--core-ink-faint); margin-top:3px; line-height:1.35;}
.subhead{font-size:12px; font-weight:700; color:var(--core-deep-soft); margin:16px 0 6px; text-transform:uppercase; letter-spacing:.05em;}
.notes{margin:10px 0 0 18px; font-size:11.5px; color:var(--core-ink-muted); line-height:1.5;}
.notes li{margin-bottom:3px;}
.comfort-warning{margin-top:12px; padding:10px 12px; border:1px solid var(--core-rose-soft); background:var(--core-rose-tint); color:var(--core-rose-deep); border-radius:var(--radius-control); font-size:12.5px;}
.comfort-ok{margin-top:12px; font-size:12px; color:var(--muted);}

/* Touch targets: 44 px minimum for everything a finger presses */
.btn,.smallbtn,.toggle button,.envelope-tabs .tab,.env-toggle button,.runbtn{min-height:44px;}
.btn.sm{min-height:44px; padding:6px 12px;}
.field input,.field select,.form-row input,.wall-row-mem input[type=text],.wall-row-mem input[type=number],.wall-row-mem select,
.table input[type=number],.table input[type=text],.table select{min-height:44px;}
.field input[type=range],.slider-row input[type=range]{min-height:44px;}
.check-label{min-height:44px;}
.check-label input{width:20px; height:20px;}
.chart-header-row .btn{margin-right:0;}

/* Narrow screens: no horizontal scroll at 320 px */
.top{flex-wrap:wrap;}
.saved-item{flex-wrap:wrap;}
#envelope-pane{overflow-x:auto;}
.split-results-container,.results-column,.chart-card{min-width:0;}
@media (max-width:560px){
  .top-right{margin-left:0; flex-wrap:wrap;}
  .step{flex:1 1 44%;}
  .rail-actions{flex-wrap:wrap; width:100%;}
  .rail-actions .smallbtn{flex:1 1 30%;}
  .runbtn{flex:1 1 100%;}
  .bars{gap:2px; padding-left:2px; padding-right:2px;}
  .y-axis-labels{width:40px; flex-basis:40px; font-size:9px;}
  .mbar{font-size:9px;}
  .m-long{display:none;}
  .m-short{display:inline;}
  .kpis-split{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .wall-row-mem .btn-del-danger{margin-left:0 !important;}
  .card{padding:14px;}
  .results-column{padding:12px;}
  .form-actions .btn{flex:1 1 100%; margin-right:0; justify-content:center;}
}
@media (max-width:560px){
  .data-table th,.data-table td{padding:6px 4px; font-size:11.5px;}
  .data-table th{font-size:10px; letter-spacing:.02em;}
  .layer-table thead{display:none;}
  .layer-table,.layer-table tbody,.layer-table tr,.layer-table td{display:block; width:100%;}
  .layer-table tr{border:1px solid var(--line); border-radius:var(--radius-panel); padding:8px; margin-bottom:8px; background:#fff;}
  .layer-table td{border:0; padding:4px 0;}
  .layer-table td[data-label]::before{content:attr(data-label); display:block; font-size:11px; color:var(--core-ink-faint); font-weight:600;}
}
@media (max-width:360px){
  .stat-grid{grid-template-columns:1fr;}
  .step{flex:1 1 100%;}
  .hbar-row{grid-template-columns:80px 1fr 64px; gap:6px;}
}


.muted-text{font-size:14px; font-weight:500; color:var(--muted);}
.capped-box{margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-control); background:#fff; font-size:12.5px;}

/* ---- Results explainers: plain-language boxes, the diagram of the BEMS runs, peak "when" lines, glossary ---- */
.explain{margin-top:10px; padding:10px 12px; border-left:3px solid var(--core-accent-deep); background:var(--core-accent-tint); border-radius:var(--radius-control); font-size:12.5px; line-height:1.5; color:var(--ink);}
.explain:empty{display:none;}
.explain b{color:var(--core-deep-soft);}
.flow{display:flex; flex-direction:column; gap:14px; margin-top:6px;}
.flow-box{flex:0 0 auto; min-width:0; position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-panel); padding:10px 12px 10px 38px; font-size:12px; line-height:1.45;}
.flow-n{position:absolute; left:10px; top:10px; width:20px; height:20px; border-radius:50%; background:var(--core-deep-soft); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.flow-title{font-weight:700; color:var(--core-deep-soft);}
.flow-desc{color:var(--core-ink-muted); margin-top:3px;}
.flow-feeds{margin-top:6px; font-size:11px; color:var(--core-accent-deep); font-weight:600;}
.flow-box + .flow-box::before{content:"\2193"; position:absolute; left:50%; top:-7px; transform:translate(-50%,-50%); color:var(--core-ink-faint); font-size:15px; line-height:1; background:var(--card); padding:0 4px;}
.when{font-size:11px; color:var(--core-ink-faint); font-weight:400; margin-top:1px;}
.peaks-table td.when-cell{white-space:nowrap;}
.peaks-table td.running{font-size:11.5px; color:var(--core-ink-muted); min-width:200px;}
.glossary{margin-top:12px; font-size:12px;}
.glossary summary{cursor:pointer; font-weight:600; color:var(--core-deep-soft);}
.glossary dl{margin:8px 0 0; display:grid; grid-template-columns:max-content 1fr; gap:6px 14px;}
.glossary dt{font-weight:600; color:var(--core-deep-soft);}
.glossary dd{margin:0; color:var(--core-ink-muted); line-height:1.45;}
@media (max-width:700px){
  .glossary dl{grid-template-columns:1fr;}
  .glossary dd{margin-bottom:4px;}
  .peaks-table td.when-cell{white-space:normal;}
  .peaks-table td.running{min-width:120px;}
}