/* Healthy Homes record keeper — only what is unique to its own screens.
 *
 * The header, banner, desk pill row, phone dock, panels, buttons, inputs,
 * labels, chips, KPI tiles, list states, toasts and sheets are the shared app
 * shell's (assets/css/nzr-app-shell.css, linked after the brand bridge in
 * index.html). Nothing here redeclares a brand colour: --forest, --forest-deep,
 * --green, --accent, --sage, --mint, --ink and --line come from the bridge, and
 * --mute, --ff and --fb from the token file it imports. Status colours are the
 * --nzr-status-* tokens. Converted 2026-09-27 (docs/standards/design/app-shell.md).
 *
 * Still local, and listed as Known drift: the review wizard (.wizard-dialog), a
 * full-screen stepped flow the shell has no equivalent for. */

/* The HTML `hidden` attribute has to win over a component's own display rule
   (.nzr-btn is inline-flex, .auth is flex), or a hidden button is on screen. */
a { color: var(--green); }
.block { width: 100%; }
.skip { position: fixed; top: -60px; left: 12px; z-index: 1000; padding: 10px 14px; border-radius: 0 0 12px 12px; background: var(--forest); color: #fff; }
.skip:focus { top: 0; }
.eyebrow { display: block; margin-bottom: 6px; font: 700 12px/1.4 var(--ff); letter-spacing: .13em; text-transform: uppercase; color: var(--green); }
.form-msg { min-height: 20px; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--nzr-status-error-text); }

/* ---------- the sign-in door ---------- */
.auth { display: flex; flex-direction: column; align-items: center; min-height: 100dvh; padding: 38px 20px; background: linear-gradient(145deg, var(--forest), var(--forest-deep)); }
/* No dock behind the door, so no room reserved for one. */
.nzr-app:has(.auth:not([hidden])) { padding-bottom: 0; }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 30px; color: #fff; text-decoration: none; }
.auth-brand img { width: 46px; height: 46px; object-fit: contain; }
.auth-brand span { font: 700 13px/1.3 var(--ff); letter-spacing: .12em; }
.auth-brand small { display: block; font: 500 12px/1.4 var(--fb); letter-spacing: 0; color: rgba(255, 255, 255, .72); }
.auth-card { width: min(100%, 430px); padding: clamp(24px, 5vw, 38px); border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--nzr-shell-shadow); }
.auth-card h1 { margin: 6px 0 4px; font-size: clamp(26px, 6vw, 32px); }
.auth-card > p { margin: 0 0 18px; font-size: 14px; color: var(--mute); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; margin-top: 4px; }
.auth-links button, .back-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--green); font: 600 13px/1.4 var(--fb); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.buy-link { display: block; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); font: 700 13px/1.5 var(--fb); }

/* ---------- header mode line, anchors under the sticky nav ---------- */
#headerMode { overflow-wrap: anywhere; }
[data-hh-section] { scroll-margin-top: 140px; }

/* ---------- panel internals ---------- */
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.property-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; font-size: 13px; color: var(--mute); }
.portfolio-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.portfolio-tools .nzr-field { flex: 1 1 220px; margin: 0; }
.portfolio-grid { display: grid; gap: 12px; }
.portfolio-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--nzr-shell-radius-control); background: #fff; }
.portfolio-card.selected { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); }
.portfolio-card.attention { border-left: 4px solid var(--nzr-status-warning-text); }
.portfolio-card h3 { font-size: 15px; line-height: 1.3; }
.card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 10px; }
.portfolio-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
.portfolio-card ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.portfolio-card li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.portfolio-card li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--nzr-status-warning-text); }
.portfolio-card .nzr-btn { margin-top: auto; align-self: flex-start; }
.standard-grid { display: grid; gap: 10px; }
.standard-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--nzr-shell-radius-control); }
.standard-item b { font: 700 14px/1.3 var(--ff); color: var(--forest); }
.standard-item small { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--mute); }
.related-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.related-row:first-child { padding-top: 0; border-top: 0; }
.related-row b { font: 700 14px/1.3 var(--ff); color: var(--forest); }
.related-row p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
.history-list { display: grid; gap: 10px; }
.history-card { padding: 14px; border: 1px solid var(--line); border-radius: var(--nzr-shell-radius-control); background: #fff; }
.history-card.draft { border-style: dashed; background: var(--mint); }
.history-card b { font: 700 14px/1.3 var(--ff); color: var(--forest); }
.history-card p { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
.history-card .due { color: var(--nzr-status-warning-text); }
.history-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.history-empty { margin: 0 0 12px; font-size: 14px; color: var(--mute); }

/* ---------- first run ---------- */
.empty { margin-bottom: 24px; text-align: center; }
.empty h2 { margin-bottom: 8px; font-size: 22px; }
.empty > p { max-width: 560px; margin: 0 auto 20px; }
.first-run { display: grid; gap: 10px; max-width: 660px; margin: 0 auto 22px; padding: 0; list-style: none; counter-reset: first-run; text-align: left; }
.first-run li { counter-increment: first-run; padding: 14px; border: 1px solid var(--line); border-radius: var(--nzr-shell-radius-control); background: var(--mint); }
.first-run li::before { content: counter(first-run); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 50%; background: var(--forest); color: #fff; font: 700 12px var(--ff); }
.first-run b { display: block; font: 700 14px/1.3 var(--ff); color: var(--forest); }
.first-run span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--mute); }

/* ---------- guidance notices (also inside the wizard) ---------- */
.notice { display: grid; gap: 6px; margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: #fff; }
.notice b { font: 700 14px/1.4 var(--ff); color: var(--forest); }
.notice span { font-size: 14px; line-height: 1.55; color: var(--mute); }
.notice a { font-weight: 700; text-underline-offset: 2px; }
.notice.evidence-guide { border-left-color: var(--nzr-status-information-text); }
.notice.help { border-left-color: var(--forest); background: var(--mint); }

/* ---------- sheets: the shell's look on a native <dialog> ---------- */
.nzr-app dialog.nzr-sheet { margin: auto auto max(20px, env(safe-area-inset-bottom, 0px)); border: 0; max-width: min(430px, calc(100% - 40px)); }
.nzr-app dialog::backdrop { background: rgba(14, 44, 32, .45); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.sheet-head .nzr-sheet__title { margin-bottom: 0; }
.sheet-form > p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--mute); }
.icon-btn { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin: -6px -6px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--mute); cursor: pointer; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn.light { color: #fff; }
.helper { margin: 0; padding: 12px 14px; border-radius: var(--nzr-shell-radius-control); background: var(--mint); font-size: 13px; line-height: 1.55; color: var(--mute); }
.check { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font: 500 15px/1.5 var(--fb); color: var(--ink); }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--forest); }
.reminder-opt-in { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--nzr-shell-radius-control); background: var(--mint); }
.climate-suggestion { display: block; margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--mint); font: 500 13px/1.5 var(--fb); color: var(--mute); }
.climate-suggestion button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--green); font: 700 13px var(--fb); text-decoration: underline; cursor: pointer; }

/* ---------- the review wizard: a full-screen stepped flow, kept local ---------- */
.wizard-dialog { width: min(1120px, calc(100vw - 20px)); height: min(880px, calc(100dvh - 20px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; }
.wizard-dialog::backdrop { background: rgba(14, 44, 32, .72); backdrop-filter: blur(4px); }
.wizard { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; border-radius: 20px; background: var(--mint); overflow: hidden; }
.wizard-head { display: flex; justify-content: space-between; gap: 16px; padding: 18px clamp(18px, 3vw, 30px); background: var(--forest); color: #fff; }
.wizard-head h2 { margin: 4px 0; font-size: clamp(20px, 3vw, 24px); color: #fff; }
.wizard-head p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .72); }
.wizard-head .eyebrow { color: var(--accent); }
.step-nav { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #fff; overflow-x: auto; scrollbar-width: none; }
.step-nav::-webkit-scrollbar { display: none; }
.step-button { flex: none; min-height: 44px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 99px; background: #fff; color: var(--mute); font: 650 12px/1.4 var(--ff); white-space: nowrap; cursor: pointer; }
.step-button.active { border-color: var(--forest); background: var(--forest); color: #fff; }
.step-button.done { border-color: var(--accent); color: var(--green); }
.wizard-body { padding: clamp(18px, 3vw, 34px); overflow: auto; }
.wizard-content { max-width: 880px; margin: auto; }
.wizard-content > h3 { margin: 6px 0; font-size: clamp(22px, 3vw, 26px); }
.wizard-content h4 { margin: 18px 0 6px; font-size: 16px; }
.wizard-content > p { font-size: 14px; line-height: 1.6; color: var(--mute); }
.requirement { margin: 18px 0; padding: 13px 15px; border-left: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: #fff; font-size: 14px; line-height: 1.55; color: var(--mute); }
.requirement b { color: var(--forest); }
.field-grid { display: grid; gap: 0 16px; }
.field { display: block; margin: 0 0 16px; font: 600 13px/1.4 var(--fb); color: var(--ink); }
.field input, .field select, .field textarea { margin-top: 6px; font-weight: 400; }
.field small { display: block; margin-top: 6px; font: 400 12px/1.5 var(--fb); color: var(--mute); }
.status-row { display: grid; gap: 12px; margin: 16px 0; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.review-check { display: flex !important; align-items: center; gap: 10px; min-height: 44px; margin: 0 !important; font-weight: 500; }
.review-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--forest); }
.evidence-box { margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.evidence-head { display: flex; flex-direction: column; gap: 10px; }
.evidence-head h4 { margin: 0 0 4px; font: 700 15px/1.3 var(--ff); color: var(--forest); }
.evidence-help, .evidence-empty { display: block; font-size: 13px; line-height: 1.5; color: var(--mute); }
.upload-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.upload-label { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--forest); font: 700 12.5px/20px var(--ff); cursor: pointer; }
.upload-label input { display: none; }
.upload-label.camera { border-color: var(--forest); background: var(--forest); color: #fff; }
.evidence-list { display: grid; gap: 8px; margin-top: 12px; }
.evidence-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--mint); font-size: 13px; line-height: 1.5; }
.evidence-item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.evidence-item button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--green); font: 700 13px var(--fb); text-decoration: underline; cursor: pointer; }
.action-dates { display: flex; gap: 8px; margin-top: 6px; }
.source-link { font-size: 13px; color: var(--green); text-decoration: underline; }
.wizard-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); background: #fff; }
.wizard-foot > span { font-size: 12px; color: var(--mute); }
.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.review-tile { padding: 12px 10px; border: 1px solid var(--line); border-radius: var(--nzr-shell-radius-control); background: #fff; text-align: center; }
.review-tile b { display: block; margin-bottom: 8px; font: 700 12px/1.3 var(--ff); color: var(--forest); }
.declare { margin-top: 20px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.declare p { font-size: 13px; line-height: 1.55; color: var(--mute); }
.declare label { display: block; margin: 12px 0 0; font: 600 13px/1.4 var(--fb); color: var(--ink); }
.declare input[type=text] { margin-top: 6px; font-weight: 400; }
.declare .confirm { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 500; }
.declare .confirm input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--forest); }
.rule-profile { display: grid; gap: 9px; margin: 18px 0; }
.rule-card { padding: 13px; border: 1px solid var(--line); border-radius: var(--nzr-shell-radius-control); background: #fff; }
.rule-card h4 { margin: 0 0 6px; font: 700 14px/1.3 var(--ff); color: var(--forest); }
.rule-card p { margin: 4px 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
.rule-boundary { margin: 0 0 16px; padding: 11px 13px; border-left: 4px solid var(--nzr-status-warning-text); border-radius: 0 10px 10px 0; background: var(--nzr-status-warning-surface); font-size: 13px; line-height: 1.5; color: var(--mute); }
.maintenance-updates { margin: 26px 0; padding-top: 24px; border-top: 1px solid var(--line); }
.maintenance-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.maintenance-head h4 { margin: 6px 0; font: 700 17px/1.3 var(--ff); color: var(--forest); }
.maintenance-head p { max-width: 66ch; margin: 0; font-size: 14px; line-height: 1.55; color: var(--mute); }
.maintenance-card { margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.maintenance-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.maintenance-card-head h4 { margin: 4px 0; font: 700 15px/1.3 var(--ff); color: var(--forest); }
.maintenance-sections { margin: 10px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: var(--nzr-shell-radius-control); }
.maintenance-sections legend { padding: 0 5px; font: 700 13px var(--ff); color: var(--forest); }
.maintenance-sections label { display: flex; align-items: flex-start; gap: 8px; min-height: 44px; margin: 0; font-size: 13px; line-height: 1.5; color: var(--mute); }
.maintenance-sections input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--forest); }
.maintenance-empty { margin-top: 14px; padding: 15px; border: 1px dashed var(--line); border-radius: var(--nzr-shell-radius-control); background: var(--mint); }
.maintenance-empty b { display: block; font: 700 14px/1.3 var(--ff); color: var(--forest); }
.maintenance-empty span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--mute); }

/* ---------- the phone: one section at a time, where the shell shows the dock ---------- */
@media (max-width: 700px) {
  .nzr-app[data-hh-tab="portfolio"] [data-hh-section]:not([data-hh-section~="portfolio"]),
  .nzr-app[data-hh-tab="property"] [data-hh-section]:not([data-hh-section~="property"]),
  .nzr-app[data-hh-tab="editions"] [data-hh-section]:not([data-hh-section~="editions"]),
  .nzr-app[data-hh-tab="guidance"] [data-hh-section]:not([data-hh-section~="guidance"]),
  .nzr-app[data-hh-tab="account"] [data-hh-section]:not([data-hh-section~="account"]) { display: none; }
  .wizard-dialog { width: 100vw; height: 100dvh; }
  .wizard { border-radius: 0; }
  .wizard-foot > span { display: none; }
}

/* ---------- the desk ---------- */
@media (min-width: 701px) {
  .nzr-app dialog.nzr-sheet { margin: auto; }
  .portfolio-grid, .standard-grid, .status-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first-run { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .field-grid .wide { grid-column: 1 / -1; }
  .review-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .evidence-head, .maintenance-head { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

/* A toast raised while a sheet or the wizard is open is hosted inside that
   dialog (app.js toastHost) so it paints in the top layer, and sits at the top
   of the screen so it never covers the dialog's action row at the bottom. */
dialog[open] > .nzr-toasts { top: max(16px, env(safe-area-inset-top, 0px)); bottom: auto; }
.fine-print { font-size: 13px; line-height: 1.55; color: var(--mute); }