@layer components {

  /* A house in the list (houses/_house): its floors' plans, name, facts, foot — four rows shared with the cards
     beside it (subgrid), so a longer name or more facts in one card keep every card's links on one line. */
  .house-card {
    grid-row: span 4;
    grid-template-rows: subgrid;
    gap: 8px;
  }

  /* The picture, with what marks the house (archived) in its corner, over it rather than in a row of its own. */
  .house-card__picture {
    position: relative;
    display: grid;
    min-width: 0;
  }

  .house-card__badge {
    position: absolute;
    top: 6px;
    left: 6px;
    margin: 0; /* .badge's gap after a name inline */
  }

  .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: a lighter band across the card's bottom,
     out through its padding to its border (the same edge on top), rounded with the card's corners inside the border.
     It fills its subgrid row, so the bands line up from card to card, and its content sits at the bottom, the links
     on the last line of a change that wraps. */
  .house-card__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: last baseline;
    align-content: end;
    column-gap: 10px;
    margin: 0 -14px -12px;
    padding: 10px 14px 12px;
    background: color-mix(in oklch, var(--color-surface), var(--color-ink) 3%);
    border-top: var(--hairline) solid var(--color-edge);
    border-radius: 0 0 calc(8px - var(--hairline)) calc(8px - var(--hairline));
  }

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

  /* An archived house, shown with the archive: its picture faded, marked under its name. */
  .house-card--archived .house-card__plans {
    opacity: 0.45;
  }

  /* Putting it away (or back): a quiet icon after the links, as small as their text. */
  .house-card__archive-form {
    display: flex;
    align-self: center;
  }

  .house-card__archive {
    display: inline-flex;
    padding: 0;
    color: var(--color-ink-muted);
    background: none;
    border: 0;
    cursor: pointer;

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

    & .button__icon {
      width: 15px;
      height: 15px;
      margin: 0;
    }
  }

  .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--heat-pump {
    --c: var(--color-heat-pump);
  }

  .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,
  .snapshot__item--urinal {
    --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);
  }
}