@layer components {
  /* The list.
   *
   * One table, on a .screen — see screen.css and properties/index for why. The
   * surface, the cells, the header tint and the sticky header all come from
   * .table in the markup. What is here is only what belongs to a property.
   */
  .property-table {
    /* The floor under the name column, so a property called Luxury Copper Road
       is not squeezed onto four lines by the columns beside it. A floor and not
       `inline-size: 100%`: a percentage width and a max-content minimum resolve
       against each other and the table comes out absurdly wide. */
    --property-table-name-width: 14rem;

    /* The line under a status saying why the channels refused it: long enough
       to read as a sentence, short enough not to push Actions off the card. */
    --property-table-refusal-width: 22rem;

    th:first-child,
    td:first-child {
      min-inline-size: var(--property-table-name-width);
    }
  }

  /* Where it is, quietly: it helps tell two properties apart and is never what
     somebody came to read. */
  .property-row__location {
    color: var(--color-ink-soft);
    font-size: var(--text-normal);
  }

  /* Why a property isn't running, under its status. Quiet, like the location:
     the badge says where it stands, and this is for whoever goes to fix it. */
  .property-row__refusal {
    margin-block-start: var(--space-quarter);
    max-inline-size: var(--property-table-refusal-width);
    white-space: normal;
  }

  /* Columns leave in the order they can be spared, at the app's own two bands.
   *
   * The table has no answer for a narrow screen yet — that is a stacked variant
   * of .table — so this is the small answer. What it costs, said out loud:
   * below the wide band the location goes, and below the small band so do the
   * bedrooms and the guests. What is left is the two things a phone is for —
   * which property, and is it on. */
  @media (width < 60rem) {
    .property-row__location {
      display: none;
    }
  }

  @media (width < 40rem) {
    .property-row__capacity {
      display: none;
    }
  }
}