/* ── Khamo Air Con design system (arctic palette: ocean #073B5A, deep #062C43, cyan-blue #0277A8, sky #38BDF8, ice #BAE6FD) ──
   Chosen to look unlike Khamo DEC (slate and green) and Commercial EPC (forest green): cool air, not paper.
   A copy of Khamo DEC's stylesheet (DEC-COMMERCIAL/Khamo-DEC, wwwroot/css/khamo-dec.css), itself Khamo Commercial EPC's,
   so the products look the same apart from the palette. Keep them in step. Air-con additions are at the end.
   The brand font (Outfit) is used when installed; nothing is fetched from outside: Segoe UI / system fonts otherwise. */

:root {
    --ink: #062C43;
    --forest: #0277A8;
    --jade: #38BDF8;
    --mint: #BAE6FD;
    --primary: #073B5A;
    --sage: #38BDF8;
    --shell: #E8ECF1;
    --bg: #F4F6F8;
    --surface: #FFFFFF;
    --surface-2: #F7F9FA;
    --border: #D9DFE6;
    --border-strong: #BFC8D2;
    --text: #13221F;
    --muted: #5F716A;
    --faint: #8A9B94;
    --danger: #D14848;
    --danger-bg: #FCECEC;
    --warning: #B9871C;
    --warning-bg: #FBF3DF;
    --audit: #7A5BC4;
    --audit-bg: #F1ECFB;
    --info: #2F6FB0;
    --info-bg: #E8F1FA;
    --success: #2E8B57;
    --success-bg: #E6F4EC;

    /* EPC bands */
    --band-aplus: #00704A;
    --band-a: #008054;
    --band-b: #19B459;
    --band-c: #8DCE46;
    --band-d: #FFD500;
    --band-e: #FCAA65;
    --band-f: #EF8023;
    --band-g: #E9153B;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(9, 20, 19, .06);
    --shadow: 0 1px 3px rgba(9, 20, 19, .08), 0 4px 14px rgba(9, 20, 19, .05);
    --shadow-lg: 0 12px 40px rgba(9, 20, 19, .18);
    --font: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: "Cascadia Code", "Consolas", monospace;
    --sidebar-w: 268px;
    --assistant-w: 330px;
    --topbar-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
h1 { font-size: 1.55rem; }
/* Blazor focuses the page heading after navigation for screen readers; no visible box needed. */
h1:focus, h1:focus-visible { outline: none; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }
h4 { font-size: .92rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
p { margin: 0 0 .75rem; }
small, .small { font-size: .85em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-family: var(--mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }
.hidden { display: none !important; }

/* ── Shell ── */
.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) auto;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "side top top" "side main assist";
    height: 100vh;
    overflow: hidden;
}
.shell.no-project { grid-template-columns: var(--sidebar-w) 1fr; grid-template-areas: "side top" "side main"; }

.sidebar {
    grid-area: side;
    background: linear-gradient(180deg, #06324D 0%, var(--primary) 45%, #0A5F86 100%);
    color: #E3E7EE;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.brand {
    display: flex; align-items: center; gap: .65rem;
    padding: 1rem 1.1rem;
    height: var(--topbar-h);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-mark {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--mint), var(--jade));
    display: grid; place-items: center;
    color: var(--primary); font-weight: 700; font-size: 1rem;
}
.brand-name { font-weight: 600; font-size: .98rem; color: #fff; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand > div:last-child { min-width: 0; }
.brand-sub { font-size: .72rem; color: var(--mint); opacity: .85; margin-top: -2px; }

/* The sidebar scrolls; without this its sections shrink below their content once the
   project steps no longer fit, and the progress bar ends up under the first step. */
.sidebar > * { flex-shrink: 0; }
.nav-section { padding: .9rem .7rem .3rem; }
.nav-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: rgba(227, 231, 238,.55); padding: 0 .55rem .35rem; }
.nav-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .6rem; margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: #E3E7EE; cursor: pointer; user-select: none;
    transition: background .12s;
}
.nav-item:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.nav-item.active { background: rgba(186, 230, 253,.16); color: #fff; box-shadow: inset 3px 0 0 var(--mint); }
.nav-step {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-grid; place-items: center; flex: none;
    font-size: .72rem; font-weight: 600;
    background: rgba(255,255,255,.1); color: #E3E7EE;
}
.nav-item.done .nav-step { background: var(--jade); color: #fff; }
.nav-item .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .nav-count {
    font-size: .7rem; padding: 0 .4rem; border-radius: 99px; line-height: 1.5;
    background: rgba(209,72,72,.9); color: #fff;
}
.nav-item .nav-count.warn { background: rgba(212,168,67,.9); color: var(--ink); }
.nav-item .nav-count.muted { background: rgba(255,255,255,.12); color: #E3E7EE; }
/* Assessments tree under Projects: grouped by stage, like the zones tree. */
.nav-tree { margin: 0 0 .35rem 1.15rem; padding-left: .35rem; border-left: 1px dashed rgba(255,255,255,.16); }
.nav-tree-label { font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(227, 231, 238,.5); padding: .5rem .5rem .2rem; }
.nav-tree-item { display: flex; align-items: center; gap: .45rem; padding: .3rem .5rem; border-radius: 6px; color: #E3E7EE; font-size: .85rem; text-decoration: none; min-width: 0; }
.nav-tree-item .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-tree-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-tree-item.active { background: rgba(186, 230, 253,.16); color: #fff; box-shadow: inset 3px 0 0 var(--mint); font-weight: 500; }
.nav-tree-item.more { color: rgba(227, 231, 238,.6); font-size: .78rem; }
.nav-tree-item.stage { color: rgba(227, 231, 238,.8); }
.nav-tree-item .nav-count { font-size: .68rem; padding: 0 .4rem; border-radius: 99px; line-height: 1.5; }
.nav-tree-item .nav-count.muted { background: rgba(255,255,255,.12); color: #E3E7EE; }
.nav-tree-search { width: 100%; margin: .2rem 0 .3rem; padding: .32rem .55rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: .8rem; }
.nav-tree-search::placeholder { color: rgba(227, 231, 238,.45); }
.nav-tree-search:focus { outline: none; border-color: var(--mint); }
/* A lodged EPC: its input pages are locked with a disabled fieldset. */
.readonly-body { border: 0; padding: 0; margin: 0; min-width: 0; }
.readonly-body .input, .readonly-body select, .readonly-body textarea { background: var(--surface-2); color: var(--muted); }
.readonly-body button:disabled, .readonly-body label.btn { cursor: not-allowed; }
.readonly-body .segmented button:not(.on), .readonly-body .btn:disabled { opacity: .55; }
.readonly-banner { margin: 0 auto 1rem; max-width: 1200px; align-items: center; }
.band.mini { min-width: 1.45em; height: 1.35em; font-size: .66rem; border-radius: 4px; padding: 0 .3em; }
.sidebar-foot { margin-top: auto; padding: .9rem 1.1rem; font-size: .72rem; color: rgba(227, 231, 238,.55); border-top: 1px solid rgba(255,255,255,.08); }

.topbar {
    grid-area: top;
    display: flex; align-items: center; gap: .75rem;
    padding: 0 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}
.topbar-title { display: flex; flex-direction: column; min-width: 0; }
.topbar-title .t1 { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title .t2 { font-size: .78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { flex: 1; }
.save-state { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.save-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.save-state.dirty .dot { background: var(--warning); }

.main { grid-area: main; overflow-y: auto; padding: 1.5rem 1.75rem 3rem; min-width: 0; }
.page { max-width: 1180px; margin: 0 auto; }
.page-wide { max-width: 1500px; }
.page-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.page-head .grow { flex: 1; min-width: 260px; }
.page-head p { color: var(--muted); margin: .2rem 0 0; max-width: 760px; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ── Assistant panel ── */
.assistant {
    grid-area: assist;
    width: var(--assistant-w);
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    display: flex; flex-direction: column;
}
.assistant > * { flex-shrink: 0; }
.assistant-head { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--ink); }
.assistant-head .assistant-title { flex: 1; }
.assistant-toggle { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--border); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.assistant-toggle:hover { background: var(--surface-2); }
.assistant-body { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.steps-head { border-top: 1px solid var(--border); }
.assistant-tip { padding: 0 1rem 1rem; margin-top: auto; }
.assistant-tip:empty { display: none; }

/* The assessment's steps in the right-hand panel (light), or the left menu on narrow screens (dark). */
.steps-progress { padding: 0 .55rem .7rem; }
.steps-progress-text { margin-top: .3rem; color: rgba(227, 231, 238,.7); }
.steps-in-sidebar { display: none; }
.rail-steps { padding: .8rem .7rem .6rem; }
.rail-steps .steps-progress-text { color: var(--muted); }
/* Room between the progress bar and the first step, and between steps, so the highlight never touches. */
.rail-steps .steps-progress { padding-bottom: .9rem; margin-bottom: .5rem; border-bottom: 1px solid var(--border); }
.rail-steps .nav-item { margin-bottom: 3px; }
.rail-steps .progress { background: var(--surface-2); }
.rail-steps .progress > div { background: var(--jade); }
.rail-steps .nav-item { color: var(--text); }
.rail-steps .nav-item:hover { background: var(--surface-2); color: var(--ink); }
.rail-steps .nav-item.active { background: #eef4e6; color: var(--primary); box-shadow: inset 3px 0 0 var(--jade); font-weight: 500; }
.rail-steps .nav-step { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.rail-steps .nav-item.done .nav-step { background: var(--jade); color: #fff; border-color: var(--jade); }
.rail-steps .nav-item .icon { color: var(--muted); }
.rail-steps .nav-item.active .icon { color: var(--primary); }

/* ── Cards ── */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.card-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--border); }
.card-head h3 { margin: 0; flex: 1; }
.card-head .sub { font-size: .8rem; color: var(--muted); font-weight: 400; }
.card-body { padding: 1.1rem; }
.card-body.tight { padding: .6rem .8rem; }
.card-foot { padding: .75rem 1.1rem; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); display: flex; gap: .5rem; justify-content: flex-end; }
.card.flat { box-shadow: none; }
.card.accent { border-top: 3px solid var(--jade); }
.card.clickable { cursor: pointer; transition: box-shadow .12s, transform .12s, border-color .12s; }
.card.clickable:hover { box-shadow: var(--shadow); border-color: var(--border-strong); transform: translateY(-1px); }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: start; }
/* Two panes that sit side by side when there is room and stack when there is not. */
.panes { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; align-items: start; }

/* ── Forms ── */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem 1rem; }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field-label { display: flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 500; color: var(--muted); }
.field-label .req { color: var(--danger); }
.field-label .tip-btn { color: var(--faint); cursor: help; display: inline-flex; }
.field-label .tip-btn:hover { color: var(--jade); }
.field-hint { font-size: .75rem; color: var(--faint); }
.field-unit { font-size: .78rem; color: var(--faint); }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .unit { position: absolute; right: .7rem; font-size: .78rem; color: var(--faint); pointer-events: none; }
.input-wrap .input.has-unit { padding-right: 3.6rem; }
.input-wrap .input.sm.has-unit { padding-right: 2.1rem; }
.input, select.input, textarea.input {
    width: 100%;
    font: inherit;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: .5rem .7rem;
    min-height: 38px;
    transition: border-color .12s, box-shadow .12s;
}
.input:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 3px rgba(2, 119, 168,.18); }
.input:disabled { background: var(--surface-2); color: var(--faint); }
.input.sm { min-height: 32px; padding: .3rem .5rem; font-size: .88rem; }
.field.has-error .input { border-color: var(--danger); }
.field.has-error .input:focus { box-shadow: 0 0 0 3px rgba(209,72,72,.15); }
.field.has-warning .input { border-color: var(--warning); }
.field-msg { font-size: .76rem; display: flex; gap: .3rem; align-items: flex-start; }
.field-msg.error { color: var(--danger); }
.field-msg.warning { color: var(--warning); }
.field-msg.audit { color: var(--audit); }
textarea.input { min-height: 80px; resize: vertical; }

.check { display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; user-select: none; padding: .35rem 0; }
.check input { width: 17px; height: 17px; accent-color: var(--forest); margin: 0; }
.switch { position: relative; display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; }
.switch .track { width: 36px; height: 20px; border-radius: 99px; background: var(--border-strong); position: relative; transition: background .15s; flex: none; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left .15s; }
.switch input:checked + .track { background: var(--jade); }
.switch input:checked + .track::after { left: 18px; }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(2, 119, 168,.25); }

.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; gap: 3px; flex-wrap: wrap; }
.segmented button { border: 0; background: transparent; font: inherit; font-size: .85rem; padding: .32rem .75rem; border-radius: 6px; cursor: pointer; color: var(--muted); }
.segmented button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 500; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font: inherit; font-weight: 500; font-size: .9rem;
    padding: .5rem .95rem; min-height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text);
    cursor: pointer; white-space: nowrap;
    transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--forest); border-color: var(--forest); color: #fff; }
.btn.primary:hover { background: var(--primary); }
.btn.accent { background: var(--mint); border-color: var(--mint); color: var(--primary); }
.btn.accent:hover { background: #a5cb7c; }
.btn.danger { color: var(--danger); border-color: #ebc2c2; }
.btn.danger:hover { background: var(--danger-bg); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { min-height: 30px; padding: .25rem .6rem; font-size: .82rem; }
.btn.icon { padding: .4rem; min-width: 34px; }
.btn.lg { min-height: 46px; padding: .7rem 1.3rem; font-size: 1rem; }
.btn.block { width: 100%; }

/* ── Chips & badges ── */
.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 500; padding: .12rem .55rem; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.chip.green { background: var(--success-bg); border-color: #bfe3cc; color: #1f6b41; }
.chip.red { background: var(--danger-bg); border-color: #f0c4c4; color: #a63232; }
.chip.amber { background: var(--warning-bg); border-color: #efd99c; color: #8a6312; }
.chip.purple { background: var(--audit-bg); border-color: #d8ccf3; color: #5b3fa3; }
.chip.blue { background: var(--info-bg); border-color: #c5daf0; color: #245a91; }
.chip.dark { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.draft { background: #fff4e5; border-color: #f3c98b; color: #9a5a00; letter-spacing: .04em; text-transform: uppercase; font-size: .68rem; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: left; font-weight: 500; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .55rem .7rem; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.table td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tr.selectable { cursor: pointer; }
.table tr.selectable:hover td { background: #f5f8f1; }
.table tr.selected td { background: #eef4e6; }
.table td .input { min-height: 32px; padding: .28rem .5rem; font-size: .88rem; }
.table.compact td, .table.compact th { padding: .35rem .55rem; }
/* Long paths and identifiers wrap instead of pushing the card wider. */
.table td.mono { word-break: break-all; }

/* ── Envelope rows (two-line, so they fit a narrow editor column) ── */
.env-list { display: flex; flex-direction: column; gap: .5rem; }
.env-row { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: .5rem .6rem; }
.env-row.error { border-color: #f0c4c4; background: #fffafa; }
.env-row:focus-within { border-color: var(--jade); box-shadow: 0 0 0 2px rgba(2, 119, 168,.12); }
.env-line1 { display: flex; align-items: center; gap: .45rem; }
.env-line1 .name { flex: 1; min-width: 90px; }
.env-line1 .area { width: 92px; }
.env-line1 .mult { width: 58px; }
.env-line2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .4rem; margin-top: .4rem; padding-left: 36px; }
.env-line2 .construction { grid-column: span 2; }
.cap { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 1px; }
.env-detail { margin-top: .5rem; padding: .6rem .6rem .4rem 36px; border-top: 1px dashed var(--border); }
.opening { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(110px, 1.5fr) 64px 52px 56px 44px 28px; gap: .3rem; align-items: center; margin-bottom: .35rem; }
.opening.door { grid-template-columns: minmax(70px, 1fr) minmax(110px, 1.2fr) minmax(110px, 1.4fr) 64px 48px 28px; }
.opening > * { min-width: 0; }
.opening-head { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }

/* ── Tabs ── */
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
.tab { border: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--muted); padding: .6rem .9rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: .4rem; align-items: center; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--forest); border-bottom-color: var(--forest); font-weight: 500; }
.tab .chip { font-size: .66rem; padding: 0 .4rem; }

/* ── Alerts & issues ── */
.alert { display: flex; gap: .7rem; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid; font-size: .9rem; margin-bottom: .9rem; align-items: flex-start; }
.alert .grow { flex: 1; }
.alert.info { background: var(--info-bg); border-color: #c5daf0; color: #1f4f80; }
.alert.success { background: var(--success-bg); border-color: #bfe3cc; color: #1f5f3a; }
.alert.warning { background: var(--warning-bg); border-color: #efd99c; color: #6f4f0d; }
.alert.danger { background: var(--danger-bg); border-color: #f0c4c4; color: #8a2a2a; }
.alert.draft { background: #fff7ec; border-color: #f3c98b; color: #7a4a00; }
.issue { display: flex; gap: .55rem; padding: .55rem .2rem; border-bottom: 1px solid var(--border); font-size: .86rem; align-items: flex-start; }
.issue:last-child { border-bottom: 0; }
.issue .where { font-size: .74rem; color: var(--faint); }
.issue.clickable { cursor: pointer; border-radius: 6px; padding-left: .4rem; }
.issue.clickable:hover { background: var(--surface-2); }
.sev-error { color: var(--danger); }
.sev-warning { color: #7A5300; }
.sev-audit { color: var(--audit); }
.sev-lodgement { color: var(--info); }

/* ── Tip card ── */
.tip { border: 1px solid #cfe7da; background: linear-gradient(180deg, #f2faf6, #fff); border-radius: var(--radius); padding: .85rem .95rem; font-size: .87rem; }
.tip-title { display: flex; gap: .45rem; align-items: center; font-weight: 600; color: var(--forest); margin-bottom: .35rem; }
.tip p:last-child { margin-bottom: 0; }
.tip .tip-extra { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #cfe7da; font-size: .82rem; color: var(--muted); }

/* ── Stats ── */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; }
.stat-label { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat-value { font-size: 1.55rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: .15rem; }
.stat-value .unit { font-size: .8rem; font-weight: 400; color: var(--muted); margin-left: .2rem; }
.stat-delta { font-size: .78rem; margin-top: .1rem; }
.stat-delta.up { color: var(--danger); }
.stat-delta.down { color: var(--success); }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mini-stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .6rem; }
.mini-stat .l { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.mini-stat .v { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── EPC bands ── */
.band { display: inline-grid; place-items: center; min-width: 2.1em; height: 1.7em; padding: 0 .45em; border-radius: 6px; font-weight: 700; color: #fff; font-size: .9rem; }
.band-Aplus, .band-A\+ { background: var(--band-aplus); }
.band-A { background: var(--band-a); }
.band-B { background: var(--band-b); }
.band-C { background: var(--band-c); color: #1c2a0c; }
.band-D { background: var(--band-d); color: #3d3200; }
.band-E { background: var(--band-e); color: #3f2508; }
.band-F { background: var(--band-f); }
.band-G { background: var(--band-g); }
.rating-scale { display: flex; flex-direction: column; gap: 4px; }
.rating-row { display: flex; align-items: center; gap: .6rem; }
.rating-bar { height: 28px; border-radius: 0 5px 5px 0; display: flex; align-items: center; justify-content: space-between; padding: 0 .6rem; color: #fff; font-weight: 700; font-size: .86rem; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); }
.rating-bar .range { font-weight: 400; font-size: .74rem; opacity: .9; }
.rating-marker { display: flex; align-items: center; gap: .3rem; font-weight: 700; font-size: .95rem; color: var(--ink); }
.rating-marker .arrow { background: var(--ink); color: #fff; padding: .15rem .55rem .15rem .9rem; clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%); border-radius: 0 5px 5px 0; }

/* ── Hero rating ── */
.hero-rating { display: flex; gap: 1.25rem; align-items: center; }
.hero-rating .big { font-size: 3.2rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-rating .big-band { font-size: 2.2rem; width: 72px; height: 72px; border-radius: 16px; display: grid; place-items: center; font-weight: 700; color: #fff; }

/* ── Bars / charts ── */
.hbar { display: grid; grid-template-columns: 130px 1fr 70px; gap: .6rem; align-items: center; font-size: .85rem; margin-bottom: .45rem; }
.hbar-track { height: 10px; background: var(--surface-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--border); }
.hbar-fill { height: 100%; background: var(--jade); border-radius: 99px; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .78rem; color: var(--muted); }

/* ── Pre-lodgement intelligence (after the SAP app's Validation Intelligence panel) ── */
.intel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.intel-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .75rem 1rem; background: #3B4953; color: #fff; }
.intel-badge { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #5A7863; }
.intel-title { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.intel-link { color: #fff; }
.intel-link:hover { background: rgba(255,255,255,.12); }
.intel-body { padding: 1.2rem; }
.intel-stats { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: #EBF4DD; }
.intel-count { font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--ink); }
.intel-count-label { color: var(--muted); font-size: .85rem; }
.intel-levels { display: flex; gap: .35rem; flex-wrap: wrap; flex: 1; }
.intel-pill { padding: .35rem .9rem; border-radius: 99px; font-weight: 600; font-size: .85rem; color: #fff; background: #90AB8B; white-space: nowrap; }
.intel-pill.red { background: var(--danger); }
.intel-pill.purple { background: var(--audit); }
.intel-pill.amber { background: #B9871C; }
.intel-pill.green { background: var(--success); }
.intel-list { display: flex; flex-direction: column; gap: .5rem; padding: 0 1rem 1rem; }
.intel-card { display: flex; gap: .8rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--border); border-left: 2px solid transparent; border-radius: var(--radius-sm); color: inherit; text-decoration: none; transition: background .12s; }
.intel-card:hover { background: #EBF4DD; text-decoration: none; }
.intel-card.picked { background: #EFF3F5; border-left-color: #3B4953; }
.intel-icon { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.intel-icon.red { background: var(--danger-bg); color: var(--danger); }
.intel-icon.purple { background: var(--audit-bg); color: var(--audit); }
.intel-icon.amber { background: var(--warning-bg); color: var(--warning); }
.intel-text { flex: 1; min-width: 0; }
.intel-tag { font-size: .7rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: #E3ECE6; color: #3B4953; }
.intel-msg { font-weight: 500; margin: .2rem 0 .1rem; }
.intel-empty { text-align: center; padding: 2rem 1rem; color: var(--success); }
.intel-empty h3 { margin: .5rem 0 .2rem; }
.intel-empty p { color: var(--muted); }
.intel-note { margin: 0 1rem .5rem; font-size: .8rem; color: var(--muted); }
.intel-foot { padding: .7rem 1rem; border-top: 1px solid var(--border); font-size: .75rem; color: var(--faint); background: var(--surface-2); }

/* ── Compliance overview tiles (after the SAP app's dashboard) ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow-sm); }
.tile-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tile-value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; }
.tile.green .tile-value { color: var(--forest); }
.tile.red .tile-value { color: var(--danger); }
.tile.amber .tile-value { color: #B9871C; }
.tile.purple .tile-value { color: var(--audit); }
.tile.blue .tile-value { color: var(--info); }
.section-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin: .4rem 0 .5rem; }

/* ── Floor plans ── */
.plan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.plan-tools { flex-wrap: wrap; gap: .5rem; }
.plan-hint { padding: .45rem 1.1rem; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.plan-stage { overflow: auto; max-height: 72vh; background: #EEF2F0; border-radius: 0 0 var(--radius) var(--radius); }
.plan-svg { display: block; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.plan-svg.mode-select { cursor: pointer; }
.plan-svg polygon.shape { fill: rgba(2, 119, 168,.18); stroke: var(--jade); stroke-width: 2; vector-effect: non-scaling-stroke; }
.plan-svg polygon.shape.unlinked { stroke-dasharray: 6 4; fill: rgba(2, 119, 168,.1); }
.plan-svg polygon.shape.selected { fill: rgba(40,90,72,.3); stroke: var(--primary); stroke-width: 3; }
.plan-svg .drawing { fill: rgba(212,168,67,.15); stroke: #B9871C; stroke-width: 2; vector-effect: non-scaling-stroke; }
.plan-svg .vertex { fill: #fff; stroke: #B9871C; stroke-width: 2; vector-effect: non-scaling-stroke; }
.plan-svg .scale-line { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 8 4; vector-effect: non-scaling-stroke; }
.plan-svg .scale-end { fill: var(--danger); }
.plan-svg .plan-rubber { stroke: #B9871C; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; pointer-events: none; }
.plan-svg text { text-anchor: middle; fill: var(--primary); font-weight: 600; paint-order: stroke; stroke: #fff; pointer-events: none; }
.plan-svg text.sub { fill: var(--muted); font-weight: 500; }
.plan-compass { display: inline-flex; flex-direction: column; align-items: center; font-size: .66rem; font-weight: 700; color: var(--danger); line-height: 1; }
.plan-compass span { display: inline-block; font-size: .9rem; }
.issue.plan-picked { background: #eef4e6; border-radius: 6px; }
@media (max-width: 1100px) { .plan-layout { grid-template-columns: minmax(0, 1fr); } }

/* ── Why this rating ── */
.why-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 92px 56px; gap: .6rem; align-items: center; font-size: .86rem; padding: .4rem 0; border-top: 1px solid var(--border); }
.why-row:first-of-type { border-top: 0; }
.why-name { font-weight: 500; }
.why-comp { height: 5px; margin-top: 3px; opacity: .7; }
.why-detail { margin: -.15rem 0 .35rem calc(130px + .6rem); font-size: .8rem; color: var(--muted); }
.why-facts { display: flex; flex-wrap: wrap; gap: .15rem 1rem; margin-top: .15rem; font-size: .76rem; }
.why-total { font-weight: 600; border-top: 2px solid var(--border-strong); }
.sev-ok { color: var(--success); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }

/* ── Progress ── */
.progress { height: 8px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; background: var(--mint); border-radius: 99px; transition: width .3s; }
.progress.light { background: var(--surface-2); border: 1px solid var(--border); }
.progress.light > div { background: var(--jade); }

/* ── Tree (building navigator) ── */
.tree { font-size: .87rem; }
.tree-node { display: flex; align-items: center; gap: .4rem; padding: .3rem .45rem; border-radius: 6px; cursor: pointer; color: var(--text); min-width: 0; }
.tree-node:hover { background: var(--surface-2); }
.tree-node.selected { background: #eef4e6; color: var(--primary); font-weight: 500; }
.tree-node .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-node .meta { font-size: .72rem; color: var(--faint); }
.tree-children { margin-left: 1.05rem; border-left: 1px dashed var(--border-strong); padding-left: .3rem; }

/* ── Drop zone ── */
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 2.2rem 1rem; text-align: center; background: var(--surface); transition: border-color .15s, background .15s; position: relative; }
.dropzone:hover, .dropzone.over { border-color: var(--jade); background: #f2faf6; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ── Modal ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(9,20,19,.45); display: grid; place-items: center; z-index: 50; padding: 1rem; animation: fade .12s ease-out; }
.modal { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); width: min(640px, 100%); max-height: 90vh; display: flex; flex-direction: column; animation: pop .15s ease-out; }
.modal.wide { width: min(980px, 100%); }
.modal-head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; flex: 1; font-size: 1.1rem; }
.modal-body { padding: 1.2rem; overflow-y: auto; }
.modal-foot { padding: .85rem 1.2rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Toasts ── */
.toasts { position: fixed; right: 1.2rem; bottom: 1.2rem; display: flex; flex-direction: column; gap: .5rem; z-index: 60; }
.toast { background: var(--ink); color: #fff; padding: .7rem 1rem; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: .88rem; display: flex; gap: .6rem; align-items: center; min-width: 260px; max-width: 420px; animation: pop .15s ease-out; }
.toast.error { background: #8a2a2a; }
.toast.success { background: var(--primary); }

/* ── Empty state ── */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.empty .icon-ring { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto .8rem; background: var(--shell); color: var(--forest); }
.empty h3 { color: var(--ink); }

/* ── Home hero ── */
.hero { background: linear-gradient(120deg, var(--primary), var(--forest) 60%, var(--jade)); color: #fff; border-radius: 18px; padding: 2rem 2.2rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; }
.hero h1 { color: #fff; font-size: 1.9rem; margin-bottom: .4rem; }
.hero p { color: #d6ece2; max-width: 640px; }
.hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(186, 230, 253,.12); }

/* ── Compass picker ── */
.compass { display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); gap: 3px; }
.compass button { border: 1px solid var(--border); background: var(--surface); border-radius: 6px; font: inherit; font-size: .7rem; cursor: pointer; color: var(--muted); padding: 0; }
.compass button.on { background: var(--forest); color: #fff; border-color: var(--forest); }
.compass .c { display: grid; place-items: center; font-size: .65rem; color: var(--faint); }

/* ── Spinner ── */
.spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Report viewer ── */
.report-frame { width: 100%; height: calc(100vh - 230px); min-height: 520px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }

/* ── Utilities ── */
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.gap-sm { gap: .4rem; }
.w-100 { width: 100%; }
.divider { height: 1px; background: var(--border); margin: 1rem 0; }
.kbd { font-family: var(--mono); font-size: .75rem; background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; }

/* ── Signed-in assessor ── */
.sidebar-user { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding: .75rem .9rem .75rem 1.1rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-user + .sidebar-foot { margin-top: 0; }
.sidebar-user .avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(186, 230, 253,.18); color: var(--mint); font-size: .78rem; font-weight: 600; }
.sidebar-user .who { flex: 1; min-width: 0; }
.sidebar-user .name { color: #fff; font-size: .85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .sub { color: rgba(227, 231, 238,.6); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .signout { color: #E3E7EE; }
.sidebar-user .signout:hover { background: rgba(255,255,255,.08); }
.nav-button { width: 100%; border: 0; background: none; font: inherit; text-align: left; }

/* ── Site survey ── one row per input: what was entered on the left, the answer, note and camera on the right. */
.survey-progress { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.survey-bar { flex: 1 1 160px; max-width: 320px; height: 8px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.survey-bar span { display: block; height: 100%; background: var(--forest); transition: width .2s ease; }
.survey-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: .5rem 1rem; padding: .8rem 1rem; border-top: 1px solid var(--border); border-left: 3px solid transparent; }
.survey-item:first-child { border-top: 0; }
.survey-item.ok { border-left-color: var(--success); }
.survey-item.bad { border-left-color: var(--danger); background: var(--danger-bg); }
.survey-item.warn { border-left-color: var(--warning); }
.survey-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.survey-entered { font-size: .88rem; overflow-wrap: anywhere; }
.survey-actions { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.survey-status { width: 100%; }
.survey-status button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
.survey-status button.on.ok { color: #1f6b41; }
.survey-status button.on.bad { color: #a63232; }
.survey-status button.on.warn { color: #8a6312; }
.survey-photo { cursor: pointer; font: inherit; font-size: .75rem; }

/* ── Phones and tablets ──
   Below 760px the sidebar becomes a drawer behind the menu button, the top bar keeps
   icons only, and touch targets grow. iOS zooms into inputs under 16px, so they are 16px. */
.menu-btn, .nav-backdrop { display: none; }

@media (max-width: 1280px) {
    :root { --assistant-w: 280px; }
}
@media (max-width: 1100px) {
    .hide-md { display: none !important; }
    /* No room for the right-hand panel: the steps go back to the left menu. */
    .assistant { display: none; }
    .steps-in-sidebar { display: block; }
    .shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-areas: "side top" "side main"; }
}
@media (max-width: 900px) {
    :root { --sidebar-w: 220px; }
    .grid-2, .grid-3, .grid-4, .split { grid-template-columns: 1fr; }
    /* Pages that size their two columns inline (list beside editor, report list beside preview) stack too. */
    .split[style], .grid[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 760px) {
    :root { --topbar-h: 56px; }
    .shell, .shell.no-project { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; height: 100vh; height: 100dvh; }
    .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); z-index: 45; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
    .shell.nav-open .sidebar { transform: none; }
    .shell.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 44; background: rgba(9,20,19,.45); }
    .menu-btn { display: inline-flex; flex: none; }
    .nav-item { padding: .7rem .6rem; }

    .topbar { padding: 0 .5rem; gap: .4rem; }
    .topbar .btn-label, .hide-sm { display: none !important; }
    .topbar .btn.sm { min-height: 38px; padding: .3rem .55rem; }
    .topbar-title .t2 { display: none; }

    .main { padding: 1rem .85rem 5rem; }
    .hero { padding: 1.25rem 1.15rem; border-radius: 14px; }
    .hero h1 { font-size: 1.35rem; }
    .hero p { font-size: .9rem; }
    .page-actions { width: 100%; }
    .survey-item { grid-template-columns: minmax(0, 1fr); padding: .75rem .8rem; }
    .survey-status button { min-height: 42px; padding: .3rem .4rem; }
    .page-actions .input-wrap { width: 100% !important; }
    .page-actions select.input { flex: 1; }
    .grid-auto { grid-template-columns: minmax(0, 1fr); }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    /* A two-wide field in a one-column form would add a squeezed second column. */
    .form-grid .span-2 { grid-column: 1 / -1; }
    /* Lists that stay in view beside an editor on a wide screen would sit on top of it here. */
    .split > [style*="sticky"] { position: static !important; }
    .panes { grid-template-columns: minmax(0, 1fr); }

    .card-head { flex-wrap: wrap; }
    .why-row { grid-template-columns: 84px minmax(0, 1fr) 70px 48px; gap: .4rem; }
    .why-detail { margin-left: 0; }
    .btn { min-height: 40px; }
    .btn.sm { min-height: 36px; }
    .input, select.input, textarea.input { font-size: 16px; min-height: 42px; }

    .modal-backdrop { padding: .5rem; align-items: end; }
    .modal, .modal.wide { width: 100%; max-height: 92vh; border-radius: 16px 16px 12px 12px; }
    .toasts { left: .75rem; right: .75rem; bottom: .75rem; }
    .toast { min-width: 0; max-width: none; }
}

.qa { border-left: 3px solid var(--border); padding: .4rem 0 .4rem .8rem; }
.qa.closed { opacity: .45; }
.qa .q { font-weight: 500; margin-bottom: .3rem; }
.level-Blocked { border-left: 4px solid var(--danger); }
.level-WillAudit { border-left: 4px solid var(--audit); }
.level-Check { border-left: 4px solid var(--warning); }
.level-Info { border-left: 4px solid var(--info); }
.issue-row { padding: .65rem .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .5rem; }
.issue-row .t { font-weight: 600; }
.issue-row .src { font-size: .72rem; color: var(--faint); }
table.table td .input { min-width: 90px; }

/* Palette: sky and ice are light, so text on them is dark. */
.nav-item.done .nav-step, .rail-steps .nav-item.done .nav-step { color: var(--ink); }
.progress > div, .rail-steps .progress > div { background: var(--mint); }
.rail-steps .progress > div { background: var(--forest); }
.btn.accent { color: var(--ink); }
.brand-mark { color: var(--primary); }

/* Reading evidence notes: a quiet line under each reading */
.table tr.note-row td { padding-top: 0; border-top: 0; }
.table tr.note-row textarea { width: 100%; resize: vertical; font-size: .8rem; color: var(--muted); min-height: 2rem; }
.table tr:has(+ tr.note-row) td { border-bottom: 0; }

/* ── Air-con additions ── */
/* The inspection questions: one row each, the Yes/No switch beside the label, the note under it. */
.qa { border-left: 3px solid var(--border); padding: .5rem 0 .5rem .8rem; margin-bottom: .4rem; }
.qa.bad { border-left-color: var(--warning); }
.qa.unanswered { border-left-color: var(--danger); }
.qa .q { font-weight: 500; display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.qa .help { font-size: .8rem; color: var(--muted); }
.qa textarea { width: 100%; min-height: 2.2rem; resize: vertical; margin-top: .35rem; }
.qa-section { margin-bottom: 1rem; }
.qa-section > h4 { margin: .2rem 0 .5rem; }
/* Calculation working: printed as it will appear in the site notes. */
.working { font-family: var(--mono); font-size: .8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .55rem .75rem; white-space: pre-wrap; color: var(--text); }
/* Unit lists (plant, AHUs, terminal units, controls) */
.unit-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: .4rem; cursor: pointer; }
.unit-row.on { border-color: var(--forest); box-shadow: 0 0 0 2px rgba(29, 106, 138, .15); }
.unit-row .grow { min-width: 0; }
.unit-row .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unit-row.sampled { opacity: .7; }
.level-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; height: 1.8em; border-radius: 6px; font-weight: 700; background: var(--primary); color: #fff; padding: 0 .5rem; }
.level-badge.l4 { background: var(--forest); }
.rec-row { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .4rem; }
.rec-row .seq { font-weight: 600; color: var(--muted); min-width: 1.5rem; padding-top: .45rem; }
.rec-row textarea { flex: 1; min-height: 2.4rem; resize: vertical; }
.library-item { padding: .5rem .7rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); margin-bottom: .4rem; }
.library-item .t { font-weight: 600; }
.stack-sm { display: flex; flex-direction: column; gap: .35rem; }

/* Add is always green with a plus; delete is always a red bin. A lodged inspection (disabled fieldset) shows neither. */
.btn.add { background: var(--success); border-color: var(--success); color: #fff; }
.btn.add:hover { background: #256f46; border-color: #256f46; }
.btn.delete { color: var(--danger); border-color: #ebc2c2; background: var(--surface); }
.btn.delete:hover { background: var(--danger-bg); }
.readonly-body:disabled .edit-only, .readonly-body:disabled .btn.add, .readonly-body:disabled .btn.delete { display: none !important; }
.lodged-banner { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem; }
/* A numbered recommendation: number, text, delete, always on one line. */
.rec-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .5rem; align-items: start; }
.rec-row .seq { padding-top: .55rem; color: var(--muted); font-weight: 600; }
.rec-row textarea { width: 100%; min-height: 3.4rem; }
/* The problems of one unit, listed under it in the unit list. */
.unit-problems { list-style: none; margin: -.25rem 0 .5rem 2.2rem; padding: 0; font-size: .8rem; cursor: pointer; }
.unit-problems li { padding: .1rem 0 .1rem .9rem; position: relative; }
.unit-problems li::before { content: "●"; position: absolute; left: 0; font-size: .6rem; top: .35rem; }
.unit-problems li.level-Blocked::before { color: var(--danger); }
.unit-problems li.level-Check::before { color: #c98a12; }

/* A problem in the unit list is a link to the field that fixes it. */
.unit-problems .fix-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--primary); text-decoration: underline; cursor: pointer; text-align: left; }
.unit-problems .fix-link:hover { color: var(--forest); }
.unit-problems .what { margin-left: .35rem; }
.unit-problems .what::before { content: "· "; color: var(--muted); }
@keyframes fix-flash { 0%, 60% { box-shadow: 0 0 0 3px rgba(201, 138, 18, .55); } 100% { box-shadow: 0 0 0 0 rgba(201, 138, 18, 0); } }
.fix-flash { animation: fix-flash 2s ease-out; border-radius: var(--radius-sm); }

/* Back and Next stand out; Copy is blue. */
.btn.back { background: #E3F1F6; border-color: #38BDF8; color: #1D4F66; }
.btn.back:hover { background: #cfe7f0; border-color: #4f97ae; color: #163d4f; }
.btn.copy { background: #1F6FD1; border-color: #1F6FD1; color: #fff; }
.btn.copy:hover { background: #185bb0; border-color: #185bb0; }

/* Yes/No and Provided/Not available: unpicked choices look like buttons; the picked one is coloured by what it means. */
.segmented.yesno { background: var(--surface); }
.segmented.yesno button { border: 1px solid var(--border); color: var(--ink); background: var(--surface); }
.segmented.yesno button:hover { background: var(--surface-2); }
.segmented.yesno button.on { font-weight: 600; box-shadow: none; }
.segmented.yesno button.on.good { background: var(--success); border-color: var(--success); color: #fff; }
.segmented.yesno button.on.bad { background: var(--danger); border-color: var(--danger); color: #fff; }
.segmented.yesno button.on.warn { background: #8F6200; border-color: #8F6200; color: #fff; }
.segmented.yesno button.on.neutral { background: var(--forest); border-color: var(--forest); color: #fff; }
.readonly-body .segmented.yesno button.on { opacity: 1; }

/* Sub-tabs over a unit's form. */
.subtabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; border-bottom: 2px solid var(--border); }
.subtab { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; margin-bottom: -2px; border-bottom: 3px solid transparent;
          color: var(--muted); font-size: .88rem; font-weight: 500; cursor: pointer; text-decoration: none; border-radius: 6px 6px 0 0; user-select: none; }
.subtab:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.subtab.on { color: var(--forest); border-bottom-color: var(--forest); background: var(--surface); font-weight: 600; }
.subtab:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; }
.subtab-count { background: var(--danger); color: #fff; border-radius: 999px; font-size: .72rem; min-width: 1.3rem; padding: 0 .35rem; text-align: center; line-height: 1.3rem; }
.subtab-done { color: var(--success); font-weight: 700; }
.subtab-panel[hidden] { display: none !important; }

/* What is left: a box at the top of a tab or step, and every field still needed outlined. */
.todo-box { border: 1px solid #f0c4c4; background: #fff7f7; border-left: 4px solid var(--danger); border-radius: var(--radius-sm); padding: .6rem .9rem; margin-bottom: .75rem; }
.todo-box .todo-title { font-weight: 600; color: #8f2c2c; display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; }
.todo-box ol { margin: 0; padding-left: 1.3rem; font-size: .86rem; }
.todo-box li { padding: .12rem 0; }
.todo-box li.warn::marker { color: #C98A12; }
.todo-box a { color: var(--primary); text-decoration: underline; cursor: pointer; }
.todo-box a:hover { color: var(--forest); }
.field.missing .input { border-color: var(--danger); background: #fff7f7; }
.field.missing .field-label::after { content: " · required"; color: var(--danger); font-weight: 600; }
.field.missing.warn .input { border-color: #C98A12; background: #fffaf0; }
.field.missing.warn .field-label::after { content: " · not recorded"; color: #A06A08; }
.need-tag { display: inline-block; margin-left: .4rem; font-size: .72rem; font-weight: 600; color: #fff; background: var(--danger); border-radius: 999px; padding: .05rem .5rem; vertical-align: middle; }

/* Dashboard: figure tiles and single-series charts drawn as SVG in the page. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat-tile { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem .9rem; color: var(--ink); text-decoration: none; }
a.stat-tile:hover { border-color: var(--forest); text-decoration: none; }
.stat-tile .v { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-tile .l { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.stat-tile.warn { border-left: 4px solid var(--warning); }
.stat-tile.bad { border-left: 4px solid var(--danger); }
.dash-row { margin-bottom: 1rem; }
.chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .8rem .9rem; min-width: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .5rem; }
.chart-title { font-weight: 600; }
.chart-empty { padding: 2rem 0; text-align: center; }
.chart-table { font-size: .85rem; }
.vbars { width: 100%; height: 190px; display: block; overflow: visible; }
.vbars .axis { stroke: var(--border-strong, #c9d2cf); stroke-width: 1; }
.vbars .grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; }
.vbars .tick { font-size: 10px; fill: var(--muted); }
.vbars .val { font-size: 10px; fill: var(--ink); font-weight: 600; }
.vbars .fill { fill: var(--forest); }
.vbars .hit { fill: transparent; }
.vbars .bar:hover .fill { fill: var(--primary); }
.vbars .bar:hover .hit { fill: rgba(0, 0, 0, .03); }
.hbars { display: flex; flex-direction: column; gap: .45rem; }
.hbar { display: grid; grid-template-columns: minmax(6rem, 38%) 1fr auto; align-items: center; gap: .5rem; font-size: .85rem; }
.hbar-label { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 12px; background: var(--surface-2); border-radius: 0 4px 4px 0; overflow: hidden; }
.hbar-fill { display: block; height: 100%; background: var(--forest); border-radius: 0 4px 4px 0; }
.hbar:hover .hbar-fill { background: var(--primary); }
.hbar-value { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 2rem; text-align: right; }
@media (max-width: 900px) { .dash-row.grid-2, .dash-row.grid-3 { grid-template-columns: 1fr; } }

/* Model memory: the figures this assessor entered for the same model before, offered beside the Model box. */
.model-memory { display: flex; gap: .6rem; align-items: center; background: #E6F5EE; border: 1px solid #B0E4CC; border-left: 4px solid #408A71; border-radius: var(--radius-sm); padding: .55rem .7rem; font-size: .88rem; }
.model-memory > svg { color: #285A48; flex: none; }
@media (max-width: 700px) { .model-memory { flex-wrap: wrap; } }

/* Dashboard colour and motion. Each tile and chart has a tone (its colour); amber and red are kept for things to act on.
   Tiles rise in one after another, bars grow from their baseline, the fan turns. All of it stops for people who ask
   their device for reduced motion. */
.tone-blue   { --tone: #2F6FB0; --tone-bg: #E8F1FA; --tone-soft: #8DB6E0; }
.tone-sea    { --tone: #0277A8; --tone-bg: #E3F1F6; --tone-soft: #7FB8CE; }
.tone-green  { --tone: #2E8B57; --tone-bg: #E6F4EC; --tone-soft: #8CCBA6; }
.tone-purple { --tone: #7A5BC4; --tone-bg: #F1ECFB; --tone-soft: #B9A6E6; }
.tone-amber  { --tone: #C2861A; --tone-bg: #FBF3DF; --tone-soft: #E8C47A; }
.tone-red    { --tone: #D14848; --tone-bg: #FCECEC; --tone-soft: #EBA0A0; }
.tone-cyan   { --tone: #0E8FA8; --tone-bg: #E0F4F8; --tone-soft: #78C9D9; }
.tone-teal   { --tone: #13866F; --tone-bg: #E2F4EF; --tone-soft: #7CC9B8; }

.page-head { background: linear-gradient(120deg, #062C43 0%, #073B5A 45%, #0277A8 100%); color: #fff; border-radius: var(--radius); padding: 1.1rem 1.25rem; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.page-head::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(167, 216, 230, .35), transparent 70%); pointer-events: none; animation: dash-glow 6s ease-in-out infinite alternate; }
.page-head h1 { color: #fff; }
.page-head p { color: rgba(255, 255, 255, .8); }
.page-head .page-actions { position: relative; z-index: 1; }
/* On the banner the main button is sky blue: the usual one would disappear into it. */
.page-head .btn.primary { background: var(--jade); border-color: var(--jade); color: var(--ink); }
.page-head .btn.primary:hover { background: var(--mint); border-color: var(--mint); color: var(--ink); }
/* Every banner the same height, one line of text: the whole wording is in its tooltip. A phone has no room, so it wraps. */
@media (min-width: 901px) {
    .page-head { height: 96px; flex-wrap: nowrap; align-items: center; }
    .page-head .grow { min-width: 0; }
    .page-head h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .page-head p { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .page-head .page-actions { flex-wrap: nowrap; flex: none; }
}
@media print {
    .page-head { background: none; color: inherit; box-shadow: none; padding: 0; height: auto; }
    .page-head p { white-space: normal; }
    .page-head::after { display: none; }
    .page-head h1, .page-head p { color: #000; }
}

.stat-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
.stat-tile { display: flex; gap: .7rem; align-items: flex-start; position: relative; overflow: hidden; border-radius: var(--radius);
    background: linear-gradient(160deg, var(--surface) 55%, var(--tone-bg, var(--surface)) 100%); border: 1px solid var(--border);
    border-top: 3px solid var(--tone, var(--border)); box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    animation: dash-rise .45s ease-out both; }
.stat-grid > :nth-child(2) { animation-delay: .04s; } .stat-grid > :nth-child(3) { animation-delay: .08s; }
.stat-grid > :nth-child(4) { animation-delay: .12s; } .stat-grid > :nth-child(5) { animation-delay: .16s; }
.stat-grid > :nth-child(6) { animation-delay: .2s; }  .stat-grid > :nth-child(7) { animation-delay: .24s; }
.stat-grid > :nth-child(8) { animation-delay: .28s; } .stat-grid > :nth-child(9) { animation-delay: .32s; }
a.stat-tile:hover, div.stat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border); border-top-color: var(--tone); }
.stat-tile.warn, .stat-tile.bad { border-left-width: 1px; border-left-color: var(--border); }
.stat-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--tone); background: var(--tone-bg); }
.stat-icon.spin svg { animation: dash-spin 6s linear infinite; }
.stat-text { display: flex; flex-direction: column; min-width: 0; }
.stat-tile .v { color: var(--tone, var(--ink)); }
.stat-tile .l { margin-top: .25rem; line-height: 1.3; }
.tone-red .stat-icon { animation: dash-pulse 2.2s ease-in-out infinite; }

.chart, .dash-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); animation: dash-rise .5s ease-out .15s both; }
.chart { border-top: 3px solid var(--tone, var(--border)); }
.chart-heading, .dash-h { display: flex; align-items: center; gap: .55rem; }
.chart-icon { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--tone); background: var(--tone-bg); }
.chart .hbar-fill { background: linear-gradient(90deg, var(--tone-soft), var(--tone)); transform-origin: left center; animation: dash-grow-x .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.2s + var(--n, 0) * .06s); }
.chart .hbar:hover .hbar-fill { background: var(--tone); filter: brightness(.9); }
.chart .vbars .fill { fill: var(--tone); }
.chart .vbars .bar .fill { transform-box: fill-box; transform-origin: center bottom; animation: dash-grow-y .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.2s + var(--n, 0) * .04s); }
.chart .vbars .bar:hover .fill { fill: var(--tone); filter: brightness(.85); }
.chart .vbars .hit { fill: transparent; }
.chart .vbars .bar:hover .hit { fill: var(--tone-bg); }
.good-note { color: var(--success); display: flex; gap: .4rem; align-items: center; }

@keyframes dash-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dash-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dash-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dash-spin { to { transform: rotate(360deg); } }
@keyframes dash-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(209, 72, 72, .35); } 50% { box-shadow: 0 0 0 6px rgba(209, 72, 72, 0); } }
@keyframes dash-glow { from { transform: translate(0, 0); opacity: .7; } to { transform: translate(-30px, 20px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .stat-tile, .chart, .dash-card, .chart .hbar-fill, .chart .vbars .bar .fill, .stat-icon, .stat-icon.spin svg, .page-head::after { animation: none !important; }
    .stat-tile { transition: none; }
}
@media (max-width: 600px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .stat-icon { width: 32px; height: 32px; } .stat-tile .v { font-size: 1.35rem; } }

/* Inspections list: coloured filters with icons and counts, a stage stripe on each row. */
.list-tools { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-bottom: .9rem; animation: dash-rise .4s ease-out both; }
.find-box { display: flex; align-items: center; gap: .5rem; flex: 1 1 18rem; max-width: 24rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .45rem .9rem; color: var(--muted); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.find-box:focus-within { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(2, 119, 168, .15); }
.find-box input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; font: inherit; color: var(--ink); }
.filter-pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.filter-pill { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--border); background: var(--surface); color: var(--tone); border-radius: 999px; padding: .4rem .8rem; font: inherit; font-size: .86rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s, transform .15s, box-shadow .15s; }
.filter-pill:hover { background: var(--tone-bg); transform: translateY(-1px); }
.filter-pill .count { min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--tone-bg); color: var(--tone); font-size: .78rem; font-weight: 700; text-align: center; }
.filter-pill.on { background: var(--tone); border-color: var(--tone); color: #fff; box-shadow: 0 3px 10px rgba(6, 44, 67, .18); }
.filter-pill.on .count { background: rgba(255, 255, 255, .25); color: #fff; }
/* Amber text on its pale background needs a darker amber to be read (4.5:1): the colour's meaning stays. */
.filter-pill.tone-amber, .filter-pill.tone-amber .count, .stage-chip.tone-amber { color: #7A5300; }
.filter-pill.tone-amber.on { background: #8F6200; border-color: #8F6200; color: #fff; }
.filter-pill.tone-amber.on .count { color: #fff; }
.list-pager { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .7rem; }
.list-pager > span { margin-right: .4rem; }
.inspection-list tbody tr { animation: dash-rise .35s ease-out both; }
.inspection-list tbody tr td:first-child { box-shadow: inset 4px 0 0 var(--tone); }
.inspection-list tbody tr:hover td { background: var(--tone-bg); }
.stage-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--tone); background: var(--tone-bg); border: 1px solid var(--tone-soft); }
@media (prefers-reduced-motion: reduce) { .list-tools, .inspection-list tbody tr { animation: none !important; } .filter-pill { transition: none; } }

/* When the connection drops or the app faults: blazor.web.js puts a class on the box; the error box it simply shows. */
#components-reconnect-modal, #blazor-error-ui { display: none; position: fixed; z-index: 2000; left: 50%; bottom: 1.2rem; transform: translateX(-50%); width: min(40rem, calc(100vw - 2rem));
    padding: .8rem 1rem; border-radius: 10px; border: 1px solid #efd99c; background: var(--warning-bg); color: #5A3E00; box-shadow: 0 8px 28px rgba(6, 44, 67, .28); font-size: .92rem; }
#components-reconnect-modal.components-reconnect-show, #components-reconnect-modal.components-reconnect-retrying, #components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed, #components-reconnect-modal.components-reconnect-rejected, #components-reconnect-modal.components-reconnect-resume-failed { display: block; }
#components-reconnect-modal .reconnect-lost { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-trying, #components-reconnect-modal.components-reconnect-rejected .reconnect-trying, #components-reconnect-modal.components-reconnect-resume-failed .reconnect-trying { display: none; }
#components-reconnect-modal.components-reconnect-failed .reconnect-lost, #components-reconnect-modal.components-reconnect-rejected .reconnect-lost, #components-reconnect-modal.components-reconnect-resume-failed .reconnect-lost { display: block; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; margin-left: .75rem; }
#khamo-notice { display: none; position: fixed; z-index: 1900; left: 50%; bottom: 1.2rem; transform: translateX(-50%); width: min(36rem, calc(100vw - 2rem));
    padding: .7rem 1rem; border-radius: 10px; background: #062C43; color: #fff; box-shadow: 0 8px 28px rgba(6, 44, 67, .28); font-size: .9rem; }
#khamo-notice.show { display: block; }

/* Sidebar cards: three (DEC four) panels, each with its own colour for border, icons, hover and the selected item.
   Inside the list card, one section per stage in a colour of its own. Colours are RGB triples so they can be tinted. */
.nav-cards { display: flex; flex-direction: column; gap: .6rem; }
.nav-card { --nc: 45, 212, 191; padding: .3rem; border-radius: 12px; border: 1px solid rgba(var(--nc), .4);
    background: linear-gradient(160deg, rgba(var(--nc), .14), rgba(0, 0, 0, .16)); transition: border-color .18s, box-shadow .18s; }
.nav-card.c-orange { --nc: 251, 146, 60; }
.nav-card.c-purple { --nc: 167, 139, 250; }
.nav-card.c-pink { --nc: 244, 114, 182; }
.nav-card:hover, .nav-card:focus-within { border-color: rgba(var(--nc), .85); box-shadow: 0 0 14px rgba(var(--nc), .28); }
.nav-card > .nav-item { margin: 0 0 2px; }
.nav-card > .nav-item:last-child { margin-bottom: 0; }
.nav-card > .nav-item > svg { color: rgb(var(--nc)); }
.nav-card > .nav-item:hover { background: rgba(var(--nc), .2); }
.nav-card > .nav-item.active { background: rgba(var(--nc), .28); box-shadow: inset 3px 0 0 rgb(var(--nc)); }
.nav-card .nav-tree-search { display: block; width: calc(100% - .5rem); margin: .3rem .25rem .4rem; border-color: rgba(var(--nc), .35); background: rgba(0, 0, 0, .18); }
.nav-card .nav-tree-search:focus { border-color: rgb(var(--nc)); }

.nav-group { --ns: 251, 191, 36; margin: 0 .25rem .3rem; border-radius: 8px; border: 1px solid rgba(var(--ns), .28); background: rgba(var(--ns), .07); overflow: hidden; }
.nav-group.s-calc { --ns: 74, 222, 128; }
.nav-group.s-lodged { --ns: 167, 139, 250; }
.nav-group-head { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .36rem .5rem; border: 0; background: transparent; color: #fff; font: inherit; font-size: .82rem; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s; }
.nav-group-head .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-head:hover:not(:disabled) { background: rgba(var(--ns), .18); }
.nav-group-head:disabled { cursor: default; }
.nav-group-head > svg:first-child { color: rgb(var(--ns)); }
.nav-group.open .nav-group-head { background: rgba(var(--ns), .14); }
.nav-group-count { min-width: 1.4rem; padding: 0 .35rem; border-radius: 99px; background: rgba(var(--ns), .4); font-size: .7rem; line-height: 1.5; text-align: center; }
.nav-group-body { padding: .15rem .15rem .2rem; animation: nav-group-open .2s ease-out; }
.nav-group .nav-tree-item > svg { color: rgb(var(--ns)); flex: none; }
.nav-group .nav-tree-item:hover { background: rgba(var(--ns), .16); }
.nav-group .nav-tree-item.active { background: rgba(var(--ns), .22); box-shadow: inset 3px 0 0 rgb(var(--ns)); }
.nav-tree-more { display: flex; align-items: center; gap: .3rem; padding: .25rem .55rem; font-size: .76rem; color: #fff; text-decoration: none; }
a.nav-tree-more:hover { text-decoration: underline; }
.nav-tree-more > svg { color: rgb(var(--ns, var(--nc))); }
.nav-tree-more.all { font-weight: 600; padding-bottom: .4rem; }
.nav-stage { --ns: 251, 191, 36; flex: none; padding: 0 .4rem; border-radius: 99px; font-size: .64rem; font-weight: 600; line-height: 1.55; color: #fff; background: rgba(var(--ns), .32); border: 1px solid rgba(var(--ns), .6); }
.nav-stage.s-calc { --ns: 74, 222, 128; }
.nav-stage.s-lodged { --ns: 167, 139, 250; }
/* New amber, in progress blue, calculated or ready green, lodged purple: the same in every list. */
.nav-tree-item.st-progress, .nav-stage.st-progress { --ns: 96, 165, 250; }
/* Grid headers in the product's theme. */
.table thead th { background: var(--primary); color: #fff; font-weight: 600; border-bottom-color: var(--primary); }
.card:has(> .table-wrap) { overflow: hidden; }
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }

@keyframes nav-group-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-card, .nav-group-head { transition: none; } .nav-group-body { animation: none; } }

/* Import buttons stand out in one colour, the same orange as the sidebar's "start something" card. */
.btn.import { background: linear-gradient(135deg, #C2410C, #DD5A0B); border-color: #C2410C; color: #fff; }
.btn.import:hover { background: linear-gradient(135deg, #AB3A0B, #C2410C); border-color: #AB3A0B; color: #fff; text-decoration: none; }

/* File button in place of the browser's grey "Choose file". */
.file-pick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .65rem; cursor: pointer; }
.file-pick input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; color: #fff; cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--forest)); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: transform .15s, box-shadow .15s, filter .15s; }
.file-pick:hover .file-pick-btn, .dropzone:hover .file-pick-btn { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); filter: brightness(1.12); }
.file-pick:focus-within .file-pick-btn { outline: 2px solid var(--forest); outline-offset: 2px; }
.file-pick.disabled, .file-pick.disabled .file-pick-btn { cursor: not-allowed; opacity: .6; }
.file-pick-hint { font-size: .82rem; color: var(--muted); }
.file-pick-name { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 500; color: var(--forest); }
.dropzone { border-color: var(--forest); background: linear-gradient(160deg, var(--surface), var(--shell)); }
@media (prefers-reduced-motion: reduce) { .file-pick-btn { transition: none; } }

/* Pre-lodgement check: Khamo Commercial EPC's pre-lodgement layout in this product's colours. */
.intel-stats { margin: 0 0 .9rem; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.intel-list { padding: 0; }
.intel-card:hover { background: var(--surface-2); }
.intel-tag { background: var(--shell); color: var(--ink); }
.intel-icon.green { background: var(--success-bg); color: var(--success); }
.intel-note { margin: .5rem 0 0; display: flex; gap: .4rem; align-items: flex-start; }
.rule-row { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius-sm); }
.rule-row.purple { border-left-color: var(--audit); background: var(--audit-bg); }
.rule-row.amber { border-left-color: var(--warning); }
.rule-row.green { border-left-color: var(--success); }

/* Reports & exports: Khamo Commercial EPC's report list and preview, in this product's colours. */
.reports-layout { display: grid; gap: 1rem; grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.report-list { display: flex; flex-direction: column; gap: .5rem; }
.report-card { display: block; width: 100%; margin: 0; padding: .8rem .9rem; text-align: left; font: inherit; color: inherit; }
.report-card.on { border-color: var(--jade); background: var(--surface-2); }
.report-card-title { display: flex; gap: .45rem; align-items: center; }
.report-card-text { display: block; margin-top: .3rem; }
.report-preview { min-width: 0; }
.report-head { flex-wrap: wrap; }
.report-actions { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.report-frame-body { padding: .5rem; }
.report-frame { display: block; width: 100%; height: calc(100vh - 290px); min-height: 520px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.report-fallback { margin-top: .4rem; padding: 0 .2rem; }
.compare-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem .9rem; margin-bottom: 1rem; }
.compare-facts > div { display: flex; flex-direction: column; min-width: 0; }
.compare-facts .l { font-size: .74rem; color: var(--muted); }
.compare-facts .v { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.compare-table tr.differs td { background: var(--warning-bg); font-weight: 500; }
.compare-notes { margin: .3rem 0 .8rem; padding-left: 1.1rem; overflow-wrap: anywhere; }
@media (max-width: 1250px) { .reports-layout { grid-template-columns: minmax(0, 1fr); } .report-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
/* Print on the comparison prints the comparison: the PDFs print from their own frame. */
@media print {
    body:has(.report-print) .sidebar, body:has(.report-print) .topbar, body:has(.report-print) .assistant, body:has(.report-print) .page-head,
    body:has(.report-print) .subtabs, body:has(.report-print) .report-list, body:has(.report-print) .report-actions, body:has(.report-print) .readonly-banner { display: none !important; }
    body:has(.report-print) .shell, body:has(.report-print) .reports-layout { display: block; }
    body:has(.report-print) .main { overflow: visible; height: auto; }
}
/* The step's tip in the assistant panel: arctic blue, not the green it came with. */
.tip { border-color: #cfe4f2; background: linear-gradient(180deg, #eef7fc, #fff); }
.tip .tip-extra { border-top-color: #cfe4f2; }