:root {
  --bg:#EEF2F5; --ink:#13202B; --muted:#4A5A68; --muted-2:#5B6B78;
  --card:#FFFFFF; --line:#D5DDE4; --line-2:#E1E7EC; --field:#C9D2DA; --chip:#F3F6F8; --track:#E6ECF1;
  --accent:#1F5FAE; --accent-dark:#163F73; --sky:#A9C4E4; --sky-2:#D6E3F2; --tag:#E5EEF9;
  --calc:#067647; --calc-bg:#eaf6ef; --warn:#b54708; --warn-bg:#fef3e6; --err:#b42318; --err-bg:#fdecea;
  --sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* same font stack as the other IDEA tools */
  --top-h:84px; /* header height: sticky columns start below it */
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-variant-numeric:tabular-nums; } /* digits of equal width, so numbers line up in columns without a monospace font */
a { color:var(--accent); }
a:hover { color:var(--accent-dark); }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:1px; }
button:focus-visible, a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* header with the two steps */
.top { position:sticky; top:0; z-index:10; background:var(--card); border-bottom:1px solid var(--line); }
.top-in { max-width:1320px; margin:0 auto; padding:14px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 32px; }
.brand { display:flex; align-items:center; gap:16px; color:var(--ink); text-decoration:none; }
.brand:hover { color:var(--ink); }
.logo { height:40px; width:auto; display:block; }
.brand-text { display:flex; flex-direction:column; gap:2px; padding-left:16px; border-left:1px solid var(--line); }
.brand b { font-size:20px; font-weight:600; }
.eyebrow { font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.eyebrow.light { color:var(--sky); }
.steps { display:flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.step { display:flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border:1px solid var(--field); border-radius:999px; background:var(--card); font-size:14px; color:var(--muted); text-decoration:none; }
.step:hover { color:var(--ink); }
.step i { font:600 13px var(--sans); font-style:normal; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--chip); color:var(--muted); }
.step.active { border-color:var(--accent); color:var(--ink); font-weight:500; }
.step.active i { background:var(--accent); color:#FFF; }
.step:has(~ .step.active) i { background:var(--calc); color:#FFF; } /* the step before the current one is done */

.wrap { max-width:1320px; margin:0 auto; padding:24px 16px 80px; }

/* buttons */
.btn { height:44px; padding:0 18px; border-radius:6px; font:500 14px var(--sans); cursor:pointer; border:1px solid var(--field); background:#FFF; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; }
.btn:hover { color:var(--ink); }
.btn.on { border-color:var(--accent); background:var(--accent); color:#FFF; }
.btn.off { border-color:var(--field); background:#FFF; color:var(--ink); }
.btn-dark { border-color:var(--ink); background:var(--ink); color:#FFF; }
.btn-dark:hover { color:#FFF; }
.btn:disabled { opacity:.55; cursor:default; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* connected buttons: one choice out of a few */
.usage { --n:3; display:grid; grid-template-columns:repeat(var(--n), minmax(0, 1fr)); width:min(100%, calc(200px * var(--n))); }
.usage .btn { border-radius:0; margin-left:-1px; }
.usage .btn:first-child { border-radius:6px 0 0 6px; margin-left:0; }
.usage .btn:last-child { border-radius:0 6px 6px 0; }
.usage .btn span { font:500 13px var(--sans); opacity:.75; }
.usage .btn.on { position:relative; z-index:1; }

/* layout of the room load page */
.cols { display:grid; grid-template-columns:190px minmax(0, 1fr) 360px; gap:24px; align-items:start; }
.rail { position:sticky; top:var(--top-h); display:flex; flex-direction:column; gap:2px; }
.rail a { display:flex; gap:10px; padding:8px 10px; border-radius:6px; font-size:14px; color:var(--muted); text-decoration:none; }
.rail a:hover { background:var(--chip); color:var(--ink); }
.rail a span { font:600 12px var(--sans); color:var(--accent); padding-top:2px; }
.main { display:flex; flex-direction:column; gap:16px; min-width:0; }
.aside { position:sticky; top:var(--top-h); display:flex; flex-direction:column; gap:16px; min-width:0; }
.foot { display:flex; justify-content:space-between; gap:12px; }

/* cards */
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px; display:flex; flex-direction:column; gap:16px; min-width:0; scroll-margin-top:100px; }
.card.tight { gap:14px; }
.card h2 { margin:0; font-size:18px; font-weight:600; }
.card-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; }
.card-head .num { font-family:var(--sans); font-size:13px; font-weight:600; color:var(--accent); }
.card-head .info { font-size:13px; color:var(--muted-2); margin-left:auto; text-align:right; }
.tag { font-size:11px; padding:2px 8px; border-radius:999px; background:var(--tag); color:var(--accent-dark); font-weight:500; }
.tag.plain { background:var(--chip); color:var(--muted); }

/* fields */
.fields { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:14px; }
.fields.two-col { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field-label { font-size:13px; color:var(--muted); }
.fields .field-label { min-height:34px; display:flex; align-items:flex-end; }
.field-box { display:flex; align-items:center; border:1px solid var(--field); border-radius:6px; background:#FFF; height:44px; overflow:hidden; }
.field-box input { flex:1; min-width:0; border:0; padding:0 10px; height:100%; font:500 15px var(--sans); color:var(--ink); background:transparent; }
.field-unit { padding:0 10px; font-size:13px; color:var(--muted); background:var(--chip); height:100%; display:flex; align-items:center; border-left:1px solid var(--line-2); white-space:nowrap; }
.select { height:44px; width:100%; border:1px solid var(--field); border-radius:6px; padding:0 12px; font:15px var(--sans); background:#FFF; color:var(--ink); }
.select:disabled { background:var(--chip); color:var(--muted-2); }
.stack { display:flex; flex-direction:column; gap:6px; }
.narrow { max-width:360px; }
.btn.chip { height:38px; padding:0 14px; }

/* read only values, green when taken from the climate data */
.readout { height:44px; display:flex; align-items:center; padding:0 10px; border:1px solid var(--line); border-radius:6px; background:var(--chip); color:var(--muted-2); font:500 15px var(--sans); }
.readout.calc { background:var(--calc-bg); color:var(--calc); border-color:transparent; font-weight:600; }
.check { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--muted); cursor:pointer; }
.check input { margin-top:2px; }
.hint { margin:0; font-size:12px; color:var(--muted-2); }
.missingbox { background:var(--err-bg); color:var(--err); border:1px solid var(--err); border-radius:10px; padding:12px 16px; font-size:13px; }
.note { background:var(--warn-bg); color:var(--warn); border-radius:8px; padding:12px 14px; font-size:13px; }
.empty { padding:28px; text-align:center; color:var(--muted-2); border:1px dashed var(--field); border-radius:8px; font-size:14px; }

/* result card */
.result { background:var(--ink); color:#FFF; border-radius:10px; padding:24px; display:flex; flex-direction:column; gap:6px; }
.result-value { display:flex; align-items:baseline; gap:10px; }
.result .big { font-family:var(--sans); font-size:56px; font-weight:600; line-height:1; }
.result .unit { font-size:22px; color:var(--sky-2); }
.result-line { font-size:14px; color:var(--sky-2); }
.result .btn { margin-top:14px; height:48px; background:#FFF; color:var(--ink); border-color:#FFF; font-weight:600; }

/* breakdown */
.row-between { display:flex; justify-content:space-between; gap:8px; font-size:14px; }
.mono { font-family:var(--sans); }
.nowrap { white-space:nowrap; }
.track { height:8px; background:var(--track); border-radius:4px; overflow:hidden; }
.bar { height:100%; border-radius:4px; background:var(--accent); }

/* label / value lists */
.kv { display:flex; justify-content:space-between; gap:12px; font-size:14px; padding:8px 0; border-bottom:1px solid var(--line-2); }
.kv:last-child { border-bottom:0; }
.kv .k { color:var(--muted); }
.kv .v { font-family:var(--sans); text-align:right; }
.subhead { font-size:13px; font-weight:500; color:var(--muted); display:flex; align-items:center; gap:8px; }
details summary { cursor:pointer; font-size:18px; font-weight:600; list-style:none; display:flex; justify-content:space-between; }
details summary::after { content:'+'; color:var(--accent); }
details[open] summary::after { content:'–'; }
details[open] summary { margin-bottom:8px; }

.method { margin:0; font-size:13px; line-height:1.5; color:var(--muted); }

/* unit cooler page */
.sum { background:var(--ink); color:#FFF; border-radius:10px; padding:16px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 32px; margin-bottom:16px; }
.sum .it { display:flex; flex-direction:column; gap:2px; }
.sum .it small { font:11px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--sky); }
.sum .it b { font:500 16px var(--sans); }
.sum .it.big b { font-size:26px; font-weight:600; }
.sum .btn { margin-left:auto; background:transparent; color:#FFF; border-color:var(--sky); height:38px; }
.two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-bottom:16px; }
.propose-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.table-wrap { overflow-x:auto; }
.proposal-table { width:100%; border-collapse:collapse; font-size:14px; }
.proposal-table th, .proposal-table td { padding:11px 10px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top; white-space:nowrap; }
.proposal-table th { font-size:12px; font-weight:600; color:var(--muted); background:var(--chip); padding:9px 10px; }
.proposal-table td.num, .proposal-table th.num { text-align:right; font-family:var(--sans); }
.proposal-table td.good { color:var(--calc); font-weight:600; }
.proposal-table td.warn { color:var(--warn); font-weight:600; }
.proposal-table .muted, .muted { color:var(--muted-2); font-size:12px; font-weight:400; font-family:var(--sans); }

/* sign-in */
.login-wrap { display:flex; justify-content:center; padding-top:48px; }
.login-card { width:min(100%, 420px); }
.login-form { display:flex; flex-direction:column; gap:14px; }
.input { height:44px; width:100%; border:1px solid var(--field); border-radius:6px; padding:0 12px; font:15px var(--sans); background:#FFF; color:var(--ink); }
.validation-message { color:var(--err); font-size:12px; }
.user { display:flex; align-items:center; gap:12px; }
.user-name { display:flex; flex-direction:column; font-size:13px; font-weight:500; text-align:right; }
.user-name small { color:var(--muted); font-size:12px; font-weight:400; }
.user form { margin:0; }
.btn-small { height:36px; padding:0 12px; font-size:13px; }

#blazor-error-ui { display:none; }
#blazor-error-ui.show { display:block; background:var(--err-bg); color:var(--err); padding:10px 16px; position:fixed; bottom:0; left:0; right:0; }

@media (max-width:1100px) {
  .cols { grid-template-columns:minmax(0, 1fr); }
  .rail { display:none; }
  .aside { position:static; order:-1; }
}
@media (max-width:900px) {
  .two { grid-template-columns:minmax(0, 1fr); }
  .steps { margin-left:0; }
  .top { position:static; }
  .sum .btn { margin-left:0; }
}