@layer layout {

  /* Plain pages (houses, catalogue, users, account, changes), as opposed to the full-screen 3D views and the
     printable documentation and estimate: 80% of a wide screen; the whole width up to a laptop's (a tablet's,
     a narrow window's), where the margins would only take room from the cards. */
  .page {
    max-width: 80%;
    margin: 0 auto;
    padding: calc(24px + env(safe-area-inset-top)) 16px 32px;

    @media (width <= 1280px) {
      max-width: none;
    }
  }

  .page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* As tall as the filter (a line, 6px padding and a 1px border each side), with it or without: the head
       doesn't jump from page to page, or when the filter shows with the first house. */
    min-height: calc(1lh + 14px);
    margin-bottom: 16px;

    &>.button {
      flex: none;
      white-space: nowrap;
    }
  }

  /* Several buttons at the head's end (products/index: export, import, add). */
  .page__actions {
    display: flex;
    flex: none;
    gap: 8px;
    margin-left: auto;
  }

  .page__title {
    font-size: 20px;
    font-weight: 600;
  }

  /* Quick filter in the head, between the title and its button (houses/index). */
  /* Pushed to the head's end, with the buttons after it (products/index) right beside. */
  .page__filter {
    flex: 0 1 220px;
    min-width: 0;
    margin-left: auto;
    padding: calc(6px + var(--hairline-gap)) calc(10px + var(--hairline-gap));
    font: inherit;
    color: var(--color-ink);
    background: var(--color-surface-sunken);
    border: var(--hairline) solid var(--color-line);
    border-radius: 6px;

    &+.page__actions {
      margin-left: 0;
    }
  }

  .page__empty {
    color: var(--color-ink-muted);
  }

  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
  }
}

@layer components {
  .card {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: var(--hairline) solid var(--color-edge);
    border-radius: 8px;

    /* A table that opens or closes the card runs close to its edge: its rows carry their own spacing. So does one
       closing a form that fills the card (admin/houses/_team: the boxes picking its rows). */
    &:has(> .table-scroll:first-child, > form:only-child > .table-scroll:first-child) {
      padding-top: 5px;
    }

    &:has(> .table-scroll:last-child, > form:only-child > .table-scroll:last-child) {
      padding-bottom: 5px;
    }
  }

  .card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-ink);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .card__meta {
    font-size: 12px;
    color: var(--color-ink-muted);
  }

  /* The plain pages' foot (shared/_page_footer): small and quiet under the content, the links at the far end. */
  .page-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 32px;
    padding-top: 12px;
    font-size: 12px;
    color: var(--color-ink-muted);
    border-top: 1px solid var(--color-line);
  }

  .page-footer__dot,
  .page-footer__build {
    margin-inline: 4px;
  }

  .page-footer__build {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
  }

  .page-footer__end {
    display: flex;
    align-items: center;
    gap: 14px;

    & form {
      display: flex;
    }
  }

  .page-footer__link,
  button.page-footer__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;

    &:hover,
    &.is-current {
      color: var(--color-ink);
    }

    /* The menu's icons, at the foot's smaller size. */
    & .button__icon {
      width: 14px;
      height: 14px;
      margin: 0;
    }
  }
}