/* ==========================================================================
   AWCompany ApS — "Byg dit modulhus" visual configurator (Master Prompt #6)
   Scoped entirely to .hc-* — no bare element selectors, per CLAUDE.md's
   CSS-safety rule and Master Prompt #5.6 §41/§42.
   ========================================================================== */

.hc-layout{ display:grid; grid-template-columns: minmax(0,1fr) 360px; gap: var(--sp-4); align-items:start; }
@media (max-width: 1024px){ .hc-layout{ grid-template-columns: minmax(0,1fr); } }

/* ---- Preview + price rail (sticky on desktop, stacked on mobile) ------- */
.hc-rail{ position: sticky; top: calc(var(--sp-2) + 88px); display:flex; flex-direction:column; gap: var(--sp-3); }
@media (max-width: 1024px){ .hc-rail{ position: static; order:-1; } }

.hc-preview{
  background: var(--c-bg-alt); border:1px solid var(--c-line);
  padding: var(--sp-3); display:flex; flex-direction:column; gap:0.5rem;
}
.hc-preview__stage{ width:100%; aspect-ratio: 640 / 420; }
.hc-preview__stage svg{ width:100%; height:100%; display:block; }
.hc-preview__disclaimer{ font-size: var(--fs-label); color: var(--c-ink-faint); text-align:center; }

.hc-price{ background: var(--c-surface); border:1px solid var(--c-line); padding: var(--sp-3); }
.hc-price__label{ font-size: var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; color:var(--c-ink-faint); }
.hc-price__amount{ font-family: var(--f-display); font-weight:700; font-size: 2rem; color: var(--c-ink); margin: 0.15em 0 0.5em; }
.hc-price__amount.is-calculating{ color: var(--c-ink-faint); }
.hc-price__rows{ display:flex; flex-direction:column; gap:0.35rem; font-size: var(--fs-small); border-top:1px solid var(--c-line); padding-top:0.6rem; margin-top:0.2rem; }
.hc-price__row{ display:flex; justify-content:space-between; gap:1rem; color: var(--c-ink-soft); }
.hc-price__status{
  margin-top:0.75rem; padding:0.55em 0.8em; font-size: var(--fs-small);
  display:flex; align-items:center; gap:0.5em;
}
.hc-price__status.is-complete{ background:#e5f3ea; color:#1e6b3c; }
.hc-price__status.is-incomplete{ background:#fff4de; color:#8a6416; }
.hc-price__date{ font-size: var(--fs-label); color: var(--c-ink-faint); margin-top:0.5rem; }
.hc-price__actions{ display:flex; flex-direction:column; gap:0.5rem; margin-top: var(--sp-2); }
.hc-price__actions .btn{ width:100%; text-align:center; }

/* ---- Sticky compact mobile price bar (spec §81) ------------------------ */
.hc-mobile-bar{
  display:none; position: fixed; left:0; right:0; bottom:0; z-index: 20;
  background: var(--c-ink); color: var(--c-on-dark);
  padding: 0.75rem var(--sp-2); align-items:center; justify-content:space-between; gap:1rem;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
}
@media (max-width: 1024px){
  .hc-mobile-bar{ display:flex; }
  /* room for the fixed bar so it never covers the last step's controls or the footer */
  body{ padding-bottom: 68px; }
}
.hc-mobile-bar__price{ font-family: var(--f-display); font-weight:700; font-size:1.1rem; }
.hc-mobile-bar button{ background:var(--c-on-dark); color:var(--c-ink); border:none; padding:0.55em 1.1em; font-size:var(--fs-small); font-weight:600; cursor:pointer; }

/* ---- Steps -------------------------------------------------------------- */
.hc-steps{ display:flex; flex-direction:column; gap: var(--sp-4); }
.hc-step{ background: var(--c-surface); border:1px solid var(--c-line); padding: var(--sp-3); scroll-margin-top: 100px; }
.hc-step__head{ display:flex; align-items:baseline; gap:0.75rem; margin-bottom: var(--sp-2); }
.hc-step__index{ font-family: var(--f-display); font-size:1.1rem; color: var(--c-ink-faint); }
.hc-step__title{ font-size: var(--fs-h3); margin:0; }
.hc-step__hint{ font-size: var(--fs-small); color: var(--c-ink-faint); margin: -0.5rem 0 var(--sp-2); }

.hc-stepper{ display:flex; align-items:center; gap:0.4rem; overflow-x:auto; padding-bottom:0.4rem; margin-bottom: var(--sp-3); }
.hc-stepper__item{
  flex: 0 0 auto; font-size: var(--fs-label); letter-spacing:0.04em; white-space:nowrap;
  padding:0.4em 0.85em; border:1px solid var(--c-line); background:var(--c-bg-alt); color:var(--c-ink-faint);
  cursor:pointer; text-decoration:none;
}
.hc-stepper__item.is-active{ background: var(--c-ink); color: var(--c-on-dark); border-color:var(--c-ink); }
.hc-stepper__item.is-done{ border-color: var(--c-line-strong); color: var(--c-ink-soft); }

/* ---- Option cards (spec §45) -------------------------------------------- */
.hc-cards{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap:0.75rem; }
.hc-card{
  border:1px solid var(--c-line-strong); background: var(--c-bg); padding:0.9em 0.9em;
  cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:0.35rem;
  font-family: var(--f-body); color: var(--c-ink); transition: border-color 150ms var(--ease-premium), background 150ms var(--ease-premium);
}
.hc-card:hover{ border-color: var(--c-ink); }
.hc-card:focus-visible{ outline:2px solid var(--c-ink); outline-offset:2px; }
.hc-card.is-selected{ background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.hc-card__swatch{ width:100%; height:40px; border:1px solid rgba(0,0,0,0.15); }
.hc-card__title{ font-weight:600; font-size: var(--fs-small); }
.hc-card__meta{ font-size: var(--fs-label); color: var(--c-ink-faint); }
.hc-card.is-selected .hc-card__meta{ color: var(--c-on-dark-soft); }
.hc-card.is-disabled{ opacity:0.45; cursor:not-allowed; }
.hc-card__unavailable{ font-size: var(--fs-label); color:#8a2e2e; }
.hc-card.is-selected .hc-card__unavailable{ color:#f2b9b9; }

/* ---- Steppers (windows/doors count) ------------------------------------- */
.hc-counter{ display:inline-flex; align-items:center; gap:0.75rem; border:1px solid var(--c-line-strong); padding:0.3em 0.6em; }
.hc-counter button{ width:32px; height:32px; border:1px solid var(--c-line-strong); background:var(--c-surface); font-size:1.1rem; cursor:pointer; line-height:1; }
.hc-counter button:disabled{ opacity:0.35; cursor:not-allowed; }
.hc-counter__value{ min-width:1.5ch; text-align:center; font-family: var(--f-display); font-weight:600; }

/* ---- Summary table (spec §57/§58) --------------------------------------- */
.hc-summary-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:0.5rem 1.5rem; font-size: var(--fs-small); }
@media (max-width: 560px){ .hc-summary-grid{ grid-template-columns: 1fr; } }
.hc-summary-row{ display:flex; justify-content:space-between; gap:1rem; padding:0.4em 0; border-bottom:1px solid var(--c-line); }
.hc-summary-row span:first-child{ color: var(--c-ink-faint); }

.hc-bom-toggle{ margin-top: var(--sp-2); }
.hc-bom-list{ margin-top: var(--sp-2); border:1px solid var(--c-line); }
.hc-bom-row{ display:flex; justify-content:space-between; gap:1rem; padding:0.5em 0.85em; border-bottom:1px solid var(--c-line); font-size: var(--fs-small); }
.hc-bom-row:last-child{ border-bottom:none; }
.hc-bom-row__cat{ color: var(--c-ink-faint); font-size: var(--fs-label); text-transform:uppercase; letter-spacing:0.04em; }

.hc-missing-list{ margin-top: var(--sp-2); display:flex; flex-direction:column; gap:0.4rem; }
.hc-missing-row{ font-size: var(--fs-small); background:#fff4de; color:#8a6416; padding:0.5em 0.75em; }

/* ---- Contact / submit form ----------------------------------------------- */
.hc-status-line{ font-size: var(--fs-small); display:flex; align-items:center; gap:0.4em; margin-top:0.6rem; }
.hc-status-line[hidden]{ display:none; }

/* Touch targets — spec §82: no tiny controls */
.hc-card, .hc-counter button, .hc-stepper__item{ min-height: 44px; }

/* [hidden] must win over any class on the same element that sets its own
   `display` (.form-grid, .field, .hc-price__status all do) — otherwise the
   browser's UA [hidden]{display:none} loses to the more specific authored
   class rule and a "hidden" panel stays visible. Same fix already applied
   to .project-save-status/.reno-error elsewhere in this codebase. */
#hc-size-custom[hidden],
#hc-electrical-points-field[hidden],
.hc-price__status[hidden]{ display:none !important; }