/*
  Components from templates/components/. The Airbnb approach with Reloite's colors:
  raised surfaces, one action color (brand-action), weights 400-600, radius 8 for
  controls, 14 for cards, full for pills and badges, one shadow, hairline dividers.
*/

/* Buttons: 48px minimum touch target. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 48px;
  min-inline-size: 48px;
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background-color 120ms ease, transform 120ms ease;
}

.button:active {
  transform: scale(0.98);
}

.button--primary {
  background: var(--color-brand-action);
  color: var(--color-on-brand);
}

.button--primary:hover {
  background: var(--color-brand-strong);
}

.button--secondary {
  background: var(--color-surface-raised);
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.button--secondary:hover {
  background: var(--color-surface-sunken);
}

.button--text {
  padding-inline: var(--space-3);
  background: none;
  color: var(--color-brand-action);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.button--text:hover {
  background: var(--color-brand-soft);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-ink);
}

.icon-button:hover {
  background: var(--color-surface-sunken);
}

/* Form fields: 56px controls, the error in danger under the control. */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}

.form-field__label {
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-semibold);
}

.form-field__help {
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.form-field__control {
  inline-size: 100%;
  min-block-size: 56px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface-raised);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
}

.form-field__control:hover {
  border-color: var(--color-ink-muted);
}

.form-field__control:focus-visible {
  border-color: var(--color-brand-action);
}

.form-field--invalid .form-field__control {
  border-color: var(--color-danger);
}

.form-field__error {
  color: var(--color-danger);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-medium);
}

/* Error summary: above the form, receives focus after a failed submit. */
.error-summary {
  margin-block-end: var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--color-danger);
  border-inline-start-width: 4px;
  border-radius: var(--radius-control);
  background: var(--color-danger-soft);
}

.error-summary__title {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  color: var(--color-danger);
}

.error-summary__list {
  margin: var(--space-2) 0 0;
  padding-inline-start: var(--space-6);
}

.error-summary__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  color: var(--color-danger);
  font-weight: var(--font-weight-medium);
}

/* Toasts. */
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  padding-inline-end: var(--space-1);
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
  border-inline-start: 4px solid var(--color-brand-action);
}

.toast--error {
  border-inline-start-color: var(--color-danger);
}

.toast--success {
  border-inline-start-color: var(--color-success);
}

.toast__message {
  flex: 1;
  padding-block: var(--space-2);
  font-weight: var(--font-weight-medium);
}

.toast__dismiss {
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-ink-muted);
}

/* Cards. */
.card {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
}

.card__title {
  margin-block-end: var(--space-3);
}

/*
  Lists: cards on mobile, a table with hairline dividers from 1128px, from the same
  markup. The number of columns is set by the page with .list--columns-N.
*/
.list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.list-header {
  display: none;
}

.list-row {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
  position: relative;
}

.list-row__title-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
}

.list-row__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  border-radius: var(--radius-control);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.list-row__titles {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.list-row__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
}

.list-row__link {
  text-decoration: none;
}

/* The whole card is the link's touch target. */
.list-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.list-row__link:focus-visible {
  box-shadow: none;
}

.list-row__link:focus-visible::after {
  box-shadow: var(--shadow-focus-ring);
}

.list-row__subtitle {
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.list-row__cell {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.list-row__cell-label {
  color: var(--color-ink-muted);
}

@media (min-width: 1128px) {
  .list {
    gap: 0;
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
    overflow: hidden;
  }

  .list-header,
  .list-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(var(--list-cell-count, 2), minmax(0, 1fr));
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
  }

  .list--columns-1 { --list-cell-count: 1; }
  .list--columns-2 { --list-cell-count: 2; }
  .list--columns-3 { --list-cell-count: 3; }
  .list--columns-4 { --list-cell-count: 4; }

  .list-header {
    color: var(--color-ink-muted);
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    font-weight: var(--font-weight-semibold);
  }

  .list-row {
    min-block-size: 64px;
    border-block-start: 1px solid var(--color-line);
    border-radius: 0;
    box-shadow: none;
  }

  .list-row:hover {
    background: var(--color-surface);
  }

  .list-row__cell {
    display: block;
  }

  .list-row__cell-label {
    display: none;
  }
}

/* Status badges: soft background, strong text, fully rounded. */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  background: var(--color-surface-sunken);
  color: var(--color-ink-muted);
}

.status-badge--brand {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.status-badge--success {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.status-badge--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.status-badge--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.status-badge--accent {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

/* Empty state. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  text-align: center;
}

.empty-state__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.empty-state__description {
  max-inline-size: 36ch;
  color: var(--color-ink-muted);
}

/* Page header. */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.page-header__back {
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-full);
  color: var(--color-ink);
}

.page-header__titles {
  flex: 1;
  min-inline-size: 0;
}

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

.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Search pill: fully rounded, raised, the submit as a round brand-action button. */
.search-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 56px;
  padding-block: var(--space-1);
  padding-inline: var(--space-6) var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised);
}

.search-pill:focus-within {
  border-color: var(--color-brand-action);
}

.search-pill__input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 48px;
  border: 0;
  background: none;
  font-size: var(--font-size-body-lg);
}

.search-pill__input:focus-visible {
  box-shadow: none;
}

.search-pill__submit {
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  flex: none;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--color-brand-action);
  color: var(--color-on-brand);
}

/* Office switcher. */
.office-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
  margin-inline-start: auto;
}

.office-color-dot {
  inline-size: 12px;
  block-size: 12px;
  flex: none;
}

.office-switcher__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--font-weight-semibold);
}

.office-switcher__choices,
.sheet-menu {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.office-switcher__choice,
.sheet-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  min-block-size: 56px;
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--color-ink);
  font-size: var(--font-size-body-lg);
  text-align: start;
  text-decoration: none;
}

.office-switcher__choice:hover,
.sheet-menu__item:hover {
  background: var(--color-surface-sunken);
}

.office-switcher__choice[aria-current="true"],
.sheet-menu__item[aria-current="page"] {
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
  font-weight: var(--font-weight-semibold);
}

.office-switcher__current {
  margin-inline-start: auto;
  font-size: var(--font-size-caption);
  color: var(--color-brand-strong);
}

.logout-form {
  margin: 0;
}

/* Mobile bottom navigation: fixed, four items of at least 48x48. */
.bottom-navigation {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 30;
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background: var(--color-surface-raised);
  border-block-start: 1px solid var(--color-line);
}

.bottom-navigation__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.bottom-navigation__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  inline-size: 100%;
  min-block-size: 64px;
  border: 0;
  background: none;
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.bottom-navigation__item[aria-current="page"] {
  color: var(--color-brand-action);
  font-weight: var(--font-weight-semibold);
}

/* Header navigation (744px and up). */
.header-navigation__items {
  display: flex;
  justify-content: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-navigation__item,
.header-account__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 48px;
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.header-navigation__item:hover,
.header-account__item:hover {
  background: var(--color-surface-sunken);
  color: var(--color-ink);
}

.header-navigation__item[aria-current="page"],
.header-account__item[aria-current="page"] {
  color: var(--color-ink);
  font-weight: var(--font-weight-semibold);
  background: var(--color-surface-sunken);
}

@media (min-width: 744px) {
  .bottom-navigation {
    display: none;
  }

  .office-switcher {
    margin-inline-start: 0;
  }
}

@media (min-width: 744px) and (max-width: 1127px) {
  .header-account__item span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .header-account__item {
    padding-inline: var(--space-3);
  }
}

/* Bottom sheet: a modal dialog at the bottom on mobile, centered from 744px. */
.bottom-sheet {
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: 85vh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-start-start-radius: var(--radius-card);
  border-start-end-radius: var(--radius-card);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  box-shadow: var(--shadow-raised);
}

.bottom-sheet::backdrop {
  background: var(--color-ink);
  opacity: 0.4;
}

.bottom-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  padding-inline-end: var(--space-2);
  border-block-end: 1px solid var(--color-line);
}

.bottom-sheet__body {
  padding: var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 744px) {
  .bottom-sheet {
    max-inline-size: 480px;
    margin: auto;
    border-radius: var(--radius-card);
  }
}

/* Masked ID number with the reveal button. */
.masked-id-number {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.masked-id-number__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.masked-id-number__reveal {
  padding-inline: var(--space-2);
}

/* Staging banner: on top of every page in staging. */
.staging-banner {
  padding: var(--space-2) var(--space-4);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border-block-end: 1px solid var(--color-warning);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

/* Login: a single centred column, the form inside one card. */
.authentication-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-inline-size: 440px;
  margin-inline: auto;
  padding-block-start: var(--space-8);
}

.authentication-panel__title {
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-weight: var(--font-weight-semibold);
}

.authentication-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.authentication-form .button {
  inline-size: 100%;
}

/* Two-factor setup: the QR keeps its own white background (scanners need contrast). */
.authentication-panel__text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  margin-block-end: var(--space-4);
}

.two-factor-qr {
  display: flex;
  justify-content: center;
  margin-block-end: var(--space-4);
}

.two-factor-qr svg {
  max-inline-size: 100%;
  block-size: auto;
}

.two-factor-secret {
  margin-block-end: var(--space-6);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-body-lg);
  letter-spacing: 0.08em;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Office selection: a suspended office is listed but cannot be chosen. */
.office-switcher__choice:disabled {
  color: var(--color-ink-muted);
  cursor: not-allowed;
}

.office-switcher__choice:disabled:hover {
  background: none;
}

/* Team: one row per member or invitation, actions below on mobile and beside from 744px. */
.team-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-row {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-line);
}

.team-row:last-child {
  border-block-end: 0;
}

.team-row__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.team-row__name {
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.team-row__contact {
  color: var(--color-ink-muted);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  overflow-wrap: anywhere;
}

.team-row__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.team-row__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

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

@media (min-width: 744px) {
  .team-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* A secret link shown once, with its copy and share actions. */
.secret-link {
  margin-block-end: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-surface-sunken);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  overflow-wrap: anywhere;
  user-select: all;
}

.secret-link__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.secret-link__actions .button {
  inline-size: 100%;
}

/* Account page: one column of cards, readable width on desktop. */
.account-sections {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 720px;
}

.account-profile {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.account-profile__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.account-profile__item dt {
  color: var(--color-ink-muted);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
}

.account-profile__item dd {
  margin: 0;
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-body-lg);
  overflow-wrap: anywhere;
}

.account-note,
.account-status {
  margin-block-end: var(--space-4);
}

.account-note {
  color: var(--color-ink-muted);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
}

.account-bulk-action {
  margin-block-start: var(--space-4);
}

.theme-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.theme-choices .button[aria-pressed="true"] {
  border-color: var(--color-brand-action);
  color: var(--color-brand-action);
  font-weight: var(--font-weight-semibold);
}

/* Parties: list toolbar (search and filters), results, pagination. */
.list-toolbar {
  display: grid;
  /* minmax(0, …): the search input's intrinsic width must not widen the page at 360px. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-full);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
  text-decoration: none;
}

.filter-chip:hover {
  border-color: var(--color-ink-muted);
}

.filter-chip[aria-current="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-surface-raised);
}

/* Properties: the city filter beside the type chips. */
.filter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

.list-results__count {
  margin-block-end: var(--space-3);
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

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

/* Party detail: label / value pairs and contact numbers. */
.detail-sections {
  display: grid;
  gap: var(--space-4);
}

.party-status,
.property-status {
  margin-block-end: var(--space-4);
}

.detail-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.detail-list__item {
  display: grid;
  gap: var(--space-1);
}

.detail-list__item dt {
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.detail-list__item dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* A number kept in reading order (dir="ltr") still lines up with the labels. */
.detail-list__item dd[dir="ltr"] {
  text-align: end;
}

/* Property detail: unit counts, the add button, and the units list. */
.unit-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.unit-summary__item {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
}

.unit-summary__item dt {
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.unit-summary__item dd {
  margin: 0;
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-variant-numeric: tabular-nums;
}

.unit-actions {
  display: flex;
  margin-block-end: var(--space-4);
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-block-start: var(--space-3);
}

.contact-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-block-size: 48px;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--color-line);
}

.contact-list__item:last-child {
  border-block-end: 0;
}

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

.contact-list__value {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.party-actions,
.property-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Party form: cards stacked; contact rows. Nothing here clips (the calendar dropdown
   of the date fields hangs below its field on desktop). */
.party-form,
.property-form {
  display: grid;
  gap: var(--space-4);
}

.party-form__subheading {
  margin-block: var(--space-6) var(--space-3);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
}

.contact-rows {
  display: grid;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.contact-row {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  min-inline-size: 0;
}

.contact-row__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 48px;
  cursor: pointer;
}

.checkbox-field__control {
  inline-size: 24px;
  block-size: 24px;
  accent-color: var(--color-brand-action);
}

@media (min-width: 744px) {
  .list-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .contact-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .contact-row__footer {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1128px) {
  .detail-sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .detail-sections__full {
    grid-column: 1 / -1;
  }

  .unit-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Ownership: owner rows, the live total, unit targets, and the grouped summaries on the
   property and party pages. The total turns danger-coloured (and shows its hint) when it
   is not 100: ownership_editor.js toggles the modifier; the server renders it too. */
.ownership-editor {
  display: grid;
  gap: var(--space-3);
}

.ownership-rows {
  display: grid;
  gap: var(--space-3);
}

.ownership-row {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  min-inline-size: 0;
}

.ownership-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink);
}

.ownership-total__value {
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-variant-numeric: tabular-nums;
}

.ownership-total--invalid,
.ownership-total--invalid .ownership-total__value {
  color: var(--color-danger);
}

.ownership-total__hint[hidden] {
  display: none;
}

.ownership-target {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-block-end: var(--space-3);
}

.ownership-units {
  display: grid;
  gap: var(--space-3);
}

.ownership-units--invalid {
  padding: var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-control);
}

.ownership-floor {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.ownership-floor__title {
  padding: 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}

.ownership-groups {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ownership-group {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
}

.ownership-group p,
.ownership-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ownership-group__owner {
  display: inline-flex;
  align-items: center;
  min-block-size: 48px;
  min-inline-size: 48px;
  color: var(--color-brand-action);
}

.ownership-group__share {
  font-variant-numeric: tabular-nums;
}

.ownership-group__owners--none,
.ownership-group__units {
  color: var(--color-ink-muted);
}

@media (min-width: 744px) {
  .ownership-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
    align-items: start;
  }

  .ownership-row__remove {
    align-self: center;
  }
}

/* Invitation form: the party picker belongs to the client role only. Without :has
   support it simply stays visible (the server ignores it for other roles). */
@supports selector(:has(*)) {
  .invitation-form:not(:has(select[name="membership_role"] option[value="client"]:checked)) .invitation-form__party-field {
    display: none;
  }
}

/* Unit generator: the preview is one card per unit, grouped under its floor. */
.generated-alert {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-control);
  color: var(--color-danger);
}

.generated-summary {
  margin: 0 0 var(--space-4);
  font-weight: 600;
}

.generated-floor {
  margin-block-end: var(--space-5);
}

.generated-floor__title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-label);
  line-height: var(--line-height-label);
}

.generated-units {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.generated-unit {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  min-inline-size: 0;
}

.generated-unit--conflict {
  border-color: var(--color-danger);
}

.generated-unit--removed {
  opacity: 0.55;
}

.generated-unit--removed .generated-unit__number {
  text-decoration: line-through;
}

.generated-unit__number {
  font-size: var(--font-size-heading);
  line-height: var(--line-height-heading);
  font-variant-numeric: tabular-nums;
  text-align: start;
}

.generated-unit__controls {
  display: grid;
  gap: var(--space-2);
}

@media (min-width: 744px) {
  .generated-units {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1128px) {
  .generated-units {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Dashboard: one card per statistic; one column on mobile, two on tablet, four on desktop. */
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}

.dashboard-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.stat-card {
  padding: 0;
}

.stat-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  min-block-size: 96px;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  color: var(--color-ink);
  text-decoration: none;
}

.stat-tile__icon {
  grid-row: span 3;
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-full);
  background: var(--color-brand-soft);
  color: var(--color-brand-strong);
}

.stat-tile__label {
  color: var(--color-ink-muted);
  font-size: var(--font-size-label);
}

.stat-tile__value {
  font-size: var(--font-size-amount);
  font-weight: 700;
}

.stat-tile__note {
  color: var(--color-ink-muted);
  font-size: var(--font-size-caption);
}

@media (min-width: 744px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1128px) {
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}