/* One surface per list section: the heading belongs to the page canvas;
 * only the rows share a rounded card. Keep this after the appearance layers
 * so a generic list style cannot put a second surface behind nested groups.
 */
.phone {
  --app-list-radius: var(--biz-radius-card, var(--modern-radius-md, 16px));
  --app-list-surface: var(--biz-surface, var(--modern-surface, var(--paper, #fff)));
  --app-list-border: var(--biz-card-line, var(--modern-border, var(--line, #111)));
  --app-list-shadow: var(--biz-shadow-card, 0 5px 16px rgb(20 30 43 / 4%));
  --app-list-section-gap: 48px;
  --app-list-heading-gap: var(--biz-space-2, 8px);
  --app-section-heading-height: 24px;
  --app-list-row-inset: var(--biz-space-4, 12px);
}

/* Collection wrappers and section headings never own a card. In particular,
 * contacts also carry .recipient-list for the existing search/scroll logic.
 */
.phone[data-app-theme] :is(
  .account-activity-list, .statement-transactions,
  .recipient-list.grouped-recipient-list,
  .event-group, .transaction-group, .recipient-group, .next-home-activity
) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.phone[data-app-theme] :is(
  .account-activity-list, .statement-transactions,
  .event-group, .transaction-group, .recipient-group, .next-home-activity
) {
  overflow: visible;
}
.phone[data-app-theme] :is(.recipient-group, .next-home-activity) { padding: 0; }

/* All flat row lists use the same card, including transfer destinations,
 * account and service pickers, settings and lists mounted by renderers.
 */
.phone[data-app-theme] :is(
  .row-list, .event-group > .event-list,
  .management-list, .cards-list, .detail-list, .attention-list,
  .recipient-list:not(.grouped-recipient-list), .recipient-group-destinations,
  .sheet-account-list, .business-row-list, .identifiers-list, .destination-sheet-details,
  .connected-list, .route-options, .service-picker, .transfer-help-list,
  .next-home-task-list, .next-home-activity-list, .next-connected-links,
  .next-more-group > div, .profile-menu-card, .profile-device-list
) {
  overflow: hidden;
  border: 1px solid var(--app-list-border);
  border-radius: var(--app-list-radius);
  background: var(--app-list-surface);
  box-shadow: var(--app-list-shadow);
}

/* Preserve the transfer screen's native inner scrollers and fixed search. */
.phone[data-app-theme] .transfer-screen.destination-list-mode :is(
  #recipient-list, #all-contacts-list
) {
  overflow-x: hidden;
  overflow-y: auto;
}
.phone[data-app-theme] .grouped-recipient-list { gap: var(--app-list-section-gap); }
.phone[data-app-theme] :is(.event-group, .transaction-group) { margin: 0; }
.phone[data-app-theme] :is(.event-group + .event-group, .transaction-group + .transaction-group) {
  margin-top: var(--app-list-section-gap);
}

/* Shared page rhythm: 48px before a section, a 24px heading row,
 * then 8px before its surface. Badges and links must not change that rhythm. */
.phone[data-app-theme] :is(
  .home-section, .accounts-subsection, .management-section,
  .service-list-section, .next-home-section, .next-destination-section,
  .next-more-group, .profile-section
) {
  margin-block-start: var(--app-list-section-gap);
}

.phone[data-app-theme] :is(
  .event-group > header, .transaction-group > header,
  .recipient-group-header, .section-header, .next-home-section-header,
  .service-list-section > header, .next-destination-section > header,
  .next-more-group > header, .profile-section > header
) {
  margin: 0 0 var(--app-list-heading-gap);
  min-height: var(--app-section-heading-height);
  box-sizing: border-box;
  align-items: center;
  align-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.phone[data-app-theme] :is(
  .section-header, .next-home-section-header, .service-list-section > header,
  .next-destination-section > header, .next-more-group > header,
  .profile-section > header
) h2 {
  margin-block: 0;
  line-height: 24px;
}

/* Header actions and counters follow the shared row height too. */
.phone[data-app-theme] :is(
  .section-header, .next-home-section-header, .service-list-section > header,
  .next-destination-section > header, .next-more-group > header,
  .profile-section > header
) > :is(button, b) {
  min-height: var(--app-section-heading-height);
  height: auto;
  padding-block: 0;
  line-height: 24px;
}
.phone[data-app-theme] :is(.recipient-heading, .contacts-summary) {
  margin-inline: 0;
  margin-bottom: var(--app-list-heading-gap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.phone[data-app-theme] .recipient-group-header {
  min-height: var(--app-section-heading-height);
  gap: var(--biz-space-3, 12px);
}
.phone[data-app-theme] .recipient-group-header > span:last-child {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 var(--app-list-heading-gap);
}

/* A row has no individual card corners. Selection and interaction fills
 * remain owned by the component, including matched contact results.
 */
.phone[data-app-theme] :is(
  .row-list, .management-list, .cards-list, .attention-list,
  .recipient-list:not(.grouped-recipient-list), .recipient-group-destinations,
  .sheet-account-list, .business-row-list, .identifiers-list,
  .connected-list, .route-options, .service-picker, .transfer-help-list,
  .next-home-task-list, .next-home-activity-list, .next-connected-links,
  .next-more-group > div, .profile-menu-card, .profile-device-list
) > :is(button, article) {
  border-radius: 0;
}

/* Home activity now has its padding on the rows, like the full activity
 * screen. The inset divider still starts at the text and ends 16px in.
 */
.phone[data-app-theme] .next-home-activity-list > button {
  padding-inline: var(--app-list-row-inset);
  --biz-divider-row-padding: var(--app-list-row-inset);
  --biz-divider-group-padding: 0px;
}

/* Empty search results must not leave a blank card or floating shadow. */
.phone[data-app-theme] :is(
  .row-list, .cards-list, .recipient-list, .recipient-group-destinations,
  .next-home-task-list, .next-home-activity-list
):empty { display: none; }

/* Contact initials use the same soft, borderless tiles as service icons. */
.phone[data-app-theme] .contact-avatar[data-avatar-tone="rose"] { --contact-ink: #a84057; --contact-soft: #fbeff2; --contact-night: #3c2630; --contact-bright: #f2a4b7; }
.phone[data-app-theme] .contact-avatar[data-avatar-tone="blue"] { --contact-ink: #3266a6; --contact-soft: #edf3fc; --contact-night: #233247; --contact-bright: #a3c7f5; }
.phone[data-app-theme] .contact-avatar[data-avatar-tone="teal"] { --contact-ink: #267566; --contact-soft: #eaf6f1; --contact-night: #203b35; --contact-bright: #8fd5c3; }
.phone[data-app-theme] .contact-avatar[data-avatar-tone="violet"] { --contact-ink: #7652a8; --contact-soft: #f3eefb; --contact-night: #332941; --contact-bright: #cdb2f5; }
.phone[data-app-theme] .contact-avatar[data-avatar-tone="amber"] { --contact-ink: #906017; --contact-soft: #fcf4e6; --contact-night: #3c3221; --contact-bright: #efca87; }
.phone[data-app-theme] .contact-avatar[data-avatar-tone="coral"] { --contact-ink: #ad5138; --contact-soft: #fcf0e9; --contact-night: #402c26; --contact-bright: #f2b19c; }
.phone[data-app-theme] :is(.recipient-group-header, .recipient-row) .avatar.contact-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--contact-ink);
  background: var(--contact-soft);
  box-shadow: none;
  font-size: 18px !important;
  line-height: 1;
}
.phone[data-app-theme] :is(.recipient-group-header, .recipient-row) strong {
  font-size: 16px !important;
  line-height: 1.6;
}
:where(html[data-color-scheme="dark"]) .phone[data-app-theme] :is(.recipient-group-header, .recipient-row) .avatar.contact-avatar {
  color: var(--contact-bright);
  background: var(--contact-night);
}