@layer components {

  /* A house in the list (houses/_house): its floors' plans, name, facts. */
  .house-card {
    gap: 8px;
  }

  .house-card__plans {
    /* Not as wide as the plans side by side would like: they shrink to the card. */
    min-width: 0;
    display: flex;
    gap: 8px;
    height: 140px;
    padding: 8px;
    background: var(--color-surface-sunken);
    border-radius: 6px;
  }

  /* The captured 3D view (floor_designer/preview.js), transparent around the house. */
  .house-card__preview {
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: contain;
  }

  .house-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: var(--color-ink-muted);
    list-style: none;
  }

  /* Last change, and on the right the house's estimate and documentation. */
  .house-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .house-card__links {
    display: flex;
    gap: 12px;
  }

  .house-card__document {
    font-size: 12px;
    color: var(--color-ink-muted);
    white-space: nowrap;

    &:hover {
      color: var(--color-ink);
    }
  }

  /* A floor's plan from its data (houses/_snapshot), coloured like the designer. */
  .snapshot {
    flex: 1;
    min-width: 0;
    height: 100%;
  }

  .snapshot--empty {
    border: 1px dashed var(--color-line);
    border-radius: 4px;
  }

  .snapshot__wall {
    stroke: var(--color-wall);
    stroke-linecap: square;
  }

  .snapshot__area {
    --c: var(--color-floor-heating);
    fill: color-mix(in oklch, var(--c) 22%, transparent);
    stroke: var(--c);
    stroke-width: 30;
  }

  .snapshot__area--stairs {
    --c: var(--color-stairs);
  }

  .snapshot__item {
    --c: var(--color-ink);
    fill: var(--c);
  }

  .snapshot__item--radiator {
    --c: var(--color-radiator);
  }

  .snapshot__item--towel-rail {
    --c: var(--color-towel-rail);
  }

  .snapshot__item--boiler {
    --c: var(--color-boiler);
  }

  .snapshot__item--gas-heater {
    --c: var(--color-gas-heater);
  }

  .snapshot__item--electric-heater {
    --c: var(--color-electric-heater);
  }

  .snapshot__item--manifold {
    --c: var(--color-manifold);
  }

  .snapshot__item--water-source {
    --c: var(--color-water-cold);
  }

  .snapshot__item--sewer-outlet {
    --c: var(--color-sewer);
  }

  .snapshot__item--bath,
  .snapshot__item--shower,
  .snapshot__item--faucet,
  .snapshot__item--toilet,
  .snapshot__item--bidet {
    --c: var(--color-plumbing);
  }

  .snapshot__item--steam-oven,
  .snapshot__item--coffee-machine,
  .snapshot__item--ice-maker,
  .snapshot__item--dishwasher,
  .snapshot__item--washing-machine {
    --c: var(--color-appliance);
  }

  /* The climate's units and vents. */
  .snapshot__item--wall-unit {
    --c: var(--color-air-conditioner);
  }

  .snapshot__item--cassette {
    --c: var(--color-air-conditioner);
  }

  .snapshot__item--ducted-unit {
    --c: var(--color-air-conditioner);
  }

  .snapshot__item--outdoor-unit {
    --c: var(--color-air-conditioner);
  }

  .snapshot__item--recuperator {
    --c: var(--color-ventilation);
  }

  .snapshot__item--duct-fan {
    --c: var(--color-ventilation);
  }

  .snapshot__item--facade-grille {
    --c: var(--color-ventilation);
  }

  .snapshot__item--room-recuperator {
    --c: var(--color-ventilation);
  }

  .snapshot__item--supply-vent {
    --c: var(--color-air-supply);
  }

  .snapshot__item--extract-vent {
    --c: var(--color-air-extract);
  }
}