/* House page only (requirements r6 §8.1, §13). The page sits in the calculator page's shell and
   the 3P canvas pages' frame (Pages/House.cshtml, calculator/house/page.js): site.css, then
   calculator-page.css (the calculator page's own sheet), then this file, which adds only what the
   House page has and a canvas page does not: the level navigator beside the drawing, the level
   and house-wide option panels, the status chips, the per-level takeoff tabs and the cost charts.
   It uses the calculator page's custom properties, so the light and dark themes carry over. */
.house-page { display:flex; flex-direction:column; gap:var(--block-gap, 18px); min-width:0; }
.house-workspace { min-width:0; }

/* The drawing head: Worked examples (where a calculator page puts its presets), then the house
   name, the units and the file actions. */
.house-head { flex-wrap:wrap; align-items:center; }
/* The shared canvas head puts its preset bar after the title (order 1) and aligns items to the
   bottom; the House head has no title, so Worked examples comes first and the items centre. */
.house-drawing > .house-head { align-items:center; }
.house-drawing > .house-head .preset-bar { order:0; }
.house-head .house-name, .house-head .house-units { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:.88rem; }
.house-head input[type="text"] { min-height:36px; max-width:16rem; padding:4px 10px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font:inherit; }
.house-head output { color:var(--ink); font-weight:600; }
.house-file-actions { display:inline-flex; flex-wrap:wrap; gap:8px; margin-left:auto; }
.house-file-actions button { min-height:36px; }
/* The worked-example description opens under the Worked examples bar, only on request. */
.house-examples { position:relative; }
.house-examples .preset-info:not([open]) .preset-info-body { display:none; }

.house-notes { margin:0; padding-left:1.2em; color:var(--muted); font-size:.85rem; }
.house-notes[hidden] { display:none; }
.house-alert { margin:0; padding:8px 12px; border:1px solid var(--line-strong); border-left:4px solid #b42318; border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); }
.house-alert[hidden] { display:none; }

/* The work area: the level navigator, the drawing, the level and house-wide options. */
.house-work { display:grid; grid-template-columns:minmax(140px, 11rem) minmax(0, 1fr) minmax(240px, 21rem); gap:14px; align-items:start; min-width:0; }
.house-navigator, .house-options, .house-canvas { min-width:0; }
.house-nav { display:flex; flex-direction:column; gap:6px; }
.house-level-tab { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 8px; min-height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.house-level-tab[aria-selected="true"] { border-color:var(--accent-strong); box-shadow:inset 3px 0 0 var(--accent-strong); }
.house-level-tab:focus-visible, .house-result-panel:focus-visible { outline:2px solid var(--accent-strong); outline-offset:2px; }
.house-chip { display:inline-block; padding:1px 8px; border:1px solid var(--line-strong); border-radius:999px; font-size:.75rem; font-weight:650; white-space:nowrap; color:var(--muted); }
.house-chip[data-chip="OK"] { border-color:#067647; color:#067647; }
.house-chip[data-chip="CHECK"] { border-color:#b54708; color:#b54708; }
.house-chip[data-chip="NOT VALID"], .house-chip[data-chip="Calculation failed"] { border-color:#b42318; color:#b42318; }
.house-canvas { min-width:0; min-height:480px; }
/* FloorCanvas house mode draws its own level buttons; the page's navigator is the one the
   reader uses (interface request: a mount option to omit them). */
.house-page:not(.house-in-canvas) .house-canvas .fc-house > nav { display:none; }
/* The canvas layout (a FloorCanvas with host forms): the drawing takes the full width; the level
   switcher, the options and the prices are in the canvas's own chrome and floating forms. */
.house-work.house-work-canvas { display:block; }
.house-in-canvas .house-canvas { min-height:560px; }
/* When FloorCanvas scrolls the canvas into view (to open a form), the site's sticky header must not
   cover its toolbar: scrolled elements stop below the header. */
.house-in-canvas .house-canvas, .house-in-canvas .house-canvas * { scroll-margin-top:96px; }
/* The calculator page's form rule (.template-workspace select: min-height 42px, tinted background)
   reached FloorCanvas's own toolbar selects (Grid, Units), making them taller than its 30 px
   buttons. FloorCanvas's controls keep their own size and surface. */
.house-page .house-canvas .fc-root select.fc-select { min-height:0; background-color:var(--fc-surface, #fff); }
.house-host-form { display:flex; flex-direction:column; gap:10px; min-width:0; color:var(--ink); font-size:.9rem; }
.house-host-form .house-form-title { margin:0; font-size:1rem; }
.house-host-form .house-source, .house-host-form .house-prices { margin:0; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.house-host-form .house-field input, .house-host-form .house-field select { width:100%; box-sizing:border-box; }
.house-host-form[data-house-form="prices"] { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); align-items:start; }
.house-host-form[data-house-form="prices"] > .house-form-title, .house-host-form[data-house-form="prices"] > .house-site-note { grid-column:1 / -1; }
.house-host-form .house-units { margin:0; color:var(--muted); }
/* The Prices section below the canvas (the calculator page's collapsible section, field groups and
   fields); the groups lay their fields out in as many columns as fit, one on a phone. */
.house-prices-section { margin-top:14px; }
.house-prices-section .house-prices-body { display:flex; flex-direction:column; gap:4px; }
.house-prices-section .field-group-fields { grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px 20px; }
.house-prices-section .house-field-note { font-size:.78rem; }
@media (max-width: 640px) { .house-prices-section .field-group-fields { grid-template-columns:minmax(0, 1fr); } }
/* The Floor framing purchase specifications: a compact table that scrolls sideways in the form. */
.house-host-form table.house-ffe-specs { width:auto; font-size:.82rem; }
.house-host-form table.house-ffe-specs th, .house-host-form table.house-ffe-specs td { padding:2px 4px; white-space:nowrap; vertical-align:middle; }
.house-host-form table.house-ffe-specs .house-cell-text { text-align:left; }
.house-host-form table.house-ffe-specs .house-cell-num { text-align:right; }
.house-host-form table.house-ffe-specs input { width:4.6em; min-width:0; max-width:none; min-height:30px; padding:2px 4px; box-sizing:border-box; font:inherit; }
.house-host-form table.house-ffe-specs td.house-cell-text input { width:5.6em; }
.house-host-form .house-spec-dollar { margin-right:3px; color:var(--muted); }
/* A price in an option form: "$" before the box, the per-unit text after it. */
.house-host-form .house-price-field .affix { display:flex; align-items:center; gap:6px; }
.house-host-form .house-price-field .affix input { flex:1 1 auto; min-width:0; }
.house-options { display:flex; flex-direction:column; gap:14px; min-width:0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.house-options h2 { margin:0; font-size:1rem; }
.house-option-group h3, .house-wide-options h3 { margin:8px 0 4px; font-size:.9rem; }
.house-field { display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.house-field input, .house-field select { min-height:34px; }
.house-field-note { color:#b42318; font-size:.82rem; }
.house-field-note:empty { display:none; }
.house-site { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0; font-size:.88rem; }
.house-site dd { margin:0; }
.house-placeholder { color:var(--muted); font-size:.88rem; }

/* The actions row (the canvas pages' cv-actions): Calculate, Cancel, the house status. */
.house-actions .house-status-wrap { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.88rem; }
.house-actions .house-reasons { flex:1 1 100%; margin:0; color:var(--muted); font-size:.85rem; }
.house-actions .house-reasons:empty { display:none; }

/* The results (the canvas pages' cv-results). */
.house-results { display:flex; flex-direction:column; gap:14px; min-width:0; }
.house-results .results-head h2 { margin:0; }
.house-banner[hidden] { display:none; }
.house-total { display:flex; flex-direction:column; gap:14px; min-width:0; }
.house-total > h3 { margin:0; font-size:1rem; }
.house-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; }
.house-charts { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; }
.house-chart-plot { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.house-chart-row { display:grid; grid-template-columns:minmax(4.5rem, 9.5rem) minmax(0, 1fr) auto; align-items:center; gap:10px; font-size:.8rem; }
.house-chart-label { color:var(--muted); text-align:right; overflow-wrap:anywhere; }
.house-chart-track { display:block; min-width:0; }
.house-chart-bar { display:block; height:14px; border-radius:4px; background:var(--accent); }
.house-chart-value { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.house-results .cv-table-scroll { overflow-x:auto; max-width:100%; }
.house-results .grid-out { width:100%; }
.house-results .grid-out .house-cell-text { text-align:left; }
.house-results .grid-out .house-cell-num { text-align:right; }
.house-results .grid-out tbody th { color:var(--ink); font-weight:600; }
.house-results .grid-out td, .house-results .grid-out th { white-space:nowrap; }
.house-level-cards { grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); }
.house-result-tabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--line); }
.house-result-panel { display:flex; flex-direction:column; gap:12px; min-width:0; }
.house-takeoff.result-envelope-stale { opacity:.75; }
.house-live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Beside the drawing, the option column (level options, house-wide options and the price panel) is
   capped to the window and scrolls on its own, so it never stretches the work area below the
   drawing; it stays in view while the page scrolls. */
@media (min-width: 901px) {
  .house-options { position:sticky; top:96px; max-height:calc(100vh - 112px); overflow-y:auto; overscroll-behavior:contain; }
}
@media (max-width: 900px) {
  .house-work { grid-template-columns:minmax(0, 1fr); }
  .house-nav { flex-direction:row; overflow-x:auto; }
  .house-level-tab { flex:0 0 auto; }
  .house-level-tab[aria-selected="true"] { box-shadow:inset 0 -3px 0 var(--accent-strong); }
  .house-canvas { min-height:380px; }
}
@media (max-width: 640px) {
  .house-file-actions { margin-left:0; }
  .house-head input[type="text"] { max-width:100%; }
  .house-charts { grid-template-columns:minmax(0, 1fr); }
  .house-chart-row { grid-template-columns:minmax(4.5rem, 7rem) minmax(0, 1fr) auto; gap:8px; }
  .house-in-canvas .house-canvas { min-height:440px; }
  /* The House drawing fills the phone; a Calculate bar pinned to the bottom would cover its lower
     edge and the canvas's own controls, so the bar sits in the flow under the drawing. */
  .house-page .house-actions.cv-actions { position:static; }
  .house-result-tabs { flex-wrap:nowrap; overflow-x:auto; }
  .house-result-tabs > * { flex:0 0 auto; }
}