/* Homebuilder frame — Costs table, its drill-down and commitment sheet, and
   the Cost report tab. Desktop: a six-column table with a totals row; a cost
   code opens in place to show its lines. Phone (narrow pane): each cost code
   becomes a card with a 2 x 3 grid of figures, same markup. */

.hm-costs { display: grid; gap: 12px; }
.hm-costs .hm-banner { margin: 0; }
.hm-cost-tiles { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.hm-cost-tiles .hm-tile { padding: 10px 12px; }
.hm-cost-tiles .hm-tile > b { font-size: 17px; }

.hm-cost-table th[scope="row"] { min-width: 170px; }
.hm-cost-table th, .hm-cost-table td { padding: 10px 12px; }
.hm-cost-toggle { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 32px; padding: 0; font: inherit; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
.hm-cost-caret { width: 16px; height: 16px; color: var(--hm-faint); transition: transform var(--motion-fast); }
.hm-cost-row.is-open .hm-cost-caret { transform: rotate(90deg); color: var(--app-accent); }
.hm-cost-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-weight: 600; color: var(--hm-ink); }
.hm-cost-code { font-size: 12px; font-weight: 600; color: var(--hm-muted); font-variant-numeric: tabular-nums; }
.hm-cost-used { display: block; max-width: 180px; margin: 6px 0 2px 22px; }
.hm-cost-used .hm-progress { height: 4px; }
.hm-cost-row.is-over .hm-cost-used .hm-progress > span { background: var(--app-danger); }
.hm-cost-row:hover > * { background: var(--app-surface-2); }
.hm-cost-row.is-open > * { background: var(--app-accent-soft); border-bottom-color: transparent; }
.hm-cost-row.is-uncoded .hm-cost-name { font-style: italic; color: var(--hm-muted); }
.hm-cost-table td.is-over { font-weight: 700; color: var(--app-danger); }
.hm-cost-total > * { font-weight: 700; color: var(--hm-ink); background: var(--app-surface-2); border-top: 2px solid var(--hm-line-strong); border-bottom: 0; }

.hm-cost-detail > td { padding: 0 12px 14px 32px; background: var(--app-accent-soft); }
.hm-cost-detail-body { padding: 12px 14px; background: var(--app-surface); border: 1px solid var(--hm-line); border-radius: 10px; }
.hm-cost-blocks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }
.hm-cost-block h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hm-muted); }
.hm-cost-block ul { margin: 0; padding: 0; list-style: none; }
.hm-cost-block li { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--app-surface-3); }
.hm-cost-block li:last-child { border-bottom: 0; }
.hm-cost-block li.is-void { color: var(--hm-faint); text-decoration: line-through; }
.hm-cost-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; color: var(--hm-text); overflow-wrap: anywhere; }
.hm-cost-line small { color: var(--hm-muted); }
.hm-cost-block .num { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-cost-block .hm-muted-line { font-size: 13px; }

/* Sub-lines under a figure: change orders in Budget, email in Committed. */
.hm-cost-sub { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--hm-muted); white-space: normal; }
.hm-cost-sub.is-detected { color: var(--hm-faint); font-style: italic; }
.hm-cost-sub.is-unreviewed { color: var(--app-warn); font-weight: 600; }
.hm-cost-tiles .hm-tile > small { font-size: 11.5px; line-height: 1.3; }
.hm-costs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hm-costs-mode { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--hm-muted); }
.hm-costs-mode .hm-ic { flex: none; width: 15px; height: 15px; }

/* Drill-down: commitments with their source, detections, actions. */
.hm-cost-block h4 .hm-cost-add { margin-left: auto; min-height: 28px; padding: 2px 8px; font-size: 12px; letter-spacing: 0; text-transform: none; }
.hm-cost-block li.hm-cmt, .hm-cost-block li.hm-det { align-items: flex-start; }
.hm-cmt .hm-cost-line, .hm-det .hm-cost-line { display: grid; gap: 3px; }
.hm-cmt-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.hm-cmt-main b { font-weight: 600; color: var(--hm-ink); }
.hm-cmt-src { display: block; line-height: 1.45; }
.hm-cmt-src .hm-ic { display: inline-block; width: 13px; height: 13px; margin-right: 4px; vertical-align: -2px; }
.hm-cmt-src a { color: var(--app-accent); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.hm-cmt-src a:hover { text-decoration: underline; }
.hm-cmt-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.hm-cmt-acts .hm-btn-sm { min-height: 30px; padding: 3px 9px; font-size: 12.5px; }
.hm-cmt.is-unreviewed { padding-left: 8px; margin-left: -8px; border-left: 2px solid var(--app-warn); }
.hm-cmt.is-void .hm-cmt-main b { text-decoration: line-through; }
.hm-lock-pill .hm-ic { width: 12px; height: 12px; }
.hm-det-head { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hm-faint); }
.hm-det-list li { color: var(--hm-muted); background: repeating-linear-gradient(135deg, transparent 0 8px, var(--app-surface-2) 8px 9px); }
.hm-det .hm-cmt-main b { font-weight: 550; color: var(--hm-muted); }
.hm-det .num { color: var(--hm-faint); font-style: italic; }
.hm-det-pill { color: var(--hm-muted); background: transparent; border: 1px dashed var(--hm-line-strong); }
.hm-cost-co-link { color: var(--app-accent); font-weight: 600; text-decoration: none; }
.hm-cost-co-link:hover { text-decoration: underline; }

/* Vendor typeahead (commitment sheet). */
.hm-vendor-field { position: relative; }
.hm-vendor-field > label span { font-size: 12.5px; font-weight: 650; color: var(--hm-muted); }
.hm-vendor-field > input { width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 15px; color: var(--hm-ink); background: var(--app-surface); border: 1px solid var(--hm-line-strong); border-radius: var(--radius-sm); outline: none; }
.hm-vendor-field > input:focus { border-color: var(--app-accent); box-shadow: 0 0 0 3px var(--app-accent-soft); }
.hm-vendor-list { position: absolute; left: 0; right: 0; top: 70px; z-index: 5; display: grid; max-height: 260px; overflow-y: auto; padding: 4px; background: var(--app-surface); border: 1px solid var(--hm-line-strong); border-radius: 10px; box-shadow: var(--shadow-2); }
.hm-vendor-list[hidden] { display: none; }
.hm-vendor-opt { display: grid; gap: 1px; min-height: 44px; padding: 7px 10px; font: inherit; text-align: left; color: var(--hm-ink); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.hm-vendor-opt small { font-size: 12px; color: var(--hm-muted); }
.hm-vendor-opt:hover, .hm-vendor-opt.is-active { background: var(--app-accent-soft); }

/* Cost report tab (homes-cost-report.js). */
.hm-report { display: grid; gap: 12px; }
.hm-report > .hm-banner { margin: 0; align-items: center; }
.hm-report .hm-section-head .hm-section-title { margin: 6px 0 0; }
.hm-report-table th[scope="row"] { min-width: 150px; }
.hm-report-table th, .hm-report-table td { padding: 10px 9px; font-size: 13.5px; }
.hm-report-table thead th { font-size: 11px; letter-spacing: .03em; white-space: normal; }
.hm-report-table .hm-cost-toggle { flex-wrap: wrap; }
.hm-report-table .hm-cost-toggle[disabled] { cursor: default; }
.hm-report-table .hm-cost-toggle[disabled] .hm-cost-caret { visibility: hidden; }
.hm-report-table td.hm-rep-minor { color: var(--hm-muted); }
.hm-rep-billcount { flex-basis: 100%; padding-left: 22px; font-size: 12px; font-weight: 500; color: var(--hm-faint); white-space: nowrap; }
.hm-rep-cosub { display: none; }
@container (min-width: 640px) and (max-width: 999px) {
  .hm-report-table .hm-rep-minor { display: none; }
  .hm-rep-cosub { display: block; }
}
.hm-rep-row:hover > * { background: var(--app-surface-2); }
.hm-rep-row.is-open > * { background: var(--app-accent-soft); border-bottom-color: transparent; }
.hm-rep-group.is-over td.is-over { font-weight: 700; color: var(--app-danger); }
.hm-rep-bills > td { padding: 0 12px 12px 32px; background: var(--app-accent-soft); }
.hm-rep-billlist { margin: 0; padding: 4px 14px; list-style: none; background: var(--app-surface); border: 1px solid var(--hm-line); border-radius: 10px; }
.hm-rep-billlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto 110px; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--app-surface-3); }
.hm-rep-billlist li:last-child { border-bottom: 0; }
.hm-rep-bill-main { display: grid; gap: 1px; min-width: 0; }
.hm-rep-bill-main b { font-weight: 600; color: var(--hm-ink); overflow-wrap: anywhere; }
.hm-rep-bill-main small, .hm-rep-bill-status small { color: var(--hm-muted); }
.hm-rep-bill-status { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hm-rep-bill-status small.is-paid { color: var(--app-ok); font-weight: 600; }
.hm-rep-billlist .num { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Narrow panes: rows become cards. Container query on the build pane
   (.hm-bd, homes-builds.css) so the same rule holds beside the list. */
@container (max-width: 639px) {
  .hm-cost-table thead { display: none; }
  .hm-cost-table, .hm-cost-table tbody, .hm-cost-table tfoot { display: block; }
  .hm-cost-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 14px; border-bottom: 1px solid var(--hm-line); }
  .hm-cost-table th, .hm-cost-table td { display: block; min-width: 0; padding: 0; border: 0; background: none !important; }
  .hm-cost-table th[scope="row"] { grid-column: 1 / -1; min-width: 0; }
  .hm-cost-table td.num { text-align: left; font-size: 14px; }
  .hm-cost-table td.num::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 650; letter-spacing: .03em; color: var(--hm-faint); text-transform: uppercase; }
  .hm-cost-used { max-width: none; margin-left: 22px; }
  .hm-cost-row.is-open { background: var(--app-accent-soft); border-bottom: 0; }
  .hm-cost-detail { display: block !important; padding: 0 10px 12px !important; background: var(--app-accent-soft); }
  .hm-cost-detail[hidden] { display: none !important; }
  .hm-cost-detail > td { display: block; padding: 0; }
  .hm-cost-blocks { grid-template-columns: 1fr; gap: 12px; }
  .hm-cost-total { background: var(--app-surface-2); border-top: 2px solid var(--hm-line-strong); }
  .hm-cost-total > * { border-top: 0 !important; }
  .hm-cost-sub { font-size: 11px; }
  .hm-report-table th[scope="row"] { min-width: 0; }
  .hm-rep-group { display: block; }
  .hm-rep-row.is-open { background: var(--app-accent-soft); border-bottom: 0; }
  .hm-rep-bills { display: block !important; padding: 0 10px 12px !important; background: var(--app-accent-soft); }
  .hm-rep-bills[hidden] { display: none !important; }
  .hm-rep-bills > td { display: block; padding: 0; }
  .hm-rep-billlist li { grid-template-columns: minmax(0, 1fr) auto; }
  .hm-rep-bill-status { grid-column: 1; grid-row: 2; }
  .hm-rep-billlist .num { grid-column: 2; grid-row: 1; }
  .hm-report > .hm-banner { flex-wrap: wrap; }
  .hm-report > .hm-banner > span { flex-basis: calc(100% - 40px); }
  .hm-report > .hm-banner > .hm-btn { margin: 4px 0 0 27px; }
}