/*
 * Refined component contract. Only semantic tokens from app-theme-tokens.css
 * are consumed here. Existing layout, content, SVG symbols and motion stay
 * owned by their original components. !important is limited to bridging the
 * older readability/form rules that already declare important typography.
 */
.phone.next-ui-theme.app-theme-refined {
  color: var(--biz-ink);
  background: var(--biz-canvas);
  font-family: var(--biz-font-regular);
  font-size: var(--biz-text-body);
  line-height: var(--biz-line-body);
}

/* Typography hierarchy, including text inserted by the existing renderers. */
.phone.app-theme-refined :is(small, dt) {
  line-height: var(--biz-line-caption);
}
.phone.app-theme-refined :is(p, li, dd, input, select, textarea) {
  line-height: var(--biz-line-body);
}
.phone.app-theme-refined :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--biz-font-semibold);
  letter-spacing: 0;
}
.phone.app-theme-refined :is(h1, h2, h3) { line-height: var(--biz-line-title); }
.phone.app-theme-refined h2 { line-height: var(--biz-line-body); }
.phone.app-theme-refined :is(strong, b) { font-family: var(--biz-font-semibold); }
.phone.app-theme-refined :is(button, label) { font-family: var(--biz-font-medium); }
.phone.app-theme-refined :is(.sensitive, .sensitive *, .hero-amount strong,
  .total-summary strong, .statement-summary strong, .account-detail-hero > div:last-child strong,
  .amount-entry input, .review-amount, .cashflow-forecast strong, .energy-hero strong,
  .account-amount, .transaction-list b, .event-value, .scf-money-flow b,
  .scf-quote-card dd, .scf-quote-card header strong, .invoice-total-card strong) {
  letter-spacing: 0 !important;
  font-variant-numeric: proportional-nums;
  font-feature-settings: "tnum" 0, "pnum" 1;
  font-kerning: normal;
}
.phone.app-theme-refined :is(.next-home-balance > div strong, .hero-amount strong,
  .total-summary strong, .statement-summary strong, .account-detail-hero > div:last-child strong,
  .amount-entry input, .review-amount) {
  font-size: var(--biz-text-display) !important;
  line-height: var(--biz-line-display);
  color: var(--biz-ink);
}
.phone.app-theme-refined :is(.next-home-scf-card > div strong, .scf-home-copy strong) {
  font-size: 20px !important;
  line-height: 28px;
}
.phone.app-theme-refined :is(.next-home-cashflow-summary-main strong, .cashflow-detail-summary strong) {
  font-size: var(--biz-text-title) !important;
  line-height: var(--biz-line-title);
  color: var(--biz-ink);
}
.phone.app-theme-refined :is(.next-home-cashflow-summary-main > b,
  .next-home-cashflow-summary-metrics strong, .next-home-account-actions strong) {
  font-size: var(--biz-text-caption) !important;
  line-height: var(--biz-line-caption);
}
.phone.next-ui-theme.app-theme-refined #amount-input {
  font-size: var(--biz-text-display) !important;
  line-height: var(--biz-line-display);
}

/* App frame and vertical rhythm. No change to navigation/state ownership. */
.phone.app-theme-refined :is(.app-shell, .screen-stack, .app-screen, .login-screen) {
  background: var(--biz-canvas);
}
.phone.next-ui-theme.app-theme-refined .app-header {
  height: 80px;
  padding: var(--biz-space-4) var(--biz-page-gutter);
  gap: var(--biz-space-2);
  background: var(--biz-canvas);
  border-bottom-color: transparent;
  box-shadow: none;
}
.phone.app-theme-refined .app-header.has-scrolled-content { border-bottom-color: var(--biz-line); }
.phone.app-theme-refined .profile { gap: var(--biz-space-2); min-height: var(--biz-touch); }
.phone.app-theme-refined .profile > div { min-width: 0; }
.phone.app-theme-refined .profile > div > strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone.app-theme-refined .profile > span {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  color: var(--biz-icon);
  background: var(--biz-surface-soft);
  box-shadow: none;
}
.phone.app-theme-refined .header-actions { gap: var(--biz-space-1); }
.phone.app-theme-refined .header-actions button {
  width: var(--biz-touch);
  height: var(--biz-touch);
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  color: var(--biz-icon);
  background: var(--biz-surface);
  box-shadow: var(--biz-shadow-card);
}
.phone.next-ui-theme.app-theme-refined .app-screen {
  padding-top: var(--biz-space-4);
  padding-inline: var(--biz-page-gutter);
  scroll-padding-top: var(--biz-space-4);
}
.phone.app-theme-refined :is(.home-section, .accounts-subsection, .management-section,
  .service-list-section, .next-home-section, .next-destination-section, .next-more-group) {
  margin-top: var(--biz-section-gap);
}
.phone.app-theme-refined :is(.page-heading, .page-intro, .next-page-intro) {
  margin-block: var(--biz-space-4) var(--biz-space-6);
}
.phone.app-theme-refined :is(.section-header, .next-home-section-header,
  .service-list-section > header, .next-destination-section > header, .next-more-group > header) {
  margin-bottom: var(--biz-space-2);
  gap: var(--biz-space-2);
}
.phone.app-theme-refined :is(.section-header, .next-home-section-header) > button {
  min-height: var(--biz-touch);
  min-width: var(--biz-touch);
  flex-shrink: 0;
  color: var(--biz-icon);
  font-size: var(--biz-text-caption) !important;
}
.phone.app-theme-refined .focused-header { min-height: var(--biz-touch); margin-bottom: var(--biz-space-4); }
.phone.app-theme-refined .focused-header > button { min-height: var(--biz-touch); }
.phone.app-theme-refined :is(.next-home-title-row .next-home-info-button,
  .next-home-promo-dismiss, .transfer-header > button) {
  width: var(--biz-touch);
  height: var(--biz-touch);
  min-height: var(--biz-touch);
  flex-shrink: 0;
}
.phone.app-theme-refined .next-home-title-row {
  position: relative;
  align-self: flex-start;
  max-width: 100%;
  padding-inline-end: calc(var(--biz-touch) + var(--biz-space-1));
  gap: var(--biz-space-1);
}
.phone.app-theme-refined .next-home-title-row .next-home-info-button {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  flex: 0 0 var(--biz-touch);
  min-width: var(--biz-touch);
  border: 0 !important;
  color: var(--biz-muted);
  background: radial-gradient(circle, var(--biz-surface-soft) 12px, transparent 13px) !important;
}
.phone.next-ui-theme.app-theme-refined #screen-card-detail .card-number-actions button {
  min-height: var(--biz-touch);
}

/* Shared surfaces: cards, row groups and action tiles use the same palette. */
.phone.app-theme-refined :is(.next-home-account, .next-home-activity,
  .next-home-task-list, .next-home-scf-card, .next-home-cashflow-summary,
  .next-home-tool-grid > button, .next-home-feature-list > button,
  .next-payment-primary, .next-payment-upcoming, .next-business-summary,
  .next-business-destination-grid > button, .next-business-scf-entry,
  .next-connected-links, .next-more-group > div, .total-summary,
  .account-detail-hero, .statement-summary, .wide-account-switch,
  .selected-recipient, .smart-route, .transfer-details-switch, .security-banner,
  .first-transfer-guide, .health-service-grid > button, .health-recommendation,
  .health-my-care, .cashflow-detail-summary, .cashflow-calculation, .energy-hero,
  .energy-meter, .energy-auto-pay, .expense-status-grid > article,
  .receive-identity-card, .receive-choice-note, .receive-iban-card, .receive-use-case,
  .invoice-state-hero, .invoice-party-card, .invoice-document, .invoice-total-card,
  .invoice-link-card, .invoice-payment-receipt, .scf-status-card, .scf-quote-card,
  .scf-eligibility-hero, .scf-funded-details, .cards-empty-state,
  .cards-pending-requests, .profile-hero) {
  border-color: var(--biz-card-line);
  border-radius: var(--biz-radius-card);
  color: var(--biz-ink);
  background: var(--biz-surface);
  box-shadow: var(--biz-shadow-card);
}
.phone.app-theme-refined :is(.receive-identity-card, .receive-iban-card,
  .energy-hero, .scf-eligibility-hero) :is(small, p, span) {
  color: var(--biz-muted);
}
.phone.app-theme-refined .energy-hero :is(strong, p b) { color: var(--biz-ink); }
.phone.app-theme-refined .energy-hero .energy-mark {
  color: var(--biz-icon);
  background: var(--biz-surface-soft);
}
.phone.app-theme-refined :is(.row-list, .management-list, .cards-list, .detail-list,
  .recipient-list, .business-row-list, .account-activity-list, .identifiers-list,
  .route-options, .destination-sheet-details) {
  border-color: var(--biz-card-line);
  border-radius: var(--biz-radius-card);
  background: var(--biz-surface);
  box-shadow: var(--biz-shadow-card);
}
.phone.app-theme-refined :is(.account-row, .card-list-row, .recipient-row,
  .event-row, .management-list > button, .business-row-list > button) {
  min-height: 80px;
  padding-block: var(--biz-space-3);
  padding-inline: var(--biz-space-4);
  gap: var(--biz-space-3);
}
.phone.app-theme-refined :is(.account-icon, .round-symbol, .avatar, .management-icon,
  .row-symbol, .service-mark, .connector-icon, .next-home-feature-icon) {
  border-color: transparent;
  color: var(--biz-icon);
  background: var(--biz-surface-soft);
  box-shadow: none;
}

/* Main account. All four existing actions and all labels remain in place. */
.phone.app-theme-refined .next-home-account {
  padding: var(--biz-space-4) var(--biz-card-padding);
  box-shadow: var(--biz-shadow-account);
}
.phone.app-theme-refined .next-home-account > header {
  gap: var(--biz-space-2);
  align-items: center;
}
.phone.app-theme-refined .next-home-account > header > span { min-width: 0; }
.phone.app-theme-refined .next-home-account > header button {
  min-width: var(--biz-touch);
  min-height: var(--biz-touch);
  flex-shrink: 0;
  color: var(--biz-brand);
  font-size: var(--biz-text-caption) !important;
}
.phone.app-theme-refined .next-home-balance { margin-top: var(--biz-space-3); }
.phone.app-theme-refined .next-home-balance > div { margin-top: var(--biz-space-1); gap: var(--biz-space-2); }
.phone.app-theme-refined .next-home-balance > p { margin-top: var(--biz-space-1); }
.phone.app-theme-refined .next-home-account-actions {
  margin-top: var(--biz-space-4);
  padding-top: var(--biz-space-4);
  gap: var(--biz-space-2);
}
.phone.app-theme-refined .next-home-account-actions button { gap: var(--biz-space-2); }
.phone.app-theme-refined :is(.next-home-account-actions, .quick-actions) button > span {
  width: var(--biz-touch);
  height: var(--biz-touch);
  border: 0;
  border-radius: var(--biz-radius-control);
  color: var(--biz-icon);
  background: var(--biz-surface-soft);
}
.phone.app-theme-refined :is(.next-home-account-actions, .quick-actions) button:first-child > span {
  color: var(--biz-surface);
  background: var(--biz-brand);
}
.phone.app-theme-refined .next-home-account-actions svg { width: 20px; height: 20px; }
.phone.app-theme-refined :is(.next-home-scf-card, .next-home-cashflow-summary) {
  padding: var(--biz-card-padding);
}
.phone.app-theme-refined .next-home-scf-card > header { gap: var(--biz-space-3); }
.phone.app-theme-refined .next-home-scf-card > header > span {
  border-color: var(--biz-line);
  color: var(--biz-icon);
  background: var(--biz-surface-soft);
  letter-spacing: 0;
}
.phone.app-theme-refined .next-home-scf-card > div { margin-block: var(--biz-space-5); }
.phone.app-theme-refined .next-home-scf-card > div :is(small, span) { color: var(--biz-muted); }
.phone.app-theme-refined .next-home-scf-card > footer { padding-top: var(--biz-space-3); border-color: var(--biz-line); }
.phone.app-theme-refined .next-home-cashflow-summary-main > b {
  margin-top: var(--biz-space-2);
  padding: var(--biz-space-1) var(--biz-space-2);
  max-width: 100%;
  color: var(--biz-icon);
  background: var(--biz-surface-soft);
}
.phone.app-theme-refined .next-home-cashflow-summary-metrics {
  margin-top: var(--biz-space-4);
  padding-block: var(--biz-space-3);
}
.phone.app-theme-refined .next-home-cashflow-summary-action {
  margin-top: var(--biz-space-3);
  flex-wrap: wrap;
  gap: var(--biz-space-2);
}
.phone.app-theme-refined .next-home-tool-grid { gap: var(--biz-space-3); }
.phone.app-theme-refined .next-home-tool-grid > button {
  padding: var(--biz-space-4);
  min-height: 104px;
}
.phone.app-theme-refined .next-home-activity { padding: var(--biz-space-4); }
.phone.app-theme-refined .next-home-activity-list > button {
  min-height: 80px;
  padding-block: var(--biz-space-4);
  gap: var(--biz-space-2);
}
.phone.app-theme-refined .next-home-activity-list :is(strong, small) {
  white-space: normal;
  overflow-wrap: anywhere;
}
.phone.app-theme-refined .next-home-activity-list b {
  font-size: var(--biz-text-caption) !important;
  line-height: var(--biz-line-caption);
  white-space: normal;
  overflow-wrap: anywhere;
}
.phone.app-theme-refined .next-home-task-list > button { padding: var(--biz-space-4); gap: var(--biz-space-3); }
.phone.app-theme-refined .next-home-feature-list {
  width: calc(100% + var(--biz-page-gutter) * 2);
  margin-inline: calc(var(--biz-page-gutter) * -1);
  padding-inline: var(--biz-page-gutter);
  scroll-padding-inline: var(--biz-page-gutter);
  gap: var(--biz-space-3);
}
.phone.app-theme-refined .next-home-feature-list > button { padding: var(--biz-space-4); gap: var(--biz-space-3); }

/* Inputs and actions: soft fields still have a visible boundary and focus. */
.phone.app-theme-refined :is(.primary-button, .secondary-button) {
  min-height: var(--biz-action-height);
  padding-inline: var(--biz-space-5);
  border-radius: var(--biz-radius-control);
  box-shadow: none;
}
.phone.app-theme-refined .primary-button {
  background: var(--biz-brand);
  border-color: var(--biz-brand);
  color: var(--biz-surface);
}
.phone.app-theme-refined .secondary-button {
  background: var(--biz-surface);
  border-color: var(--biz-control-line);
  color: var(--biz-ink);
}
.phone.next-ui-theme.app-theme-refined :is(.field > div, .search-field,
  .returning-login-step .field > div) {
  min-height: var(--biz-field-height);
  border-color: var(--biz-control-line);
  border-radius: var(--biz-radius-control);
  background: var(--biz-surface);
  box-shadow: none;
}
.phone.app-theme-refined :is(.field input, .search-field input) { min-width: 0; }
/* Input typography is owned by app-ui-standards.css. */
.phone.app-theme-refined .field { margin-bottom: var(--biz-space-4); }
.phone.app-theme-refined .field > span { margin-bottom: var(--biz-space-2); }
.phone.app-theme-refined .transfer-amount-card {
  padding: var(--biz-card-padding);
  border-color: var(--biz-card-line);
  border-radius: var(--biz-radius-card);
  background: var(--biz-surface);
  box-shadow: var(--biz-shadow-card);
}
.phone.next-ui-theme.app-theme-refined .transfer-amount-card .amount-entry {
  min-height: 0;
  padding: var(--biz-space-6) 0 var(--biz-space-2);
}
.phone.app-theme-refined .amount-suggestions { margin-top: var(--biz-space-4); }
.phone.app-theme-refined .amount-suggestions > div {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 var(--biz-space-2);
  padding: 0;
  overflow: visible;
}
.phone.app-theme-refined .amount-suggestions button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--biz-chip-target);
  padding: 0 var(--biz-space-3);
  border: 0;
  border-radius: var(--biz-tag-radius);
  background: transparent;
  color: var(--biz-icon);
  flex-shrink: 0;
  font-size: var(--biz-text-caption) !important;
  line-height: var(--biz-line-caption);
  font-family: var(--biz-font-medium);
}
.phone.app-theme-refined .amount-suggestions button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: calc((var(--biz-chip-target) - var(--biz-chip-height)) / 2) 0;
  border: var(--biz-control-stroke) solid var(--biz-line);
  border-radius: var(--biz-tag-radius);
  background: var(--biz-surface-soft);
}
.phone.next-ui-theme.app-theme-refined .amount-suggestions button.active {
  color: var(--biz-surface);
  background: transparent;
}
.phone.app-theme-refined .amount-suggestions button.active::before {
  border-color: var(--biz-brand);
  background: var(--biz-brand);
}
.phone.app-theme-refined #amount-input { border-radius: var(--biz-space-2); }
.phone.app-theme-refined #transfer-source-switch {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--biz-space-2) var(--biz-space-3);
  padding: var(--biz-space-4) 0 0;
  margin-block: var(--biz-space-5) 0;
  border: 0;
  border-top: 1px solid var(--biz-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.phone.app-theme-refined #transfer-source-switch > span:first-child {
  grid-column: 1;
  min-width: 0;
  gap: var(--biz-space-1);
}
.phone.app-theme-refined #transfer-source-balance {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  color: var(--biz-muted);
}
.phone.app-theme-refined #transfer-source-switch > i {
  grid-column: 2;
  grid-row: 1;
  white-space: nowrap;
}
.phone.app-theme-refined #transfer-source-switch::before { content: none; }
.phone.app-theme-refined :is(.field > div > button, .login-topbar > button,
  .bottom-sheet > header > button, .identifiers-list button, .card-number-actions button,
  .control-grid button, .login-text-button, .login-inline-actions button) {
  min-height: var(--biz-touch);
  min-width: var(--biz-touch);
}
.phone.next-ui-theme.app-theme-refined button:focus-visible {
  outline: 2px solid var(--biz-focus) !important;
  outline-offset: 2px;
}
.phone.next-ui-theme.app-theme-refined :is(input, select, textarea):focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.phone.next-ui-theme.app-theme-refined :is(select, textarea):focus-visible {
  border-color: var(--biz-focus);
}
.phone.next-ui-theme.app-theme-refined :is(.field > div, .search-field):focus-within {
  border-color: var(--biz-focus);
  box-shadow: 0 0 0 3px var(--biz-selected);
}
.phone.next-ui-theme.app-theme-refined .amount-entry > div:focus-within {
  border-radius: var(--biz-radius-control);
  box-shadow: 0 0 0 2px var(--biz-selected);
}
.phone.app-theme-refined :is(.bottom-sheet, .card-auth-sheet, .biometric-offer-sheet) {
  border-color: var(--biz-line);
  border-radius: var(--biz-radius-sheet) var(--biz-radius-sheet) 0 0;
  background: var(--biz-surface);
  box-shadow: var(--biz-shadow-raised);
}
.phone.app-theme-refined .bottom-sheet { padding: var(--biz-space-6); }

/* Login and profile consume the same surfaces as the signed-in screens. */
.phone.next-ui-theme.app-theme-refined .login-step {
  padding-inline: var(--biz-page-gutter);
  background-color: var(--biz-canvas);
}
.phone.next-ui-theme.app-theme-refined .login-screen .returning-login-step {
  padding: var(--biz-space-6) var(--biz-page-gutter) calc(var(--biz-space-6) + env(safe-area-inset-bottom, 0px));
  background: var(--biz-canvas);
}
.phone.next-ui-theme.app-theme-refined .returning-login-step .customer-login-form {
  padding: var(--biz-card-padding);
  border-color: var(--biz-card-line);
  border-radius: var(--biz-radius-card);
  background: var(--biz-surface);
  box-shadow: var(--biz-shadow-card);
}
.phone.next-ui-theme.app-theme-refined .returning-login-step .login-welcome-copy h1 > .theme-next-only {
  font-family: var(--biz-font-semibold);
  font-size: var(--biz-text-title) !important;
  line-height: 36px;
  letter-spacing: 0;
}
.phone.next-ui-theme.app-theme-refined #return-to-biometric-login b {
  font-size: var(--biz-text-caption) !important;
}
.phone.next-ui-theme.app-theme-refined .returning-login-step #customer-login-submit {
  min-height: 52px;
  border-radius: var(--biz-radius-control);
  background: var(--biz-brand);
  box-shadow: none;
}
.phone.next-ui-theme.app-theme-refined .returning-login-step .new-account-entry {
  background: var(--biz-surface-soft);
  border-color: var(--biz-line);
  border-radius: var(--biz-radius-card);
}
.phone.app-theme-refined .profile-screen .focused-header { background: var(--biz-canvas); }
.phone.app-theme-refined .profile-avatar-large {
  background: var(--biz-surface-soft);
  border-color: var(--biz-surface);
  box-shadow: var(--biz-shadow-card);
}

/* Keep the filled i-nav-* symbols and the existing collapse/flick animations.
 * Compact geometry gets enough room for five touch targets on narrow phones.
 * The glass surface is shared with the modern navigation in business-hub.css.
 * No transforms, transition definitions or animation event handlers change. */
.phone.app-theme-refined .bottom-nav-next button { color: var(--biz-muted); }
.phone.app-theme-refined .bottom-nav-next button.active,
.phone.app-theme-refined .bottom-nav-next button.active .bottom-nav-icon { color: var(--biz-brand); }
.phone.app-theme-refined .bottom-nav-next button > span:last-child {
  font-size: var(--biz-text-caption) !important;
  max-height: 20px;
  letter-spacing: 0;
}
.phone.app-theme-refined .bottom-nav-next.is-compact {
  height: 58px;
  right: clamp(12px, calc((100% - 264px) / 2), 70px);
  left: clamp(12px, calc((100% - 264px) / 2), 70px);
}
.phone.app-theme-refined .bottom-nav-next.is-compact button { min-height: var(--biz-touch); }
.phone.app-theme-refined .bottom-nav-next.is-compact button > span:last-child { max-height: 0; }

/* Theme picker is a prototype control, independent of the selected app theme. */
.scenario-control .app-theme-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.scenario-control .app-theme-options > button {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid #d9dfda;
  border-radius: 12px;
  color: #454d47;
  background: #fff;
}
.scenario-control .app-theme-options > button[aria-checked="true"] {
  color: #fff;
  border-color: #0056f5;
  background: #0056f5;
}
.scenario-control .app-theme-options > button:focus-visible {
  outline: 2px solid #0056f5;
  outline-offset: 2px;
}

@media (max-width: 350px) {
  .phone.app-theme-refined .next-home-account-actions { gap: var(--biz-space-1); }
  .phone.app-theme-refined .next-home-account > header { align-items: flex-start; }
  .phone.app-theme-refined .profile > span { width: 32px; height: 32px; }
  .phone.app-theme-refined .profile > div > strong { max-width: 76px; }
  .phone.app-theme-refined .next-home-activity-list > button { column-gap: var(--biz-space-1); }
}
.phone.next-ui-theme.app-theme-refined :is(input, textarea)::placeholder {
  color: var(--biz-muted);
  opacity: 1;
}
.phone.next-ui-theme.app-theme-refined :is(
  .returning-login-step .field > small,
  .biometric-login-divider,
  .login-page-footer,
  .profile-sheet-form .field input[readonly]
) {
  color: var(--biz-muted);
}