@import url("tokens.css");

/* Optional typefaces for Profile → Legibility (Google Fonts; Profile Pro is local). */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Inter:wght@400;500;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,700&family=Space+Grotesk:wght@400;500;700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Ensure [hidden] always wins regardless of component display values */
[hidden] { display: none !important; }

/* ── Global icon reset ───────────────────────────────────────────────────────
   All sprite icons are 24×24 dp and stroke-based (stroke="currentColor").
   :where() zeroes out specificity (0,0,0) so any component class or later
   rule overrides size without !important — chip__icon (1rem), illustration
   (100%) etc. all win automatically via normal cascade order. */
:where(svg[aria-hidden="true"]) {
  width: 1.5rem;   /* 24dp */
  height: 1.5rem;
  flex-shrink: 0;
  overflow: visible; /* prevent clip of strokes on the viewBox edge */
}

/* ── Global button / input font reset ────────────────────────────────────────
   Form elements don't inherit font-family in all browsers by default. */
button, input, select, textarea {
  font-family: var(--font-family);
  font-size: inherit;
}

/* ── Interactive surface (Figma state layer — Tier A) ─────────────────────
   Container: stable --uz-surface-bg. Hover/pressed: ::before tint at 10% / 20%
   (--color-surface-state-*), composited on top — not a flat background swap. */

.uz-interactive-surface,
.product-item,
.list-item:not(.list-item--static),
.booking-row {
  --uz-surface-bg: transparent;
  position: relative;
  isolation: isolate;
  background-color: var(--uz-surface-bg);
}

.list-item--group-account:not(.list-item--static) {
  --uz-surface-bg: var(--color-bg);
}

.uz-interactive-surface::before,
.product-item::before,
.list-item:not(.list-item--static)::before,
.booking-row::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-surface-state-hover);
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  pointer-events: none;
  z-index: 0;
}

.uz-interactive-surface:hover::before,
.product-item:hover::before,
.list-item:not(.list-item--static):hover::before,
.booking-row:hover::before {
  opacity: 1;
}

.uz-interactive-surface:active::before,
.product-item:active::before,
.list-item:not(.list-item--static):active::before,
.booking-row:active::before {
  background-color: var(--color-surface-state-pressed);
  opacity: 1;
}

.uz-interactive-surface > *,
.product-item > *,
.list-item:not(.list-item--static) > *,
.booking-row > * {
  position: relative;
  z-index: 1;
}

.body {
  font-family: var(--font-family);
  color: var(--color-fg);
  background-color: var(--color-bg-secondary);
}

/* Main view vertical rhythm — Figma space/4 mobile (16dp = 1rem), space/5 desktop (32dp). */
:root {
  --view-stack-gap: var(--space-3); /* 16dp */
  /* Sticky nav: 16dp top inset + 16dp side bleed per edge when elevated (shadow state). */
  --view-nav-sticky-top: var(--space-3);
  --view-nav-sticky-bleed: var(--space-3);
  /* Overlay / content-indication tint: always foreground — dark navy on light, bright on dark. */
  --color-overlay-tint: var(--color-fg);
  /* Content-indication drop shadow (Figma feOffset dy=2, blur=16, tint @ 10%). */
  --shadow-content-indication-after: 0 0.125rem 2rem color-mix(in srgb, var(--color-overlay-tint) 10%, transparent);
  --shadow-content-indication-before: 0 -0.125rem 2rem color-mix(in srgb, var(--color-overlay-tint) 10%, transparent);
  /* Performance chart tooltip — Figma primary @ 15%, dy=2, blur=6. */
  --performance-chart-tooltip-shadow-color: var(--color-fg);
  --performance-chart-tooltip-shadow-opacity: 0.15;
}

html[data-theme="dark"] {
  --shadow-content-indication-after: 0 0.125rem 1rem color-mix(in srgb, var(--color-overlay-tint) 25%, transparent);
  --shadow-content-indication-before: 0 -0.125rem 1rem color-mix(in srgb, var(--color-overlay-tint) 25%, transparent);
  --performance-chart-tooltip-shadow-color: #000000;
  --performance-chart-tooltip-shadow-opacity: 0.35;
}

@media (min-width: 1024px) {
  :root {
    --view-stack-gap: var(--space-5);
  }
}

/* Block page scroll while any flow overlay is open (payment, account information, share). */
html:has(body.body--payment-open),
html:has(body.body--trade-open),
html:has(body.body--iat-open) {
  overflow: hidden;
}

.body--payment-open {
  overflow: hidden;
}

.body--payment-open .app {
  overflow: hidden;
}

.body--payment-open .main-content {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── Layout ───────────────────────────────────────────── */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: stretch;
}

/* ── Mobile / tablet shell (tab bar, no sidebar) ─────────────────────────────
   Lock viewport height so .main-content scrolls internally — required for
   position:sticky on .view__nav[data-scroll-edge-nav] (same as desktop). */
@media (max-width: 1279px) {
  html,
  body.body {
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  .app {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overflow-x: clip;
  }

  .main-content {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Sidebar ──────────────────────────────────────────── */

.sidebar {
  display: none;
  width: 16rem;
  flex-shrink: 0;
  flex-direction: column;
  background-color: var(--color-bg-sidebar);
  border-right: 0.0625rem solid var(--color-separator);
}

.sidebar__logo {
  padding: var(--space-4);
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-regular);
  color: var(--color-fg);
  cursor: pointer;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  font-weight: var(--fw-regular);
  background: none;
  border: none;
  text-decoration: none;
  font-family: var(--font-family);
}

.sidebar__nav-item--active {
  background-color: var(--color-nav-item-active-bg);
}

.sidebar__nav-item:hover:not(.sidebar__nav-item--active) {
  background-color: var(--color-surface-state-hover);
}

.sidebar__nav-item:active:not(.sidebar__nav-item--active) {
  background-color: var(--color-surface-state-pressed);
}

.sidebar__nav-item:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.sidebar__nav-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.sidebar__footer {
  margin-top: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
}

.sidebar__logout {
  padding: 0;
}

.sidebar__logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  border-radius: var(--radius-regular);
  border: none;
  cursor: pointer;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  font-family: var(--font-family);
}

.sidebar__logout-btn:hover {
  background-color: var(--color-btn-primary-hover);
}

.sidebar__logout-btn:active {
  background-color: var(--color-btn-primary-pressed);
}

.sidebar__logout-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Main content ─────────────────────────────────────── */

.main-content {
  flex: 1;
  /* Allow flex item to shrink so overflow-y creates an inner scroll (not unbounded page height). */
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-x: none;
  background-color: var(--color-bg-secondary);
  padding-bottom: 5rem;
}

.main-content__inner {
  max-width: 60rem;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
  /* Main wrapper: 48dp vertical */
  padding: var(--space-6) var(--space-4);
  box-sizing: border-box;
}

/* Dashboard main (Overview / Payments): fluid up to 1440px content cap */
.body[data-screen="overview"] .main-content__inner,
.body[data-screen="payments"] .main-content__inner {
  width: 100%;
  max-width: min(1440px, 100%);
  min-width: min(60rem, 100%);
}

/* Account details: 720dp (45rem) content column. */
.body[data-screen="account-details"] .main-content__inner {
  max-width: 45rem;
  width: 100%;
  margin-inline: auto;
}

/* Investment product details: 960dp (60rem) content column. */
.body[data-screen="investment-product-details"] .main-content__inner,
.body[data-screen="details-of-position"] .main-content__inner {
  max-width: 60rem;
  width: 100%;
  margin-inline: auto;
}

/* All bookings: narrower 720dp (45rem) column for readable list rows (Figma desktop-default). */
.body[data-screen="all-bookings"] .main-content__inner {
  max-width: 45rem;
  width: 100%;
  margin-inline: auto;
}

/* ── Page title ───────────────────────────────────────── */

.page-title {
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
  text-align: center;
  margin-bottom: var(--space-4);
}

/* ── Main view nav (leading, title, trailing — same idea as payment modal) ── */

.view__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  position: relative;
  flex-shrink: 0;
  margin-bottom: var(--view-stack-gap);
}

.view__nav-title,
.view__nav .page-title {
  margin-bottom: 0;
  text-align: center;
}

.view__nav-btn {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  border-radius: var(--radius-small);
  transition: background-color 0.15s ease;
}

.view__nav-btn:hover {
  background-color: var(--color-surface-state-hover);
}

.view__nav-btn:active {
  background-color: var(--color-surface-state-pressed);
}

.view__nav-btn:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.view__nav-btn--leading {
  left: var(--space-3);
}

.view__nav-btn--trailing {
  right: var(--space-3);
}

.view__nav-btn--hidden {
  visibility: hidden;
  pointer-events: none;
}

.view__nav-btn-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Main scroll views: sticky page title; flush horizontal edges when pinned to scroll top */
.body[data-screen="overview"] .view__nav[data-scroll-edge-nav],
.body[data-screen="payments"] .view__nav[data-scroll-edge-nav],
.body[data-screen="account-details"] .view__nav[data-scroll-edge-nav],
.body[data-screen="investment-product-details"] .view__nav[data-scroll-edge-nav],
.body[data-screen="details-of-position"] .view__nav[data-scroll-edge-nav] {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-bg-secondary);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  margin-bottom: var(--view-stack-gap);
}

/* Profile: sticky title; topic tabs dock into elevated nav (same pattern as all-bookings). */
.body[data-screen="profile"] {
  --profile-tabs-merge-duration: 0.2s;
  --profile-tabs-merge-ease: ease-in-out;
}

.body[data-screen="profile"] .profile__sticky-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-bottom: var(--view-stack-gap);
  box-sizing: border-box;
  background-color: var(--color-bg-secondary);
  overflow: hidden;
  transition:
    box-shadow var(--profile-tabs-merge-duration) var(--profile-tabs-merge-ease),
    border-color var(--profile-tabs-merge-duration) var(--profile-tabs-merge-ease),
    border-radius var(--profile-tabs-merge-duration) var(--profile-tabs-merge-ease),
    top var(--profile-tabs-merge-duration) var(--profile-tabs-merge-ease);
}

.body.profile--tabs-merged[data-screen="profile"] .profile__sticky-header {
  overflow: visible;
}

.body[data-screen="profile"] .profile__sticky-header .view__nav {
  position: relative;
  top: auto;
  z-index: auto;
  margin-bottom: 0;
  margin-inline: 0;
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
}

/* Animated slot — grows when topic tabs dock into the elevated nav card. */
.profile-topic-dock {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--profile-tabs-merge-duration) var(--profile-tabs-merge-ease);
  overflow: hidden;
}

.body.profile--tabs-merged[data-screen="profile"] .profile-topic-dock {
  grid-template-rows: 1fr;
}

.profile-topic-bar--docked {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0 var(--space-3) var(--space-2);
  pointer-events: none;
  background-color: transparent;
  transition: opacity 0.12s var(--profile-tabs-merge-ease);
}

.body.profile--tabs-merged[data-screen="profile"] .profile-topic-bar--docked {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.06s;
}

.body.profile--tabs-merging[data-screen="profile"] .profile-topic-bar--docked {
  transition-delay: 0s;
  opacity: 0;
}

/* Flow tabs fade out when the docked copy takes over. */
.body.profile--tabs-merging[data-screen="profile"] .profile-topic-bar[data-profile-topic-bar],
.body.profile--tabs-merged[data-screen="profile"] .profile-topic-bar[data-profile-topic-bar] {
  opacity: 0;
  pointer-events: none;
}

.body.profile--tabs-merged[data-screen="profile"] .profile-topic-bar[data-profile-topic-bar] {
  visibility: hidden;
}

@media (max-width: 1279px) {
  .body[data-screen="profile"]:not(.profile--tabs-merged)
    .profile__sticky-header.is-scroll-edge--after {
    box-shadow: var(--shadow-content-indication-after);
  }

  .body[data-screen="profile"].profile--tabs-merged .profile__sticky-header {
    box-shadow: var(--shadow-content-indication-after);
  }
}

@media (max-width: 1023px) {
  /* Match all-bookings mobile sticky title padding (safe area + 8dp). */
  .body[data-screen="profile"] .profile__sticky-header .view__nav {
    padding-top: max(env(safe-area-inset-top, 0px), var(--space-2));
    padding-bottom: var(--space-2);
  }

  .body[data-screen="profile"].profile--tabs-merged .profile__sticky-header {
    top: 0;
    margin-inline: calc(-1 * var(--space-3));
    padding-bottom: 0;
    border: none;
    border-radius: 0;
    box-shadow: var(--shadow-content-indication-after);
  }

  .body[data-screen="profile"].profile--tabs-merged .profile-topic-bar--docked {
    padding-inline: 0;
    padding-bottom: var(--space-2);
  }

  /* While merged, drop the flow spacer’s bottom margin so content sits tighter under chrome. */
  .body[data-screen="profile"].profile--tabs-merged .profile-topic-bar[data-profile-topic-bar] {
    margin-bottom: 0;
  }
}

@media (min-width: 1280px) {
  .body[data-screen="profile"].profile--tabs-merged .profile__sticky-header {
    top: var(--view-nav-sticky-top);
    background-color: var(--color-bg-secondary);
    border: 0.0625rem solid var(--color-separator);
    border-radius: var(--radius-regular);
    box-shadow: var(--shadow-content-indication-after);
  }

  .body[data-screen="profile"].profile--tabs-merged .profile-topic-bar--docked {
    padding-inline: var(--space-3);
    padding-bottom: var(--space-2);
  }
}

/* ── Views ─────────────────────────────────────────────── */

.view {
  display: none;
}

.view--active {
  display: block;
}

.view__main {
  min-width: 0;
}

.view__sidebar {
  display: none;
}

/* ── Mobile tab bar ───────────────────────────────────── */

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  background-color: var(--color-bg-sidebar);
  padding: var(--space-2) 0 calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) 0;
  box-shadow: none;
  transition: box-shadow 0.15s ease;
  z-index: 50;
}

.tab-bar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-fg);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-family);
  border-radius: var(--radius-regular);
}

.tab-bar__item:hover .tab-bar__icon-wrap:not(.tab-bar__icon-wrap--active) {
  background-color: var(--color-surface-state-hover);
}

.tab-bar__item:active .tab-bar__icon-wrap:not(.tab-bar__icon-wrap--active) {
  background-color: var(--color-surface-state-pressed);
}

.tab-bar__item:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.tab-bar__icon-wrap {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-small);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-bar__icon-wrap--active {
  background-color: var(--color-bg-secondary);
}

.tab-bar__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.tab-bar__label {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
}

/* Circular quick-action: whole control (circle + label) uses fluid column width 64–88dp;
   inner circle scales 40×40dp (small) → 48×48dp (big). See designs/components/button/circular-button.
   Legibility (UZBankAppearance) sets --appearance-space-scale on <html>; map preset large (1.14)
   to exactly 3rem (48dp) from base 2.5rem (40dp), while keeping the vw curve for viewport growth. */
:root {
  /* Fixed column/circle — gap grows on wider viewports; no vw scaling (Figma circular-button). */
  --action-button-container-width: 4rem;
  --action-button-circle-size: clamp(
    2.5rem,
    calc(2.5rem + (var(--appearance-space-scale, 1) - 1) * (0.5rem / 0.14)),
    3rem
  );
}

/* ── Action buttons ───────────────────────────────────── */

.action-buttons {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-bottom: var(--view-stack-gap);
}

.action-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-family);
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--action-button-container-width);
  min-width: var(--action-button-container-width);
  max-width: var(--action-button-container-width);
}

.action-button__circle {
  /* Inner circle: 40dp (small) → 48dp (big), matches circular-button frame */
  width: var(--action-button-circle-size);
  height: var(--action-button-circle-size);
  border-radius: 50%;
  background-color: var(--color-icon-circle-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.action-button__circle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-action-circle-state-hover);
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
  pointer-events: none;
  z-index: 0;
}

.action-button:hover .action-button__circle::after {
  opacity: 1;
}

.action-button:active .action-button__circle::after {
  background-color: var(--color-action-circle-state-pressed);
  opacity: 1;
}

.action-button:focus-visible {
  outline: none;
}

.action-button:focus-visible .action-button__circle {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.action-button__icon {
  /* Icon stays 24×24dp at all breakpoints (circle grows 40→48dp only). */
  width: 1.5rem;
  height: 1.5rem;
}

.action-button__label {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg);
  text-align: center;
  width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* ── Section card ─────────────────────────────────────── */

/* Stack gap — Figma Main Content / Modules: mobile space/4 (16dp), desktop space/5 (32dp). */
.section-card {
  margin-bottom: var(--view-stack-gap);
}

.section-card__header {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--section-card-header-padding-x, var(--space-3));
  margin-bottom: var(--section-card-header-gap-to-body, 0.25rem);
}

.section-card__title {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.section-card__amount {
  display: flex;
  gap: var(--space-1);
  align-items: baseline;
}

.section-card__currency {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.section-card__value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.section-card__account-type {
  display: flex;
  gap: var(--space-1);
  align-items: baseline;
}

.section-card__account-type-currency {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.section-card__account-type-label {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.section-card__body {
  background-color: var(--color-bg);
  border-radius: var(--radius-regular);
  border: 0.0625rem solid var(--color-separator);
  overflow: hidden;
}

.section-card__date {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
  padding: var(--space-2) var(--space-3) 0;
}

/* Single-column views (tablet+): fixed content column without inner horizontal padding —
 * sticky chrome and cards share the same width (account-details / all-bookings 45rem). */
@media (min-width: 1024px) {
  .body[data-screen="account-details"] .main-content__inner,
  .body[data-screen="investment-product-details"] .main-content__inner,
  .body[data-screen="details-of-position"] .main-content__inner,
  .body[data-screen="profile"] .main-content__inner,
  .body[data-screen="all-bookings"] .main-content__inner {
    padding-inline: 0;
    padding-block: var(--space-6);
  }

  .body[data-screen="account-details"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="investment-product-details"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="details-of-position"] .view__nav[data-scroll-edge-nav] {
    margin-inline: 0;
    padding-inline: var(--space-3);
    box-sizing: border-box;
  }

  .body[data-screen="profile"] .profile__sticky-header {
    margin-inline: 0;
    padding-inline: var(--space-3);
    box-sizing: border-box;
  }

  .body[data-screen="all-bookings"] .all-bookings__sticky-header {
    margin-inline: 0;
    padding-inline: var(--space-3);
    box-sizing: border-box;
  }

  .body[data-screen="all-bookings"].all-bookings--month-merged .all-bookings__sticky-header {
    margin-inline: calc(-1 * var(--view-nav-sticky-bleed));
    padding-inline: var(--space-3);
  }

  .body[data-screen="overview"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="payments"] .view__nav[data-scroll-edge-nav] {
    margin-inline: 0;
    box-sizing: border-box;
  }

  /* Elevated (shadow): grow 16dp per side; at rest margin stays 0 on nav rules above. */
  .body[data-screen="overview"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after,
  .body[data-screen="payments"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after,
  .body[data-screen="account-details"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after,
  .body[data-screen="investment-product-details"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after,
  .body[data-screen="details-of-position"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after,
  .body[data-screen="all-bookings"] .all-bookings__sticky-header.is-scroll-edge--after,
  .body[data-screen="profile"] .profile__sticky-header.is-scroll-edge--after,
  .body[data-screen="profile"].profile--tabs-merged .profile__sticky-header {
    margin-inline: calc(-1 * var(--view-nav-sticky-bleed));
    padding-inline: var(--space-3);
  }
}

/* ── Payments / Overview landing ────────────────────────────────────────────────
 * Below tablet grid breakpoint, sidebar cards (performance, offers / recurring,
 * recipients) stack below the main column — sidebar is hidden by default globally.
 * Figma mobile Main Content: gap space/4 (16dp) between section cards. */

@media (max-width: 1023px) {
  /* Stick page nav to the top edge; 16dp horizontal gutter (space/3 = 1rem). */
  .main-content__inner {
    padding-top: 0;
    padding-bottom: var(--space-6);
    padding-inline: var(--space-3);
  }

  .body[data-screen="account-details"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="investment-product-details"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="details-of-position"] .view__nav[data-scroll-edge-nav] {
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-3);
  }

  .body[data-screen="profile"] .profile__sticky-header {
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-3);
  }

  .body[data-screen="all-bookings"] .all-bookings__sticky-header {
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-3);
  }

  .body[data-screen="all-bookings"] .view__nav {
    padding-top: max(env(safe-area-inset-top, 0px), var(--space-2));
    padding-bottom: var(--space-2);
  }

  .all-bookings__sticky-header {
    top: 0;
    z-index: 30;
  }

  .view__nav[data-scroll-edge-nav] {
    padding-top: max(env(safe-area-inset-top, 0px), var(--space-2));
    padding-bottom: var(--space-2);
    top: 0;
    z-index: 20;
  }

  /* Full-bleed sticky bar (match account-details). */
  .body[data-screen="overview"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="payments"] .view__nav[data-scroll-edge-nav] {
    margin-inline: calc(-1 * var(--space-3));
    padding-inline: var(--space-3);
  }

  .profile-topic-bar .profile-topic-tabs.segmented {
    max-width: none;
  }

  /* Fit 3–4 circular actions in narrow viewports (e.g. iPhone 12 Pro). */
  .action-buttons {
    gap: var(--space-3);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .action-button {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
  }

  /* Overview / Payments / Account details: fixed 4rem columns — do not stretch flex children. */
  .body[data-screen='overview'] .view--active.view--overview .action-button,
  .body[data-screen='payments'] .view--active.view--payments .action-button,
  .body[data-screen='account-details'] .action-button {
    flex: 0 0 auto;
    width: var(--action-button-container-width);
    min-width: var(--action-button-container-width);
    max-width: var(--action-button-container-width);
  }

  .body[data-screen='overview'] .view--active.view--overview,
  .body[data-screen='payments'] .view--active.view--payments {
    display: flex;
    flex-direction: column;
    gap: var(--view-stack-gap);
  }

  /* Cards live in .view__main — gap here (not only on .view) for 16dp between section cards. */
  .body[data-screen='overview'] .view--active.view--overview > .view__main,
  .body[data-screen='payments'] .view--active.view--payments > .view__main {
    display: flex;
    flex-direction: column;
    gap: var(--view-stack-gap);
  }

  .body[data-screen='overview'] .view--active.view--overview .view__nav,
  .body[data-screen='overview'] .view--active.view--overview .action-buttons,
  .body[data-screen='overview'] .view--active.view--overview .section-card,
  .body[data-screen='payments'] .view--active.view--payments .view__nav,
  .body[data-screen='payments'] .view--active.view--payments .action-buttons,
  .body[data-screen='payments'] .view--active.view--payments .section-card,
  .body[data-screen='overview'] .view__nav[data-scroll-edge-nav],
  .body[data-screen='payments'] .view__nav[data-scroll-edge-nav] {
    margin-bottom: 0;
  }

  .body[data-screen='overview'] .view--active.view--overview .action-buttons,
  .body[data-screen='payments'] .view--active.view--payments .action-buttons {
    margin-bottom: 0;
  }

  .body[data-screen='payments'] .view--active.view--payments > .view__sidebar,
  .body[data-screen='overview'] .view--active.view--overview > .view__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--view-stack-gap);
    width: 100%;
  }

  .body[data-screen='payments'] .view--active.view--payments .section-card,
  .body[data-screen='overview'] .view--active.view--overview > .view__sidebar .section-card {
    margin-bottom: 0;
  }
}

/* Narrow phones — tighter action row (4 buttons on account-details). */
@media (max-width: 24rem) {
  .action-buttons {
    gap: var(--space-2);
  }

  .action-button__label {
    font-size: 0.6875rem;
  }
}

/* Account details / overview: 24dp gap between circular action buttons (Figma space/4). */
.body[data-screen="account-details"] .action-buttons,
.body[data-screen="overview"] .action-buttons {
  gap: var(--space-4);
}

.body[data-screen="overview"] .action-buttons {
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}

/* Overview column 1 stack (action buttons + account cards). */
.overview__primary {
  display: flex;
  flex-direction: column;
  gap: var(--view-stack-gap);
  min-width: 0;
}

.overview__primary .section-card {
  margin-bottom: 0;
}

/* ── Product item ─────────────────────────────────────── */

.product-item {
  display: flex;
  align-items: center;
  /* wealth-overview-account: 56dp row = 16dp vertical inset + trimmed sm/xs stack (see list-item design) */
  padding-block: calc(var(--space-3) + var(--trim-top-text-sm))
    calc(var(--space-3) + var(--trim-bottom-text-xs));
  padding-inline: var(--space-3);
  gap: var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-small);
}

/* ── Design system: chip (designs/components/chip) ───────────────────────── */

.chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  border-radius: 9999px;
  border: 0.0625rem solid var(--color-btn-primary-bg);
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  font-family: var(--font-family);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.chip--md {
  min-height: 2rem; /* 32px */
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-text-sm);
}

.chip--sm {
  min-height: 1.5rem; /* 24px */
  padding: 0.25rem 0.625rem;
  font-size: var(--fs-text-xs);
}

.chip__icon {
  display: block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: currentColor;
  fill: none;
  overflow: visible;
}

.chip__label {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip__dismiss {
  margin-left: calc(var(--space-2) * -0.25);
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: currentColor;
  border-radius: 9999px;
  cursor: pointer;
}

.chip__dismiss:hover {
  background-color: color-mix(in srgb, var(--color-btn-primary-fg) 15%, transparent);
}

.chip__dismiss:active {
  background-color: color-mix(in srgb, var(--color-btn-primary-fg) 25%, transparent);
}

.chip__dismiss:focus-visible {
  outline: 0.125rem solid var(--color-btn-primary-fg);
  outline-offset: 0.125rem;
}

/* ── Design system: expander (designs/components/expander) ───────────────── */

.expander {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
}

.expander:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
  border-radius: var(--radius-regular);
}

.expander__leading {
  width: 2rem;  /* 32px */
  height: 2rem; /* 32px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-small);
  background-color: color-mix(in srgb, var(--color-btn-primary-bg) 5%, transparent);
  flex-shrink: 0;
}

.expander:hover .expander__leading {
  background-color: color-mix(in srgb, var(--color-btn-primary-bg) 10%, transparent);
}

.expander:active .expander__leading,
.expander[aria-expanded="true"] .expander__leading {
  background-color: color-mix(in srgb, var(--color-btn-primary-bg) 20%, transparent);
}

.expander__leading-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-btn-primary-bg); /* overridden below by icon host block; restored after */
}

.expander__content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.expander__title {
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.expander__subtitle {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.expander__chevron {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-fg);
  transition: transform 0.15s ease;
}

.expander[aria-expanded="true"] .expander__chevron {
  transform: rotate(180deg);
}

/* Payment details: the right-side chevron is hidden per design */
.modal--payment-details .expander__chevron {
  display: none;
}

.product-item__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.product-item__info {
  flex: 1;
  min-width: 0;
}

.product-item__name {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.product-item__iban {
  display: block;
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.product-item__amount {
  display: flex;
  gap: 0.375rem;
  align-items: baseline;
  flex-shrink: 0;
}

.product-item__currency {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.product-item__value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

/* ── List item ────────────────────────────────────────── */

.list-item {
  display: flex;
  align-items: center;
  padding-block: calc(var(--space-3) + var(--trim-top-text-sm))
    calc(var(--space-3) + var(--trim-bottom-text-xs));
  padding-inline: var(--space-3);
  gap: var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-small);
}

.list-item__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.list-item__content {
  flex: 1;
  min-width: 0;
}

.list-item__content.type-stack-tight,
.list-item__body.type-stack-tight,
.list-item__end.type-stack-tight,
.product-item__info.type-stack-tight,
.debit-account__info.type-stack-tight,
.form-sheet__account-info.type-stack-tight {
  /* typography.css owns display/flex-direction/gap (cap-height trim system — gap: 0 + margin math).
     This rule only adds sizing/positioning within the parent flex container. */
  flex: 1;
  min-width: 0;
  justify-content: center;
}

/* 3-row stacks — same 8dp gap as product-item (Figma auto-layout gap: 8) */
.type-stack-tight > .type-xs.type-trim + .type-xs.type-trim {
  margin-block-start: calc(
    var(--text-row-gap) - var(--trim-bottom-text-xs) - var(--trim-top-text-xs)
  );
}

.type-stack-tight > .type-xs.type-trim + .type-sm.type-trim {
  margin-block-start: calc(
    var(--text-row-gap) - var(--trim-bottom-text-xs) - var(--trim-top-text-sm)
  );
}

.list-item__title {
  display: block;
  color: var(--color-fg);
}

.list-item__subtitle {
  display: block;
  color: var(--color-fg-label);
}

.list-item__amount {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  flex-shrink: 0;
}

.list-item__currency {
  color: var(--color-fg-label);
}

.list-item__value {
  color: var(--color-fg);
}

/* Row-item pattern (Figma Row Item / default-booking): title + currency + amount, all regular. */
.section-card__body .list-item:not(:has(.list-item__chevron)):not(:has(.list-item__subtitle))
  .list-item__value {
  font-weight: var(--fw-regular);
}

.list-item__chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* group-account — designs/components/list-item/list-item/variants/group-account (Figma 442:9603)
 * Hug height: padding-block + content (icon / text-stack / amount). No fixed row height. */
.list-item--group-account {
  align-items: center;
  padding-block: calc(var(--space-3) + var(--trim-top-text-sm))
    calc(var(--space-3) + var(--trim-bottom-text-xs)); /* 16dp vertical inset + trim compensation */
  padding-inline: 0;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--radius-regular);
  border: 0.0625rem solid color-mix(in srgb, var(--color-btn-primary-bg) 20%, transparent);
  transition: background-color 0.15s ease;
}

@supports not (border: 1px solid color-mix(in srgb, red 20%, transparent)) {
  .list-item--group-account {
    border-color: rgba(0, 21, 126, 0.2);
  }
}

.list-item--group-account .list-item__media {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: var(--space-3); /* Left Side — 16px inset */
  margin-right: var(--space-3); /* 16px icon to text */
}

.list-item--group-account .list-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.list-item--group-account .list-item__title {
  color: var(--color-fg);
}

.list-item--group-account .list-item__subtitle {
  color: var(--color-fg-label);
}

.list-item--group-account .list-item__end {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: var(--space-1); /* 8px currency to amount */
  padding-left: var(--space-1); /* Right Side — 8px */
  padding-right: var(--space-3); /* Right Side — 16px */
}

.list-item--group-account .list-item__currency {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
}

.list-item--group-account .list-item__value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.list-item--group-account .list-item__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-btn-primary-bg);
}

/* Opaque card (--uz-surface-bg: --color-bg): hover/pressed use shared ::before state layer above. */

/* Non-interactive group-account (e.g. account-information summary). */
.list-item--group-account.list-item--static {
  cursor: default;
  background-color: var(--color-bg);
}

.list-item--group-account.list-item--static::before {
  display: none;
}

.list-item--group-account.list-item--static:hover,
.list-item--group-account.list-item--static:active {
  background-color: var(--color-bg);
  box-shadow: none;
  border-color: color-mix(in srgb, var(--color-btn-primary-bg) 20%, transparent);
}

/* ── Divider ──────────────────────────────────────────── */

.divider {
  height: 0.0625rem;
  background-color: var(--color-separator);
  margin: 0 var(--space-3);
}

/* ── Show-all button ──────────────────────────────────── */

.show-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: calc(100% - 2 * var(--space-3));
  margin: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
  cursor: pointer;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  font-family: var(--font-family);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

/* Fallback only — overview/payments/account-details use uz-btn uz-btn--tonal uz-btn--sm */
.show-all-btn:not(.uz-btn) {
  padding: var(--space-2);
  background-color: var(--color-show-all-bg);
  color: var(--color-fg);
  border: none;
}

.show-all-btn:not(.uz-btn):hover {
  background-color: var(--color-btn-secondary-pressed);
}

.show-all-btn:not(.uz-btn):active {
  opacity: 0.92;
}

.show-all-btn:not(.uz-btn):focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.show-all-btn.uz-btn:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.show-all-btn__icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ── Carousel ─────────────────────────────────────────── */

.carousel {
  margin-bottom: var(--space-4);
}

.carousel__track {
  overflow: hidden;
}

.carousel__slides {
  display: flex;
  transition: transform 0.3s ease-in-out;
  gap: var(--space-3);
}

/* Slide is a carousel viewport slot; account row is list-item--group-account */
.carousel__slide {
  min-width: 100%;
  flex-shrink: 0;
}

/* Desktop peek */
@media (min-width: 1024px) {
  .carousel__slide {
    min-width: calc(100% - 5rem);      /* first / last: 1-column peek on one side */
    transition: min-width 0.3s ease-in-out;
  }
  /* Mid item: both neighbours peek 1 column each
     5rem left + 1rem gap + slide + 1rem gap + 5rem right = 100% */
  .carousel--mid .carousel__slide {
    min-width: calc(100% - 12rem);
  }
}

/* All slides are tappable; JS ignores clicks on the active slide */
.carousel__slide {
  cursor: pointer;
}

.carousel__slide .list-item--group-account {
  width: 100%;
}

.carousel__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.carousel__arrow {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--radius-small);
  transition: background-color 0.15s ease;
}

.carousel__arrow:hover {
  background-color: var(--color-surface-state-hover);
}

.carousel__arrow:active {
  background-color: var(--color-surface-state-pressed);
}

.carousel__arrow:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.carousel__arrow-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.carousel__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-fg-disabled);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.carousel__dot:hover {
  background-color: var(--color-fg-secondary);
  transform: scale(1.15);
}

.carousel__dot:active {
  background-color: var(--color-fg);
  transform: scale(1.05);
}

.carousel__dot--active {
  background-color: var(--color-fg);
}

/* ── Bookings card ────────────────────────────────────── */

.bookings-card {
  background-color: var(--color-bg);
  border-radius: var(--radius-regular);
  border: 0.0625rem solid var(--color-separator);
  padding: var(--space-2) 0;
}

.bookings-card__pending {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-small);
  transition: background-color 0.15s ease;
}

.bookings-card__pending:hover {
  background-color: var(--color-surface-state-hover);
}

.bookings-card__pending:active {
  background-color: var(--color-surface-state-pressed);
}

.bookings-card__pending-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.bookings-card__pending-label {
  flex: 1;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.bookings-card__pending-amount {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  flex-shrink: 0;
}

.bookings-card__pending-currency {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
}

.bookings-card__pending-value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.booking-group {
  display: flex;
  flex-direction: column;
}

.booking-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) 0;
}

.booking-group__label {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
}

/* Day header row (Figma Row Item / default-header): label + balance both secondary. */
.booking-group__balance {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-shrink: 0;
}

.booking-group__balance-currency {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
}

.booking-group__balance-value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
}

.booking-row {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-small);
}

.booking-row__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.booking-row__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.booking-row__amount {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  flex-shrink: 0;
  margin-left: auto;
}

.booking-row__currency {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
}

.booking-row__value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

/* ── All bookings view (designs/screens/all-bookings-and-payments) ───────── */

.body[data-screen="all-bookings"] {
  /* Measured in js/all-bookings.js */
  --all-bookings-nav-height: 3.25rem;
  --all-bookings-sticky-header-height: 6.5rem;
  --all-bookings-month-bar-height: 2.75rem;
  --all-bookings-month-dock-height: 0px;
  --all-bookings-sticky-top: var(--space-3);
  /* designs/…/*-default: toolbar→month ≈ space/4; month→card ≈ space/3 */
  --all-bookings-month-gap-top: var(--space-4);
  --all-bookings-month-gap-bottom: var(--space-3);
  --all-bookings-merge-duration: 0.2s;
  --all-bookings-merge-ease: ease-in-out;
}

.all-bookings {
  position: relative;
}

.all-bookings__scroll {
  position: relative;
  z-index: 0;
}

/* Sticky title row; month chips dock inside after crossfade merge. */
.all-bookings__sticky-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-bottom: var(--view-stack-gap);
  box-sizing: border-box;
  background-color: var(--color-bg-secondary);
  overflow: hidden;
  transition:
    box-shadow var(--all-bookings-merge-duration) var(--all-bookings-merge-ease),
    border-color var(--all-bookings-merge-duration) var(--all-bookings-merge-ease),
    border-radius var(--all-bookings-merge-duration) var(--all-bookings-merge-ease),
    top var(--all-bookings-merge-duration) var(--all-bookings-merge-ease);
}

.body.all-bookings--month-merged[data-screen="all-bookings"] .all-bookings__sticky-header {
  overflow: visible;
}

/* Animated slot — grows when month row docks into the nav card. */
.all-bookings__month-dock {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--all-bookings-merge-duration) var(--all-bookings-merge-ease);
  overflow: hidden;
}

.body.all-bookings--month-merged[data-screen="all-bookings"] .all-bookings__month-dock {
  grid-template-rows: 1fr;
}

.all-bookings__month-bar--docked {
  min-height: 0;
  opacity: 0;
  padding: 0 var(--space-3) var(--space-2);
  margin: 0;
  pointer-events: none;
  background-color: transparent;
  transition: opacity 0.12s var(--all-bookings-merge-ease);
}

.body.all-bookings--month-merged[data-screen="all-bookings"] .all-bookings__month-bar--docked {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.06s;
}

.body.all-bookings--month-merging[data-screen="all-bookings"] .all-bookings__month-bar--docked {
  transition-delay: 0s;
  opacity: 0;
}

/* Mobile/tablet: nav-only shadow until month merges (designs/…/mobile-content-indication). */
@media (max-width: 1279px) {
  .body[data-screen="all-bookings"]:not(.all-bookings--month-merged)
    .all-bookings__sticky-header.is-scroll-edge--after {
    box-shadow: var(--shadow-content-indication-after);
  }
}

.body[data-screen="all-bookings"] .view__nav {
  position: relative;
  top: auto;
  z-index: auto;
  display: grid;
  grid-template-columns: 2.75rem 1fr 2.75rem;
  align-items: center;
  margin-inline: 0;
  padding-inline: 0;
  margin-bottom: 0;
  background-color: transparent;
  box-shadow: none;
}

.body[data-screen="all-bookings"] .view__nav .view__nav-btn--leading {
  position: relative;
  left: auto;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  z-index: 1;
}

.body[data-screen="all-bookings"] .view__nav .view__nav-btn--trailing {
  position: relative;
  right: auto;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  z-index: 1;
}

.body[data-screen="all-bookings"] .view__nav .view__nav-title {
  grid-column: 1 / -1;
  grid-row: 1;
  width: 100%;
  margin: 0;
  text-align: center;
  pointer-events: none;
  z-index: 0;
}

.all-bookings__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: 0;
}

.all-bookings__account-card {
  border-radius: var(--radius-regular);
  background-color: var(--color-bg);
  border: 1px solid var(--color-separator);
}

.all-bookings__account-card .list-item--group-account {
  border-radius: var(--radius-regular);
}

.all-bookings__toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.all-bookings__toolbar .segmented--sm {
  flex: 1;
  min-width: 0;
}

/* Search — standard-button/small-secondary (mobile: icon-only 32×32; desktop: icon + label). */
.all-bookings__search-btn.uz-btn--secondary {
  flex-shrink: 0;
  background-color: var(--color-btn-secondary-bg);
  width: var(--btn-height-sm, 2rem);
  height: var(--btn-height-sm, 2rem);
  min-width: var(--btn-height-sm, 2rem);
  min-height: var(--btn-height-sm, 2rem);
  max-width: var(--btn-height-sm, 2rem);
  max-height: var(--btn-height-sm, 2rem);
  padding: 0;
  border-radius: var(--radius-small);
  box-sizing: border-box;
}

.all-bookings__search-btn .all-bookings__search-label {
  display: none;
}

/* Stuck (mobile): merged nav card — full-bleed, square, no stroke. */
@media (max-width: 1023px) {
  .body[data-screen="all-bookings"].all-bookings--month-merged .all-bookings__sticky-header {
    top: 0;
    margin-inline: calc(-1 * var(--space-3));
    padding-bottom: 0;
    border: none;
    border-radius: 0;
  }

  .body[data-screen="all-bookings"].all-bookings--month-merged .all-bookings__month-bar--docked {
    padding-inline: var(--space-3);
  }
}

.all-bookings__month-bar {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
}

.all-bookings__month-bar::-webkit-scrollbar {
  display: none;
}

.all-bookings__month-bar[data-all-bookings-month-bar] {
  position: relative;
  z-index: 1;
  padding: 0;
  margin-top: var(--all-bookings-month-gap-top);
  margin-bottom: var(--all-bookings-month-gap-bottom);
  background-color: transparent;
  opacity: 1;
  transition: opacity 0.12s var(--all-bookings-merge-ease);
}

.body.all-bookings--month-merging[data-screen="all-bookings"] .all-bookings__month-bar[data-all-bookings-month-bar],
.body.all-bookings--month-merged[data-screen="all-bookings"] .all-bookings__month-bar[data-all-bookings-month-bar] {
  opacity: 0;
  pointer-events: none;
}

/* Preserve scroll layout while the flow row is hidden during merge. */
.body.all-bookings--month-merged[data-screen="all-bookings"] .all-bookings__month-bar[data-all-bookings-month-bar] {
  visibility: hidden;
}

.all-bookings__month-chip {
  flex-shrink: 0;
  border: none;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-family: var(--font-family);
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
  background: transparent;
  cursor: pointer;
}

.all-bookings__month-chip:not(.all-bookings__month-chip--active) {
  background-color: var(--color-segmented-track-bg);
}

.all-bookings__month-chip:hover {
  background-color: var(--color-surface-state-hover);
}

.all-bookings__month-chip--active {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
}

.all-bookings__month-chip--active:hover {
  background-color: var(--color-btn-primary-hover);
}

/* Merged sticky chrome: shadow on expanded nav card while list continues below. */
@media (max-width: 1279px) {
  .body[data-screen="all-bookings"].all-bookings--month-merged .all-bookings__sticky-header {
    box-shadow: var(--shadow-content-indication-after);
  }
}

/* Desktop: merged nav card grows to include month row. */
@media (min-width: 1280px) {
  .body[data-screen="all-bookings"].all-bookings--month-merged .all-bookings__sticky-header {
    top: var(--view-nav-sticky-top);
    background-color: var(--color-bg-secondary);
    border: 0.0625rem solid var(--color-separator);
    border-radius: var(--radius-regular);
    box-shadow: var(--shadow-content-indication-after);
  }

  .body[data-screen="all-bookings"].all-bookings--month-merged .all-bookings__month-bar--docked {
    padding-inline: var(--space-3);
    padding-bottom: var(--space-2);
  }
}

.all-bookings__list.bookings-card {
  margin: 0;
  padding: var(--space-2) 0;
  background-color: var(--color-bg);
  border-radius: var(--radius-regular);
  border: 0.0625rem solid var(--color-separator);
}

a.show-all-btn {
  text-decoration: none;
  color: inherit;
}

/* ── Profile placeholder ──────────────────────────────── */

.profile-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-3);
}

.profile-placeholder__icon {
  width: 4rem;
  height: 4rem;
  opacity: 0.4;
}

.profile-placeholder__text {
  font-size: var(--fs-text-md);
  color: var(--color-fg-secondary);
}

/* ── Modal overlay ────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  /* Scroll only inside modal steps / [data-scroll-edge] — not the overlay host. */
  overflow: hidden;
  overscroll-behavior: contain;
  background-color: transparent;
}

/* Scrim fades in independently so the sheet can slide without dimming. */
.modal-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-overlay-scrim);
  opacity: 0;
  pointer-events: none;
}

.modal-overlay.modal-overlay--active {
  display: flex;
  overflow-x: clip;
}

/* Keep scrim visible after fade-in (animation alone can reset when body scroll-lock toggles). */
.modal-overlay--active:not(.modal-overlay--closing)::before {
  opacity: 1;
  animation: modal-scrim-in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.modal-overlay--closing::before {
  opacity: 0;
  animation: modal-scrim-out 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes modal-scrim-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modal-scrim-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Centered 640dp column for payment steps (not fullscreen flow) */
.modal-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(var(--modal-payment-max-width, 640px), 100%);
  flex-shrink: 0;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Parked below viewport when flow is closed (set from JS after close) */
.modal-shell.modal-shell--offscreen {
  transform: translateY(100vh);
}

.modal-shell.modal-shell--no-transition {
  transition: none !important;
}

/* Close (X / backdrop / Done): sheet exits downward, ease-in */
.modal-shell.modal-shell--closing {
  transform: translateY(100vh) !important;
  transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  .modal-overlay--active:not(.modal-overlay--closing)::before,
  .modal-overlay--closing::before {
    animation: none;
  }

  .modal-overlay--active:not(.modal-overlay--closing)::before {
    opacity: 1;
  }

  .modal-overlay--closing::before {
    opacity: 0;
  }

  .modal-shell {
    transition: none;
  }

  .modal-shell.modal-shell--closing {
    transition: none !important;
  }
}

.modal {
  background-color: var(--color-bg);
  border-radius: var(--radius-regular);
  width: 100%;
  max-width: none;
  max-height: min(90vh, calc(100dvh - 2 * var(--space-4)));
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 0.5rem 2rem var(--color-modal-elevated-shadow);
}

/* Payment overlay: fixed sheet height so .modal__body can flex-grow; avoids empty
   strip + clipped list when the footer is display:none on recipient-search. */
.modal-overlay .modal {
  height: min(90vh, calc(100dvh - 2 * var(--space-4)));
  max-height: min(90vh, calc(100dvh - 2 * var(--space-4)));
}

/* Desktop flow sheets — alias.radius.regular (8px): payment-flow-*, account-information desktop-default */
@media (min-width: 1024px) {
  .modal-shell:has(> .modal--payment-flow),
  .modal-shell:has(> .modal--iat-flow),
  .modal-shell:has(> .modal--trade-flow),
  .modal-shell:has(> .modal--account-information),
  .modal-shell:has(> .modal--share-information),
  .modal-shell:has(> .modal--payment-details) {
    border-radius: var(--radius-regular);
    overflow: hidden;
    box-shadow: 0 0.5rem 2rem var(--color-modal-elevated-shadow);
  }

  .modal-shell:has(> .modal--payment-flow) > .modal,
  .modal-shell:has(> .modal--iat-flow) > .modal,
  .modal-shell:has(> .modal--trade-flow) > .modal,
  .modal-shell:has(> .modal--account-information) > .modal,
  .modal-shell:has(> .modal--share-information) > .modal,
  .modal-shell:has(> .modal--payment-details) > .modal {
    border-radius: var(--radius-regular);
    overflow: hidden;
    box-shadow: none;
  }

  .modal--payment-flow .modal__nav,
  .modal--iat-flow .modal__nav,
  .modal--trade-flow .modal__nav,
  .modal--account-information .modal__nav,
  .modal--share-information .modal__nav,
  .modal--payment-details .modal__nav {
    border-top-left-radius: var(--radius-regular);
    border-top-right-radius: var(--radius-regular);
  }

  .modal--payment-flow .modal__footer,
  .modal--iat-flow .modal__footer,
  .modal--trade-flow .modal__footer,
  .modal--account-information .modal__footer--account-information,
  .modal--share-information .modal__footer,
  .modal--payment-details .modal__footer {
    border-bottom-left-radius: var(--radius-regular);
    border-bottom-right-radius: var(--radius-regular);
  }
}

/* Mobile / tablet: payment flow is full-viewport — no outer padding, no card radius. */
@media (max-width: 1023px) {
  .modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: flex-start;
  }

  .modal-shell {
    max-width: none;
    width: 100%;
    min-height: 100dvh;
  }

  .modal-overlay .modal {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

.modal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  position: relative;
  flex-shrink: 0;
}

/* Type Ahead Search (data-step recipient-search): search in nav bar, no title/back slot; close stays top-right. */
.modal__nav-search {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
}

.modal__nav-search .recipient-search__field-wrap {
  width: 100%;
}

.modal--recipient-search-active .modal__nav {
  justify-content: flex-start;
  padding-right: calc(var(--space-3) + var(--space-2) + 2.75rem);
}

.modal--recipient-search-active .modal__nav-search {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal--recipient-search-active .modal__title {
  display: none;
}

.modal--recipient-search-active .modal__back {
  display: none;
}

.modal__title {
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.modal__back {
  position: absolute;
  left: var(--space-3);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--radius-small);
  transition: background-color 0.15s ease;
}

.modal__back:hover {
  background-color: var(--color-surface-state-hover);
}

.modal__back:active {
  background-color: var(--color-surface-state-pressed);
}

.modal__back:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.modal__back--hidden {
  visibility: hidden;
}

.modal__back-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.modal__close {
  position: absolute;
  right: var(--space-3);
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  border-radius: var(--radius-small);
  transition: background-color 0.15s ease;
}

.modal__close:hover {
  background-color: var(--color-surface-state-hover);
}

.modal__close:active {
  background-color: var(--color-surface-state-pressed);
}

.modal__close:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.modal__close-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.modal__body {
  /* Steps are position:absolute and do not contribute height — reserve space for flex layout */
  flex: 1 1 auto;
  min-height: clamp(16rem, 48vh, 28rem);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

/* Overlay payment sheet: let body shrink/grow in fixed-height modal (see .modal-overlay .modal). */
.modal-overlay .modal__body {
  min-height: 0;
}

/* Stacked steps (absolute): only active visible; enter uses keyframes */
.modal__step {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.modal__step--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

/* Forward (Confirm): ease-out — enter from the right */
@keyframes modalStepInForward {
  from {
    opacity: 0;
    transform: translateX(1.5rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Back (toolbar): ease-in — enter from the left */
@keyframes modalStepInBack {
  from {
    opacity: 0;
    transform: translateX(-1.5rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.modal__step--active.modal__step--play-in-f {
  animation: modalStepInForward 0.25s ease-out forwards;
}

.modal__step--active.modal__step--play-in-b {
  animation: modalStepInBack 0.25s ease-in forwards;
}

.modal__footer {
  padding: var(--space-3);
  flex-shrink: 0;
}

/* ==========================================================================
 * Content indication — scroll edge shadows (global)
 * designs/screens/<screen>/variants/mobile-content-indication
 * ========================================================================== */

.modal--payment-flow,
.modal--iat-flow,
.modal--trade-flow,
.modal--account-information,
.modal--share-information,
.modal--payment-details {
  overflow: hidden;
  border-radius: var(--radius-regular);
}

.modal--payment-flow .modal__nav,
.modal--payment-flow .modal__footer,
.modal--iat-flow .modal__nav,
.modal--iat-flow .modal__footer,
.modal--trade-flow .modal__nav,
.modal--trade-flow .modal__footer,
.modal--account-information .modal__nav,
.modal--account-information .modal__footer--account-information,
.modal--share-information .modal__nav,
.modal--share-information .modal__footer,
.modal--payment-details .modal__nav,
.modal--payment-details .modal__footer,
.view--account-information .view__nav,
.view--account-information .account-information__footer {
  position: sticky;
  z-index: 2;
  flex-shrink: 0;
  background-color: var(--color-bg);
  transition: box-shadow 0.15s ease;
}

.modal--payment-flow .modal__nav,
.modal--iat-flow .modal__nav,
.modal--trade-flow .modal__nav,
.modal--account-information .modal__nav,
.modal--share-information .modal__nav,
.modal--payment-details .modal__nav,
.view--account-information .view__nav {
  top: 0;
}

.modal--payment-flow .modal__footer,
.modal--iat-flow .modal__footer,
.modal--trade-flow .modal__footer,
.modal--account-information .modal__footer--account-information,
.modal--share-information .modal__footer,
.modal--payment-details .modal__footer,
.view--account-information .account-information__footer {
  bottom: 0;
}

.modal__nav.is-scroll-edge--after,
.view__nav.is-scroll-edge--after,
[data-scroll-edge-nav].is-scroll-edge--after {
  box-shadow: var(--shadow-content-indication-after);
}

.modal__footer.is-scroll-edge--before,
.account-information__footer.is-scroll-edge--before,
[data-scroll-edge-footer].is-scroll-edge--before,
.tab-bar.is-scroll-edge--before {
  box-shadow: var(--shadow-content-indication-before);
}

/* Recipient search: fill modal body height; scroll list so search + heading stay visible. */
.modal__step[data-step="recipient-search"] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal__step[data-step="recipient-search"] .recipient-search {
  flex: 1 1 0%;
  min-height: 0;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.modal__step[data-step="recipient-search"] .recipient-search__list {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dark payment modals: no local input overrides — Figma frame “Payment Flow Recipient - mobile”
   uses fields on the page background (tokens.css maps --color-input-surface to
   --color-bg in dark). Input stroke is fixed 1px / 2px focus (inset box-shadow,
   --input-stroke-*-px) so legibility scaling does not change stroke weight. */

/* ── Recipient search / Type Ahead Search (payment step 0, data-step recipient-search) ─ */

.recipient-search {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 12rem;
}

.recipient-search__field-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: none;
  border-radius: var(--radius-small);
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-px, 1px) var(--color-input-stroke);
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.recipient-search__field-wrap:hover:not(:focus-within) {
  background-color: var(--color-surface-state-hover);
}

.recipient-search__field-wrap:active:not(:focus-within) {
  background-color: var(--color-surface-state-pressed);
}

.recipient-search__field-wrap:focus-within {
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-focus-px, 2px) var(--color-input-stroke-focus);
}

.recipient-search__icon {
  display: flex;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-fg);
}

.recipient-search__icon-svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  flex-shrink: 0;
  color: inherit;
  fill: none;
  overflow: hidden;
}

.recipient-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 0;
  min-height: 0;
  font-family: var(--font-family);
  font-size: max(16px, var(--fs-text-md));
  line-height: var(--lh-text);
  color: var(--color-fg);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

/* WebKit adds a second “clear” on type=search; we use our own control. */
.recipient-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  width: 0;
  height: 0;
}

.recipient-search__input::placeholder {
  color: var(--color-fg-disabled);
}

.recipient-search__clear {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-small);
  background: none;
  cursor: pointer;
  color: var(--color-fg);
  transition: background-color 0.15s ease;
}

.recipient-search__clear:hover {
  background-color: var(--color-surface-state-hover);
}

.recipient-search__clear:active {
  background-color: var(--color-surface-state-pressed);
}

.recipient-search__clear--hidden {
  visibility: hidden;
  pointer-events: none;
}

.recipient-search__clear-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  fill: none;
  overflow: visible;
}

.recipient-search__heading {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
  font-weight: var(--fw-medium);
  padding: 0 var(--space-3);
}

.recipient-search__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.recipient-search__result {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-3);
  border: none;
  border-bottom: 0.0625rem solid var(--color-separator);
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  border-radius: 0;
  transition: background-color 0.15s ease;
  color: inherit;
}

.recipient-search__result:hover {
  background-color: var(--color-surface-state-hover);
}

.recipient-search__result:active {
  background-color: var(--color-surface-state-pressed);
}

.recipient-search__result:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.recipient-search__result-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-fg);
  fill: none;
  overflow: visible;
}

.recipient-search__result-body {
  flex: 1;
  min-width: 0;
}

.recipient-search__result-name {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.recipient-search__result-iban {
  display: block;
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.recipient-search__result-chevron {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-fg-secondary);
  fill: none;
  overflow: visible;
}

.recipient-search__empty {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
  padding: var(--space-2) 0;
}

.recipient-search__empty--hidden {
  display: none;
}

/* ── Form ─────────────────────────────────────────────── */

.form {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 16dp — designs/screens/payment-flow-recipient */
}

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

/* Interactive fields reserve 16dp under the control for helper/error text (Figma 88dp frame). */
.form-field:not(.form-field--readonly):not(.form-field--no-footer):not(:has(.debit-account)):not(:has(.form-field__optional-row)):not(:has(.form-field__error-row)):not(:has(.form-field__footer))::after {
  content: "";
  display: block;
  min-height: 1rem;
  flex-shrink: 0;
}

.form-field__footer {
  min-height: 1rem;
  margin: 0;
  flex-shrink: 0;
}

.form-field__error-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
  min-height: 1rem;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-error, #ff0095);
}

.form-field__label {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
}

.form-field__row {
  display: flex;
  align-items: center;
  padding-bottom: var(--space-1);
  border-bottom: 0.0625rem solid var(--color-separator);
}

.form-field__date-wrap,
.form-field__row.form-field__row--bordered {
  /* Date field — designs/components/form-field/date-field (matches text/select control chrome) */
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0 var(--space-2);
  padding-bottom: 0;
  border: none;
  border-bottom: none;
  border-radius: var(--radius-small);
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-px, 1px) var(--color-input-stroke);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.form-field__date-wrap:hover:not(:focus-within),
.form-field__row.form-field__row--bordered:hover:not(:focus-within) {
  background-color: var(--color-surface-state-hover);
}

.form-field__date-wrap:active:not(:focus-within),
.form-field__row.form-field__row--bordered:active:not(:focus-within) {
  background-color: var(--color-surface-state-pressed);
}

.form-field__date-wrap:focus-within,
.form-field__date-wrap:focus-visible,
.form-field__row.form-field__row--bordered:focus-within,
.form-field__row.form-field__row--bordered:focus-visible {
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-focus-px, 2px) var(--color-input-stroke-focus);
  outline: none;
}

.form-field__date-wrap .form-field__value,
.form-field__row.form-field__row--bordered .form-field__value {
  font-size: max(16px, var(--fs-text-md));
  font-weight: var(--fw-regular);
  line-height: 2.5rem;
}

.form-field__date-wrap .form-field__calendar-icon,
.form-field__row.form-field__row--bordered .form-field__calendar-icon {
  flex-shrink: 0;
  color: var(--color-fg);
}

.form-field__value {
  flex: 1;
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.form-field__edit {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem; /* icon-only small: 4dp pad + 24dp icon = 32dp total */
  border-radius: var(--radius-small);
  transition: background-color 0.15s ease;
}

.form-field__edit:hover {
  background-color: var(--color-surface-state-hover);
}

.form-field__edit:active {
  background-color: var(--color-surface-state-pressed);
}

.form-field__edit:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.form-field__edit-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.form-field__calendar-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Readonly label + value rows (designs/components/form-field/text-field/variants/readonly-default) */
.form-field--readonly {
  gap: 0.25rem; /* 4px — label band to value row in 88dp frame */
}

.form-field--readonly .form-field__value {
  font-weight: var(--fw-regular);
}

.form-field--readonly .form-field__row {
  padding-bottom: 0;
}

.form-field__row--multiline {
  align-items: flex-start;
}

.form-field__value--multiline {
  display: flex;
  flex-direction: column;
  gap: 0;
  white-space: normal;
}

.form-field__value--multiline > span {
  display: block;
}

.form-field__edit--align-start {
  align-self: flex-start;
}

/* Bordered text control (Figma Input Field): chrome on wrap so trailing clear sits inside stroke */
.form-field__text-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 2.5rem;
  min-height: 2.5rem;
  position: relative;
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--radius-small);
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-px, 1px) var(--color-input-stroke);
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.form-field__text-wrap:hover:not(:focus-within) {
  background-color: var(--color-surface-state-hover);
}

.form-field__text-wrap:active:not(:focus-within) {
  background-color: var(--color-surface-state-pressed);
}

.form-field__text-wrap:focus-within {
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-focus-px, 2px) var(--color-input-stroke-focus);
}

.form-field__text-wrap .form-field__input {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 2.5rem;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  /* max(16px) prevents iOS Safari auto-zoom on focus when legibility scales fs-text-md below 16px */
  font-size: max(16px, var(--fs-text-md));
  line-height: 2.5rem;
  color: var(--color-fg);
  outline: none;
  font-family: var(--font-family);
}


.form-field__text-wrap .form-field__input::placeholder {
  color: var(--color-fg-disabled);
}

.form-field__text-wrap:has(.form-field__clear:not(.form-field__clear--hidden)) {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-1);
  align-items: center;
}

.form-field__text-wrap:has(.form-field__clear:not(.form-field__clear--hidden)) .form-field__input {
  padding-inline-end: 0;
}

.form-field__text-wrap:has(.form-field__clear:not(.form-field__clear--hidden)) .form-field__clear {
  position: static;
  transform: none;
  top: auto;
  right: auto;
}

.form-field__clear {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-small);
  background: none;
  cursor: pointer;
  color: var(--color-fg);
  transition: background-color 0.15s ease;
}

.form-field__clear:hover {
  background-color: var(--color-surface-state-hover);
}

.form-field__clear:active {
  background-color: var(--color-surface-state-pressed);
}

.form-field__clear--hidden {
  display: none;
}

/* Text field — optional informative row (default-informative) */
.form-field--informative .form-field__optional-row,
.form-field > .form-field__optional-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  margin: 0;
  min-height: 1rem;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.form-field__optional-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.125rem;
  color: var(--color-btn-primary-bg);
}

.form-field__optional-icon > use {
  fill: none;
}

.form-field__text-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  border: 0.0625rem solid var(--color-separator);
  border-radius: var(--radius-small);
  background-color: var(--color-bg);
}

.form-field__text-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 1.5rem;
}

.form-field__text-row-label {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.form-field__text-row-value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
  text-align: right;
}

.form-field__clear-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  fill: none;
  overflow: visible;
}

.form-field__select-wrap {
  position: relative;
  display: block;
  height: 2.5rem;
}

.form-field__select {
  width: 100%;
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0 2.25rem 0 var(--space-2);
  border: none;
  border-radius: var(--radius-small);
  font-size: max(16px, var(--fs-text-md));
  line-height: 2.5rem;
  color: var(--color-fg);
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-px, 1px) var(--color-input-stroke);
  outline: none;
  font-family: var(--font-family);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.form-field__select:hover:not(:focus):not(:disabled) {
  background-color: var(--color-surface-state-hover);
}

.form-field__select:active:not(:focus):not(:disabled) {
  background-color: var(--color-surface-state-pressed);
}

.form-field__select:focus,
.form-field__select:focus-visible {
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-focus-px, 2px) var(--color-input-stroke-focus);
}

.form-field__select-icon {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.form-field__select-chevron {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  max-width: 100%;
  max-height: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  color: var(--color-fg);
  fill: none;
  overflow: hidden;
}

.form-field__select-chevron > use {
  fill: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Amount input ─────────────────────────────────────── */

.amount-input {
  display: flex;
  height: 2.5rem;
  min-height: 2.5rem;
  position: relative;
  border: none;
  border-radius: var(--radius-small);
  padding: 0 var(--space-4);
  align-items: center;
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-px, 1px) var(--color-input-stroke);
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.amount-input:hover:not(:focus-within) {
  background-color: var(--color-surface-state-hover);
}

.amount-input:active:not(:focus-within) {
  background-color: var(--color-surface-state-pressed);
}

.amount-input:focus-within {
  background-color: var(--color-input-surface);
  box-shadow: inset 0 0 0 var(--input-stroke-focus-px, 2px) var(--color-input-stroke-focus);
}

.amount-input__currency {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular); /* reference: currency label is regular, not medium */
  line-height: var(--lh-text);
  color: var(--color-fg);
  cursor: pointer;
}

.amount-input__currency:focus-visible {
  outline: 2px solid var(--color-input-stroke-focus);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

.amount-input__chevron {
  /* icon24 — 24×24dp fixed, never fluid */
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.amount-input__value {
  flex: 1;
  min-width: 0;
  height: 2.5rem;
  text-align: right;
  border: none;
  outline: none;
  font-size: max(16px, var(--fs-text-md));
  font-weight: var(--fw-medium);
  line-height: 2.5rem;
  color: var(--color-fg);
  font-family: var(--font-family);
  background: transparent;
}

.amount-input--no-currency:has(.amount-input__clear:not(.amount-input__clear--hidden)) {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-1);
  align-items: center;
}

.amount-input:not(.amount-input--no-currency):has(.amount-input__clear:not(.amount-input__clear--hidden)) {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.amount-input:not(.amount-input--no-currency):has(.amount-input__clear:not(.amount-input__clear--hidden)) .amount-input__clear {
  margin-inline-start: var(--space-1);
}

.amount-input:has(.amount-input__clear:not(.amount-input__clear--hidden)) .amount-input__clear {
  position: static;
  transform: none;
  top: auto;
  right: auto;
}

.amount-input__clear {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-small);
  background: none;
  cursor: pointer;
  color: var(--color-fg);
  transition: background-color 0.15s ease;
}

.amount-input:not(.amount-input--no-currency) .amount-input__clear {
  right: var(--space-4);
}

.amount-input--no-currency .amount-input__clear {
  right: var(--space-2);
}

.amount-input__clear:hover {
  background-color: var(--color-surface-state-hover);
}

.amount-input__clear:active {
  background-color: var(--color-surface-state-pressed);
}

.amount-input__clear--hidden {
  display: none;
}

/* Amount field without currency selector (quantity / unit price) */
.amount-input--no-currency {
  /* Match select-field / text-field control height (designs/components/form-field) */
  height: 2.5rem;
  min-height: 2.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-small);
}

.amount-input--no-currency .amount-input__value {
  text-align: right;
  font-weight: var(--fw-medium);
}

.amount-input__clear-icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  fill: none;
  overflow: visible;
}

/* ── Debit account ────────────────────────────────────── */

.debit-account {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: none;
  border: none;
  border-radius: var(--radius-regular);
  box-shadow: inset 0 0 0 var(--input-stroke-px, 1px) var(--color-input-stroke);
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

button.debit-account {
  width: 100%;
  font-family: inherit;
  text-align: left;
  color: inherit;
  appearance: none;
}

.debit-account:hover {
  background-color: var(--color-surface-state-hover);
}

.debit-account:active {
  background-color: var(--color-surface-state-pressed);
}

button.debit-account:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 var(--input-stroke-focus-px, 2px) var(--color-input-stroke-focus);
}

.debit-account__icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.debit-account__info {
  flex: 1;
  min-width: 0;
}

/* .debit-account__info layout is fully handled by the shared type-stack-tight rule */

.debit-account__name {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.debit-account__iban {
  display: block;
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.debit-account__amount {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-shrink: 0;
}

.debit-account__amount-currency {
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.debit-account__amount-value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.debit-account__chevron {
  /* icon24 — 24×24dp, matches Figma "Right Side > icon24". Fixed, never fluid. */
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* Right column: Figma "Right Side" — flex column, content right-aligned, 4dp gap
   between the money-amount row and the 24dp chevron icon. */
.debit-account__end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem; /* 4dp — Figma spec between amount and icon24 */
  flex-shrink: 0;
}

/* ── Segmented control ────────────────────────────────── */

/*
 * Track only: subtle fill #00157E @ 5% (light) / white @ 8% (dark). Inactive segment
 * buttons stay transparent so the track reads as one surface; active segment is primary fill.
 * Token --color-segmented-track-bg should stay a real colour (not “transparent track”). */
.segmented {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem;
  border-radius: var(--radius-small);
  border: none;
  background-color: var(--color-segmented-track-bg, rgba(0, 21, 126, 0.05));
}

.segmented.segmented--theme {
  width: 100%;
}

/* Small — 36dp track (Figma Type=Small); aligns with .uz-btn--sm (32dp). */
.segmented--sm {
  min-height: 2.25rem;
}

.segmented--sm .segmented__option {
  min-height: 2rem;
  height: 2rem;
}

/* Regular — 44dp track (Figma Type=Regular). */
.segmented--regular {
  min-height: 2.75rem;
}

.segmented--regular .segmented__option {
  min-height: calc(2.75rem - 0.25rem);
  height: calc(2.75rem - 0.25rem);
}

.segmented__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 var(--space-2);
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  text-align: center;
  border-radius: var(--radius-small);
  cursor: pointer;
  color: var(--color-btn-secondary-fg);
  /* Let the track (.segmented) show through — avoid painting track tint again per cell (looks like solid grey slabs). */
  background: none;
  border: 0.0625rem solid transparent;
  font-family: var(--font-family);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.segmented__option:hover:not(.segmented__option--active) {
  background-color: var(--color-surface-state-hover);
}

.segmented__option:active:not(.segmented__option--active) {
  background-color: var(--color-surface-state-pressed);
}

.segmented__option--active:hover {
  background-color: var(--color-btn-primary-hover);
  color: var(--color-btn-primary-fg);
}

.segmented__option--active:active {
  background-color: var(--color-btn-primary-pressed);
  color: var(--color-btn-primary-fg);
}

.segmented__option:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.segmented__option--active {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  border-color: var(--color-btn-primary-bg);
}

/* ── Toggle row ───────────────────────────────────────── */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle-row__label {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

/* ── Toggle switch ────────────────────────────────────── */

.toggle {
  width: 2.75rem;
  height: 1.625rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-separator);
  cursor: pointer;
  position: relative;
  transition: background-color 0.2s;
  border: none;
  flex-shrink: 0;
}

.toggle:hover:not(.toggle--active) {
  background-color: var(--color-surface-state-hover);
}

.toggle:active:not(.toggle--active) {
  background-color: var(--color-surface-state-pressed);
}

.toggle--active:hover {
  background-color: var(--color-btn-primary-hover);
}

.toggle--active:active {
  background-color: var(--color-btn-primary-pressed);
}

.toggle:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.toggle--active {
  background-color: var(--color-btn-primary-bg);
}

.toggle__thumb {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--color-bg);
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  transition: left 0.2s;
}

.toggle__thumb--active {
  left: calc(100% - 1.4375rem);
}

/* ── Primary button (legacy) — Regular only; aligns with .uz-btn--primary.uz-btn--md */
.btn-primary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  min-height: 2.5rem;
  padding: 0 var(--btn-pad-x-md);
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  border-radius: var(--radius-small);
  border: 0.0625rem solid var(--color-btn-primary-bg);
  cursor: pointer;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  font-family: var(--font-family);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.btn-primary:hover {
  background-color: var(--color-btn-primary-hover);
  border-color: var(--color-btn-primary-hover);
}

.btn-primary:active {
  background-color: var(--color-btn-primary-pressed);
  border-color: var(--color-btn-primary-pressed);
}

.btn-primary:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

/* ── Design system: buttons (tokens4 mapped button.*) ─────────
   Primary / tonal: solid container, hover + pressed swap surface colour.
   Secondary: transparent container + border; hover / pressed use 10% / 20%
   foreground tint on the fill (same idea as Figma state layer).
   Figma sizes ↔ utilities: Small = .uz-btn--sm, Regular = .uz-btn--md,
   Large = .uz-btn--lg (see Storybook Primary — all sizes). */

.uz-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  max-width: 100%;
  margin: 0;
  font-family: var(--font-family);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  text-decoration: none;
  text-align: center;
  border-radius: var(--radius-small);
  border-style: solid;
  border-width: 0.0625rem;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.uz-btn:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.uz-btn:disabled,
.uz-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.uz-btn--sm {
  min-height: calc(var(--btn-height-sm, 2rem) * var(--appearance-font-scale, 1));
  padding: var(--btn-pad-y-sm, 0) var(--btn-pad-x-sm, var(--space-2));
  font-size: var(--fs-text-sm);
}

/* icon-only-button/small-secondary — 32×32dp box, 24dp glyph (after --sm so padding/height win). */
.uz-btn.uz-btn--sm.uz-btn--icon-only-secondary {
  width: var(--btn-height-sm, 2rem);
  height: var(--btn-height-sm, 2rem);
  min-width: var(--btn-height-sm, 2rem);
  min-height: var(--btn-height-sm, 2rem);
  max-width: var(--btn-height-sm, 2rem);
  max-height: var(--btn-height-sm, 2rem);
  padding: 0;
  border-radius: var(--radius-small);
  box-sizing: border-box;
}

.uz-btn.uz-btn--sm.uz-btn--icon-only-secondary .uz-btn__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.uz-btn--md {
  min-height: 2.5rem;
  padding: 0 var(--btn-pad-x-md);
  font-size: var(--fs-text-md);
}

.uz-btn--lg {
  min-height: 3rem;
  padding: 0 var(--btn-pad-x-lg);
  font-size: var(--fs-text-lg);
}

.uz-btn--block {
  width: 100%;
}

.uz-btn--primary {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
  border-color: var(--color-btn-primary-bg);
}

.uz-btn--primary:hover {
  background-color: var(--color-btn-primary-hover);
  border-color: var(--color-btn-primary-hover);
}

.uz-btn--primary:active,
.uz-btn--primary.uz-btn--pressed {
  background-color: var(--color-btn-primary-pressed);
  border-color: var(--color-btn-primary-pressed);
}

.uz-btn--secondary {
  background-color: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-fg);
  border-color: var(--color-btn-secondary-border);
}

.uz-btn--secondary:hover {
  background-color: color-mix(in srgb, var(--color-btn-secondary-fg) 10%, var(--color-btn-secondary-bg));
}

.uz-btn--secondary:active,
.uz-btn--secondary.uz-btn--pressed {
  background-color: color-mix(in srgb, var(--color-btn-secondary-fg) 20%, var(--color-btn-secondary-bg));
}

.uz-btn--tonal {
  background-color: var(--color-btn-tonal-bg);
  color: var(--color-btn-tonal-fg);
  border-color: var(--color-btn-tonal-border);
}

.uz-btn--tonal:hover {
  background-color: var(--color-btn-tonal-hover);
  border-color: var(--color-btn-tonal-hover);
}

.uz-btn--tonal:active,
.uz-btn--tonal.uz-btn--pressed {
  background-color: var(--color-btn-tonal-pressed);
  border-color: var(--color-btn-tonal-pressed);
}

.uz-btn__icon {
  display: block;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  color: currentColor;
  fill: none;
  overflow: visible;
}

.uz-btn__icon > use {
  fill: none;
  pointer-events: none;
}

/* Icon-only — small glyph-only (32dp: 4dp pad + 24dp icon), designs/components/button/icon-only-button */
.uz-btn--icon-only {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0.25rem;
  border: none;
  background-color: transparent;
  color: var(--color-fg);
  border-radius: var(--radius-small);
}

/* Icon-only — small secondary (32×32, bordered), icon-only-button/small-secondary */
.uz-btn--icon-only-secondary {
  flex-shrink: 0;
  background-color: var(--color-bg);
  color: var(--color-btn-secondary-fg);
  border: 0.0625rem solid var(--color-btn-secondary-border);
  border-radius: var(--radius-small);
}

.uz-btn--icon-only-secondary:hover {
  background-color: var(--color-btn-secondary-hover);
}

.uz-btn--icon-only-secondary:active,
.uz-btn--icon-only-secondary.uz-btn--pressed {
  background-color: var(--color-btn-secondary-pressed);
}

/* Icon-only — small filled tonal (32×32), icon-only-button/small-filledtonal */
.uz-btn--icon-only-filledtonal {
  flex-shrink: 0;
  background-color: var(--color-btn-tonal-bg);
  color: var(--color-btn-tonal-fg);
  border: 0.0625rem solid var(--color-btn-tonal-border);
  border-radius: var(--radius-small);
}

.uz-btn.uz-btn--sm.uz-btn--icon-only-filledtonal {
  width: var(--btn-height-sm, 2rem);
  height: var(--btn-height-sm, 2rem);
  min-width: var(--btn-height-sm, 2rem);
  min-height: var(--btn-height-sm, 2rem);
  max-width: var(--btn-height-sm, 2rem);
  max-height: var(--btn-height-sm, 2rem);
  padding: 0;
  box-sizing: border-box;
}

.uz-btn.uz-btn--sm.uz-btn--icon-only-filledtonal .uz-btn__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.uz-btn--icon-only-filledtonal:hover {
  background-color: var(--color-btn-tonal-hover);
  border-color: var(--color-btn-tonal-hover);
}

.uz-btn--icon-only-filledtonal:active,
.uz-btn--icon-only-filledtonal.uz-btn--pressed {
  background-color: var(--color-btn-tonal-pressed);
  border-color: var(--color-btn-tonal-pressed);
}

.uz-btn--icon-only:hover {
  background-color: var(--color-surface-state-hover);
}

.uz-btn--icon-only:active {
  background-color: var(--color-surface-state-pressed);
}

.show-all-btn.uz-btn {
  width: calc(100% - 2 * var(--space-3));
  margin: var(--space-2) var(--space-3);
  border-radius: var(--radius-small);
}

.show-all-btn .uz-btn__icon {
  width: 1.5rem;
  height: 1.5rem;
}

.performance-card__details-btn .uz-btn__icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ── Confirmation overlay + dialog ─────────────────────── */

.confirmation-dialog,
.basic-dialog-payment-exit__surface {
  --dialog-padding-inline: var(--space-3);
  --dialog-padding-block: var(--space-3);
}

@media (min-width: 1280px) {
  .confirmation-dialog,
  .basic-dialog-payment-exit__surface {
    --dialog-padding-inline: var(--space-4);
    --dialog-padding-block: var(--space-4);
  }
}

.confirmation-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: max(var(--space-4), env(safe-area-inset-top, 0px))
    max(var(--space-4), env(safe-area-inset-right, 0px))
    max(var(--space-4), env(safe-area-inset-bottom, 0px))
    max(var(--space-4), env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  background-color: var(--color-overlay-scrim);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out, visibility 0s linear 0.25s;
}

.confirmation-overlay--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease-in-out, visibility 0s;
}

.confirmation-dialog {
  background-color: var(--color-bg);
  border-radius: var(--radius-regular);
  border: 0.0625rem solid var(--color-separator);
  padding: var(--dialog-padding-block) var(--dialog-padding-inline);
  text-align: center;
  max-width: min(var(--confirmation-dialog-max-width, 640px), 100%);
  width: 100%;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.25s ease-in-out;
}

.confirmation-overlay--visible .confirmation-dialog {
  transform: translateY(0);
}

/* Mobile / tablet: bottom sheet — same positioning + motion as form-sheet (designs/flows/domestic-payment-flow). */
@media (max-width: 1279px) {
  .confirmation-overlay {
    justify-content: flex-end;
    align-items: stretch;
    overflow: visible;
    padding: 0.25rem;
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
    --form-sheet-slide-depth: calc(100vh + 1rem + env(safe-area-inset-bottom, 0px));
    transition:
      opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.45s;
  }

  @supports (height: 100dvh) {
    .confirmation-overlay {
      --form-sheet-slide-depth: calc(100dvh + 1rem + env(safe-area-inset-bottom, 0px));
    }
  }

  .confirmation-overlay--visible {
    transition:
      opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }

  .confirmation-dialog {
    flex-shrink: 0;
    max-width: none;
    margin-top: auto;
    box-shadow: 0 0.25rem 1.5rem var(--color-modal-elevated-shadow);
    transform: translate3d(0, var(--form-sheet-slide-depth), 0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1);
  }

  .confirmation-overlay--visible .confirmation-dialog {
    transform: translate3d(0, 0, 0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .confirmation-overlay,
  .confirmation-overlay--visible {
    transition: none;
  }

  @media (max-width: 1279px) {
    .confirmation-dialog,
    .confirmation-overlay--visible .confirmation-dialog {
      transform: none;
      transition: none;
    }
  }
}

.confirmation-dialog__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  margin: 0 auto var(--space-2);
  color: var(--color-fg);
  flex-shrink: 0;
}

@media (min-width: 1280px) {
  .confirmation-dialog__icon {
    margin-bottom: var(--space-3);
  }
}

.confirmation-dialog__icon-svg {
  display: block;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.confirmation-dialog__icon svg:not(.confirmation-dialog__icon-svg) {
  display: block;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.confirmation-dialog__text {
  display: block;
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg);
  margin-bottom: var(--space-2);
}

.confirmation-dialog__amount {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}

.confirmation-dialog__currency {
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.confirmation-dialog__sum {
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.confirmation-dialog__recipient {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: var(--fs-text-md);
  color: var(--color-fg);
}

.confirmation-dialog__recipient-name {
  font-weight: var(--fw-medium);
}

.confirmation-dialog__footer {
  display: block;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg);
  margin-bottom: var(--space-1);
}

.confirmation-dialog__date {
  display: block;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
  margin-bottom: var(--space-3);
}

@media (min-width: 1280px) {
  .confirmation-dialog__date {
    margin-bottom: var(--space-4);
  }
}

.confirmation-dialog .uz-btn {
  margin-top: var(--space-1);
}

#uz-iat-overlay > .confirmation-overlay {
  z-index: 10;
}

/* IAT: immediate execution copy (no date line) — match payment footer spacing above CTA */
#uz-iat-overlay .confirmation-dialog .confirmation-dialog__footer {
  margin-bottom: var(--space-3);
  font-size: var(--fs-text-md);
}

#uz-trade-overlay > .confirmation-overlay {
  z-index: 10;
}

#uz-trade-overlay .confirmation-dialog .confirmation-dialog__footer {
  margin-bottom: var(--space-3);
  font-size: var(--fs-text-md);
}

@media (min-width: 1280px) {
  #uz-iat-overlay .confirmation-dialog .confirmation-dialog__footer,
  #uz-trade-overlay .confirmation-dialog .confirmation-dialog__footer {
    margin-bottom: var(--space-4);
  }
}

/* ── Icons: central sprite + <use>. currentColor for stroke; default SVG fill
   is black — set fill:none on hosts so stroke-only glyphs stay hollow (paths
   that need fill keep fill="currentColor" in the sprite). */

.sidebar__nav-icon,
.view__nav-btn-icon,
.tab-bar__icon,
.product-item__icon,
.list-item__icon,
.list-item__chevron,
.show-all-btn__icon,
.performance-card__product-icon,
.carousel__arrow-icon,
.booking-row__icon,
.bookings-card__pending-icon,
.profile-placeholder__icon,
.form-field__edit-icon,
.form-field__calendar-icon,
.form-field__clear-icon,
.form-field__optional-icon,
.amount-input__chevron,
.amount-input__clear-icon,
.debit-account__icon,
.form-sheet__account-icon,
.form-sheet__more-icon,
.form-sheet__preview-icon,
.debit-account__chevron,
.modal__back-icon,
.modal__close-icon,
.recipient-search__clear-icon,
.recipient-search__result-icon,
.recipient-search__result-chevron,
.expander__leading-icon,
.expander__chevron,
.payment-details__edit-icon,
.payment-details__fn-icon,
.payment-details__account-icon,
.payment-details__download-icon,
.cc-theme-card__trash-icon,
.cc-theme-card__icon {
  display: block;
  flex-shrink: 0;
  color: var(--color-fg);
  fill: none;
  overflow: visible;
}

.action-button__icon {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--color-btn-primary-fg);
  fill: none;
  overflow: visible;
}

.sidebar__logout-icon {
  display: block;
  flex-shrink: 0;
  fill: none;
  overflow: visible;
  color: var(--color-btn-primary-fg);
}

.sidebar__nav-icon > use,
.view__nav-btn-icon > use,
.tab-bar__icon > use,
.product-item__icon > use,
.list-item__icon > use,
.list-item__chevron > use,
.show-all-btn__icon > use,
.performance-card__product-icon > use,
.carousel__arrow-icon > use,
.booking-row__icon > use,
.bookings-card__pending-icon > use,
.profile-placeholder__icon > use,
.form-field__edit-icon > use,
.form-field__calendar-icon > use,
.form-field__clear-icon > use,
.amount-input__chevron > use,
.amount-input__clear-icon > use,
.debit-account__icon > use,
.form-sheet__account-icon > use,
.form-sheet__more-icon > use,
.form-sheet__preview-icon > use,
.debit-account__chevron > use,
.modal__back-icon > use,
.modal__close-icon > use,
.action-button__icon > use,
.sidebar__logout-icon > use,
.recipient-search__icon-svg > use,
.recipient-search__clear-icon > use,
.recipient-search__result-icon > use,
.recipient-search__result-chevron > use,
.chip__icon > use,
.expander__leading-icon > use,
.expander__chevron > use,
.payment-details__edit-icon > use,
.payment-details__fn-icon > use,
.payment-details__account-icon > use,
.payment-details__download-icon > use,
.cc-theme-card__trash-icon > use,
.cc-theme-card__icon > use {
  fill: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Restore expander leading-icon to brand primary (overridden by the generic host block above) */
.expander__leading-icon { color: var(--color-btn-primary-bg); }

/* Sprite host: avoid hidden/display:none on defs — same-document <use> fails in WebKit */
#uzbank-icon-defs.uzbank-icon-defs {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* ── Tablet-wide dashboard: 1024–1279px ─────────────────
   Tab bar for app nav; 2-column content grid (designs/screens/payments desktop-default). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .body[data-screen="overview"] .main-content__inner,
  .body[data-screen="payments"] .main-content__inner {
    width: 100%;
    max-width: 60rem;
    min-width: 0;
    margin-inline: auto;
  }

  .view__nav[data-scroll-edge-nav] {
    top: 0;
    z-index: 20;
  }

  .view--active.view--overview,
  .view--active.view--payments {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--view-stack-gap);
    align-items: start;
  }

  .view--active.view--overview .view__nav,
  .view--active.view--payments .view__nav,
  .body[data-screen="overview"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="payments"] .view__nav[data-scroll-edge-nav],
  .view--active.view--payments .action-buttons,
  .view--active.view--overview .section-card,
  .view--active.view--payments .section-card {
    margin-bottom: 0;
  }

  .body[data-screen="overview"] .view--active.view--overview > .view__main {
    display: contents;
  }

  .body[data-screen="overview"] .overview__primary {
    grid-column: 1;
  }

  .body[data-screen="overview"] .view--active.view--overview > .view__sidebar {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: var(--view-stack-gap);
    min-width: 0;
  }

  .view--active.view--overview > .view__main,
  .view--active.view--payments > .view__main {
    display: contents;
  }

  .view--active.view--overview .view__nav,
  .view--active.view--payments .view__nav,
  .view--active.view--payments .action-buttons {
    grid-column: 1 / -1;
  }

  .body[data-screen="overview"] .view--active.view--overview .view__nav {
    grid-column: 1 / -1;
  }

  .view--active.view--payments > .view__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--view-stack-gap);
    width: 100%;
    min-width: 0;
  }
}

/* ── Desktop breakpoint ───────────────────────────────── */

/* Desktop shell: sidebar, hide tab bar, dashboard grid — from 1280px viewport */
@media (min-width: 1280px) {
  /* Lock shell to one viewport height: main scrolls inside; sidebar stays full-height so footer sticks to bottom. */
  .app {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
  }

  .sidebar {
    display: flex;
    align-self: stretch;
    min-height: 100%;
    height: 100%;
  }

  .tab-bar {
    display: none;
  }

  .main-content {
    padding-bottom: 0;
  }

  /* 2↔3 column threshold: query the flex main region, not .main-content__inner —
     inline-size containment on the inner was preventing it from reaching max-width: 1440px. */
  .body[data-screen="overview"] .main-content,
  .body[data-screen="payments"] .main-content {
    container-type: inline-size;
    container-name: main;
  }

  /* Keep horizontal gutter on desktop (32dp / 2rem); zero padding was collapsing
     side margins and made @container main think the main was wider than it felt. */
  .main-content__inner {
    padding: var(--space-6) var(--space-5);
  }

  /* Dashboard inner: border box may exceed 1440px by horizontal padding so the
     grid/content area can use a full 1440px between gutters. */
  .body[data-screen="overview"] .main-content__inner,
  .body[data-screen="payments"] .main-content__inner {
    max-width: min(calc(1440px + 2 * var(--space-5)), 100%);
    width: 100%;
    margin-inline: auto;
  }

  /* Desktop: standard-button/small-secondary — icon + “Search” label. */
  .all-bookings__search-btn.uz-btn--secondary {
    width: auto;
    height: auto;
    min-width: 0;
    min-height: calc(var(--btn-height-sm, 2rem) * var(--appearance-font-scale, 1));
    max-width: none;
    max-height: none;
    padding: var(--btn-pad-y-sm, 0) var(--btn-pad-x-sm, var(--space-2));
    border-radius: var(--radius-small);
    background-color: var(--color-btn-secondary-bg);
  }

  .all-bookings__search-btn .all-bookings__search-label {
    display: inline;
  }

  /* Desktop sticky nav — card chrome only while content scrolls below. */
  .body[data-screen="overview"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="payments"] .view__nav[data-scroll-edge-nav] {
    border: 0.0625rem solid transparent;
    border-radius: var(--radius-regular);
    box-sizing: border-box;
  }

  .body[data-screen="account-details"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="investment-product-details"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="details-of-position"] .view__nav[data-scroll-edge-nav] {
    top: 0;
    border: 0.0625rem solid transparent;
    border-radius: var(--radius-regular);
    box-sizing: border-box;
  }

  .body[data-screen="profile"] .profile__sticky-header {
    top: 0;
    border: 0.0625rem solid transparent;
    border-radius: var(--radius-regular);
    box-sizing: border-box;
  }

  .body[data-screen="overview"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after,
  .body[data-screen="payments"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after {
    top: var(--view-nav-sticky-top);
    background-color: var(--color-bg-secondary);
    border-color: var(--color-separator);
    box-shadow: var(--shadow-content-indication-after);
    overflow: visible;
  }

  .body[data-screen="account-details"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after,
  .body[data-screen="investment-product-details"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after,
  .body[data-screen="details-of-position"] .view__nav[data-scroll-edge-nav].is-scroll-edge--after,
  .body[data-screen="profile"]:not(.profile--tabs-merged) .profile__sticky-header.is-scroll-edge--after {
    top: var(--view-nav-sticky-top);
    background-color: var(--color-bg-secondary);
    border-color: var(--color-separator);
    border-radius: var(--radius-regular);
    box-shadow: var(--shadow-content-indication-after);
    overflow: visible;
  }

  .body[data-screen="all-bookings"] .all-bookings__sticky-header {
    top: 0;
    border: 0.0625rem solid transparent;
    box-sizing: border-box;
  }

  .body[data-screen="all-bookings"]:not(.all-bookings--month-merged)
    .all-bookings__sticky-header.is-scroll-edge--after {
    top: var(--view-nav-sticky-top);
    background-color: var(--color-bg-secondary);
    border-color: var(--color-separator);
    border-radius: var(--radius-regular);
    box-shadow: var(--shadow-content-indication-after);
    overflow: visible;
  }

  .view--active.view--overview,
  .view--active.view--payments {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--view-stack-gap);
    align-items: start;
  }

  .body[data-screen="overview"] .view--active.view--overview .view__nav,
  .body[data-screen="payments"] .view--active.view--payments .view__nav,
  .body[data-screen="overview"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="payments"] .view__nav[data-scroll-edge-nav],
  .body[data-screen="overview"] .view--active.view--overview .section-card,
  .body[data-screen="payments"] .view--active.view--payments .section-card {
    margin-bottom: 0;
  }

  .body[data-screen="overview"] .view--active.view--overview > .view__main {
    display: contents;
  }

  .body[data-screen="overview"] .overview__primary {
    grid-column: 1;
  }

  .body[data-screen="overview"] .view--active.view--overview > .view__sidebar {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: var(--view-stack-gap);
    width: 100%;
    min-width: 0;
  }

  .body[data-screen="payments"] .view--active.view--payments > .view__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--view-stack-gap);
    width: 100%;
    min-width: 0;
  }

  .action-buttons {
    gap: var(--space-7);
  }

  /* Payments: flatten main wrapper; overview keeps column 1 in .overview__primary. */
  .body[data-screen="payments"] .view--active.view--payments > .view__main {
    display: contents;
  }

  .body[data-screen="overview"] .view--active.view--overview .view__nav,
  .body[data-screen="payments"] .view--active.view--payments .view__nav,
  .body[data-screen="payments"] .view--active.view--payments .action-buttons {
    grid-column: 1 / -1;
  }

  .body[data-screen="overview"] .view--active.view--overview .view__nav {
    grid-column: 1 / -1;
  }
}

/* Overview: three equal columns when main region is wide (≥ 1200px). */
@media (min-width: calc(1200px + 16rem)) {
  @container main (min-width: 1200px) {
    .body[data-screen="overview"] .view--active.view--overview {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .body[data-screen="overview"] .view--active.view--overview > .view__sidebar {
      display: contents;
    }

    .body[data-screen="overview"] .view--active.view--overview .view__nav {
      grid-column: 1 / -1;
    }

    .body[data-screen="overview"] .overview__primary {
      grid-column: 1;
      grid-row: 2;
    }

    .body[data-screen="overview"] .view--active.view--overview .section-card--performance {
      grid-column: 2;
      grid-row: 2;
    }

    .body[data-screen="overview"] .view--active.view--overview .section-card--overview-offers {
      grid-column: 3;
      grid-row: 2;
    }
  }
}

/* ── Multi-page shell & payment steps ───────── */

a.action-button {
  text-decoration: none;
  color: inherit;
}

a.product-item {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

a.list-item {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

a.product-item:focus-visible,
a.list-item:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.sidebar__logo a {
  text-decoration: none;
  color: inherit;
}

.payment-page-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: var(--space-4) 0;
}

.payment-page-shell.modal-shell {
  transform: none !important;
}

.payment-page-modal.modal {
  max-height: none;
}

.modal__body--page-static {
  position: relative;
  overflow-y: visible;
  flex: 0 1 auto;
  min-height: auto;
}

.modal__nav a.modal__back,
.modal__nav a.modal__close {
  text-decoration: none;
}

a.view__nav-btn {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}

.confirmation-page-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: min(70vh, 40rem);
  padding: var(--space-4) 0;
}

a.btn-primary {
  text-decoration: none;
  box-sizing: border-box;
}

/* ============================================================================
 * Profile design-system settings
 * ========================================================================= */

.profile-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 64rem;
}

.profile-topic-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-bottom: var(--view-stack-gap);
  padding: 0 var(--space-3);
}

.profile-topic-bar[data-profile-topic-bar] {
  opacity: 1;
  transition: opacity 0.12s var(--profile-tabs-merge-ease, ease-in-out);
}

/* Keep docked copy invisible until merge (must follow .profile-topic-bar rules). */
.body[data-screen="profile"] .profile-topic-bar--docked {
  margin-bottom: 0;
  opacity: 0;
}

.body.profile--tabs-merged[data-screen="profile"] .profile-topic-bar--docked {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.06s;
}

.body.profile--tabs-merging[data-screen="profile"] .profile-topic-bar--docked {
  transition-delay: 0s;
  opacity: 0;
}

.profile-topic-bar .profile-topic-tabs.segmented {
  width: 100%;
  max-width: 26.25rem; /* 420px — Figma segmented width */
  margin-inline: auto;
}

.profile-settings__header,
.profile-design-panel__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-settings__title,
.profile-design-panel__title {
  margin: 0;
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h6);
  color: var(--color-fg);
}

.profile-settings__subtitle,
.profile-design-panel__subtitle {
  margin: 0;
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
  max-width: 56rem;
}

.profile-topic-tabs.segmented {
  /* Use shared segmented track token so custom Colors overrides track correctly */
  background-color: var(--color-segmented-track-bg);
}

.profile-topic-tabs.segmented .segmented__option:not(.segmented__option--active) {
  background-color: transparent;
}

.profile-topic-tabs__option {
  flex: 1 1 0;
  opacity: 0.72;
}

.profile-topic-tabs__option.segmented__option--active {
  opacity: 1;
}

.profile-panel[hidden] {
  display: none !important;
}

.profile-panel--active {
  display: block;
}

.profile-design-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.profile-bullet-list {
  margin: 0;
  padding-left: 1.5rem;
  max-width: 28rem;
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.profile-bullet-list li + li {
  margin-top: 0;
}

.profile-section-title {
  margin: 0;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.profile-legibility__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-scale-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.profile-scale-card {
  width: 100%;
  min-height: 6rem;
  padding: var(--space-4);
  border: 1px solid var(--color-separator);
  border-radius: var(--radius-regular);
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
}

.profile-scale-card:hover {
  background-color: var(--color-surface-state-hover);
}

.profile-scale-card:active {
  transform: translateY(1px);
}

.profile-scale-card:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.profile-scale-card--active {
  border: 2px solid var(--color-fg);
}

.profile-scale-card__eyebrow {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.profile-scale-card__title {
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.profile-scale-card__meta {
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.profile-legibility__manual {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.profile-legibility__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.profile-font-field {
  width: 100%;
}

.profile-font-slider {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.profile-font-slider__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.profile-font-slider__input {
  width: 100%;
  margin: var(--space-1) 0 0;
}

.profile-legibility-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-1);
  border-radius: var(--radius-regular);
  background: var(--color-bg);
}

.profile-legibility-preview__label {
  padding: 0 var(--space-4);
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.profile-preview-dialog__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

.profile-preview-dialog__title {
  margin: 0;
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.profile-preview-dialog__text {
  margin: 0;
  padding-top: var(--space-3);
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.profile-preview-dialog__actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
}

.profile-preview-dialog__actions .cc-btn-action {
  flex: 1 1 0;
}

.profile-persona__header {
  gap: var(--space-2);
}

@media (max-width: 62rem) {
  /* Keep Quick preset tiles in one horizontal row (Figma mobile). */
  .profile-scale-presets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .profile-scale-card {
    min-height: 0;
    padding: var(--space-3);
    gap: var(--space-2);
  }

  .profile-scale-card__title {
    font-size: var(--fs-text-md);
  }

  .profile-scale-card__meta {
    font-size: var(--fs-text-xs);
  }

  .profile-legibility__manual {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.profile-persona__question {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-text-lg);
  line-height: var(--lh-text);
  font-weight: var(--fw-bold);
  color: var(--color-fg);
}

.profile-persona-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(16rem, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.profile-persona-card {
  --persona-card-min-h: 26.25rem; /* 420px — Figma card height */
  position: relative;
  display: block;
  width: 100%;
  min-height: var(--persona-card-min-h);
  height: var(--persona-card-min-h);
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-fg) 18%, transparent);
  border-radius: var(--radius-regular);
  background: var(--color-bg);
  color: var(--color-fg);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.05s;
}

.profile-persona-card:active {
  transform: translateY(1px);
}

.profile-persona-card:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

/* No hover stroke — keep thin rest vs strong selected contrast (Figma). */
.profile-persona-card--active,
.profile-persona-card--active:hover {
  border: 2px solid var(--color-fg);
}

.profile-persona-card__label {
  position: absolute;
  z-index: 3;
  top: var(--space-4);
  left: var(--space-4);
  right: 3.5rem;
  margin: 0;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  font-weight: var(--fw-regular);
  color: var(--color-fg);
  pointer-events: none;
}

.profile-persona-card__radio {
  position: absolute;
  z-index: 3;
  top: var(--space-4);
  right: var(--space-4);
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-fg);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
}

.profile-persona-card__radio-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: var(--color-fg);
  opacity: 0;
  transition: opacity 0.15s;
}

.profile-persona-card--active .profile-persona-card__radio-dot {
  opacity: 1;
}

.profile-persona-card__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--color-bg);
}

.profile-persona-card__stage-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-text-sm);
  color: var(--color-fg-secondary);
  /* Visible until Spline mounts — otherwise a failed module load leaves a blank stage. */
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.2s;
}

.profile-persona-card__stage--ready .profile-persona-card__stage-fallback {
  opacity: 0;
}

.profile-persona-card__stage--loading .profile-persona-card__stage-fallback {
  opacity: 0.7;
}

.profile-persona-card__stage--error .profile-persona-card__stage-fallback {
  opacity: 0.7;
}

.profile-persona-card__canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  background: transparent !important;
}

/* Hide Spline watermark badge inside cards */
.profile-persona-card__stage a[href*="spline.design"] {
  display: none !important;
}

.profile-persona-card__glass {
  position: absolute;
  z-index: 2;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-regular);
  background: color-mix(in srgb, var(--color-fg) 12%, transparent);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  border: 1px solid color-mix(in srgb, var(--color-fg) 16%, transparent);
  pointer-events: none;
}

.profile-persona-card__name {
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.profile-persona-card__description {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.profile-persona-card__description span::before {
  content: "• ";
}

@media (max-width: 62rem) {
  .profile-persona-grid {
    grid-template-columns: 1fr;
  }

  .profile-persona-card {
    --persona-card-min-h: 22.5rem;
    height: var(--persona-card-min-h);
  }
}

/* ============================================================================
 * Account information — designs/screens/account-information
 * Hosted in #uz-account-information-overlay (same stacking + shell as payment).
 *
 * Icons: summary + “Share information” use inlined SVG paths so they render even when
 * `#uzbank-icon-defs` is absent (Storybook/isolated HTML). Row actions still use
 * `<use href="#i-copy">` and require the sprite on full app pages.
 * ============================================================================ */

#uz-account-information-overlay.modal-overlay--active {
  z-index: 101;
}

.modal-overlay .modal.modal--account-information .modal__body.modal__body--account-information {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  gap: 0;
  box-sizing: border-box;
}

.account-information__scroll-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* Figma Section / Content — space/4 (16px) between blocks */
  padding: var(--space-2) var(--space-3);
  box-sizing: border-box;
}

.modal--account-information .account-information__tabs {
  padding-inline: 0;
  padding-top: 0;
  margin-bottom: 0;
}

.modal--account-information .account-information__summary,
.view--account-information .account-information__summary {
  margin-bottom: 0;
}

.account-information__summary-card.list-item--group-account {
  margin: 0;
}

.modal--account-information .account-information__share-row,
.view--account-information .account-information__share-row {
  flex-shrink: 0;
  margin-bottom: 0;
  padding-block: var(--space-2); /* Figma Function Bar — space/3 (12px) */
}

.account-information__share-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* Inactive tab label is regular; active stays medium (segmented default). */
.account-information__tabs .segmented__option:not(.segmented__option--active) {
  font-weight: var(--fw-regular);
}

@media (max-width: 1279px) {
  .modal--account-information .modal__back {
    display: none;
  }

  .view--account-information .view__nav .view__nav-btn--leading.view__back {
    visibility: hidden;
    pointer-events: none;
  }
}

.modal--account-information .account-information__scroll {
  flex: 1 1 auto;
  min-height: 0;
  margin-inline: 0;
  padding-inline: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.view--account-information {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
}

.view--account-information .view__nav {
  margin-bottom: 0;
}

.view--account-information .view__main.account-information {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  padding: 0;
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.view--account-information .account-information__footer {
  padding: var(--space-3);
  margin-top: 0;
}

.account-information__tabs {
  width: 100%;
  margin-bottom: 0;
}

.account-information__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-inline: 0;
  padding-inline: 0;
  -webkit-overflow-scrolling: touch;
}

.account-information__panel[hidden] {
  display: none !important;
}

.account-information__panel {
  padding-bottom: var(--space-4);
}

/* Detail rows — form-field readonly (88dp field + 16dp between fields per Figma Section). */
.account-information__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* Figma Section — space/4 between each TextField */
}

/* Each readonly row is an 88dp frame: label band + value row + separator at bottom. */
.account-information__fields .form-field--readonly {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.25rem; /* Figma TextField — space/1 (4px) label to value row */
  min-height: 5.5rem; /* 88dp — designs/screens/account-information */
  box-sizing: border-box;
}

.account-information__fields .form-field--readonly:has(.form-field__row--multiline) {
  min-height: auto;
  grid-template-rows: auto auto;
}

.account-information__fields .form-field--readonly .form-field__label {
  flex: 0 0 auto;
  display: block;
}

.account-information__fields .form-field--readonly .form-field__row {
  display: flex;
  align-self: stretch;
  align-items: center;
  height: auto;
  min-height: 2.5rem;
  max-height: none;
  gap: var(--space-3); /* Figma Input Text — space/4 value to icon */
  padding: 0;
  margin: 0;
  border-bottom: 0.0625rem solid var(--color-separator);
  box-sizing: border-box;
}

.account-information__fields .form-field--readonly .form-field__row--multiline {
  align-items: flex-start;
  padding-block: 0.25rem var(--space-3); /* Figma multiline — pt 4px, pb 16px */
}

.account-information__fields .form-field--readonly .form-field__edit {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem; /* Figma icon-only — 4px pad, 24px glyph */
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.account-information__fields .form-field--readonly .form-field__row--multiline .form-field__edit {
  height: 2rem;
  align-self: flex-start;
}

.account-information__conditions-intro {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.account-information__conditions-body {
  margin: 0;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.account-information__footer {
  flex-shrink: 0;
}

/* ============================================================================
 * Share information — designs/screens/share-information
 * Stacked above #uz-account-information-overlay (z-index 102).
 * ============================================================================ */

#uz-share-information-overlay.modal-overlay--active {
  z-index: 102;
}

/* Share modal: not payment steps — static body + inner scroll (avoids clipped content bleed-through). */
.modal--share-information > .modal__body.modal__body--share-information {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
  gap: var(--space-3);
  background-color: var(--color-bg);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.share-information__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Vector QR — 192×192 (12rem), no border; bordered cards are section-card only (designs/screens/share-information). */
.share-information__qr {
  display: block;
  width: 12rem;
  height: 12rem;
  aspect-ratio: 1;
  flex-shrink: 0;
  background-color: var(--color-fg);
  mask-image: url('../assets/share-information-qr.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-image: url('../assets/share-information-qr.svg');
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.share-information__share-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.share-information__intro {
  margin: 0;
  flex-shrink: 0;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.share-information__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}

.share-information__section-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-regular);
  border: 0.0625rem solid color-mix(in srgb, var(--color-btn-primary-bg) 20%, transparent);
  background-color: var(--color-bg-secondary);
  box-sizing: border-box;
}

@supports not (border: 1px solid color-mix(in srgb, red 20%, transparent)) {
  .share-information__section-card {
    border-color: rgba(0, 21, 126, 0.2);
  }
}

.share-information__section-title {
  margin: 0;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

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

.share-information__fields .form-field--readonly {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.25rem;
  min-height: 5.5rem;
  box-sizing: border-box;
}

.share-information__fields .form-field--readonly:has(.form-field__row--multiline) {
  min-height: auto;
  grid-template-rows: auto auto;
}

.share-information__fields .form-field--readonly .form-field__label {
  flex: 0 0 auto;
  display: block;
}

.share-information__fields .form-field--readonly .form-field__row {
  display: flex;
  align-self: stretch;
  align-items: center;
  height: auto;
  min-height: 2.5rem;
  max-height: none;
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  border-bottom: 0.0625rem solid var(--color-separator);
  box-sizing: border-box;
}

.share-information__fields .form-field--readonly .form-field__row--multiline {
  align-items: flex-start;
  padding-block: 0.25rem var(--space-3);
}

.share-information__fields .form-field--readonly .form-field__edit {
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
  margin: 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.share-information__fields .form-field--readonly .form-field__row--multiline .form-field__edit {
  height: 2rem;
  align-self: flex-start;
}

/* ============================================================================
 * Contrast checker (embedded in Profile)
 *
 * Ported from /Users/uz-macbookpro-m4/TOKENS/colour-contrast-checker_04 with
 * a `cc-` BEM-style prefix so it cannot collide with the host app's classes.
 * The checker reads the live --color-bg / --color-fg vars (which the picker
 * itself overrides via inline style on the html element), so the preview
 * stays in sync with the rest of the page.
 * ========================================================================= */

.contrast-checker {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-4);
}

/* Demo-data reset block (Profile, beneath the contrast checker) */
.demo-reset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-separator);
  max-width: 56rem;
}

.demo-reset__title {
  margin: 0;
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h6);
}

.demo-reset__subtitle {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.contrast-checker__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contrast-checker__title {
  margin: 0;
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h6);
}

.contrast-checker__subtitle {
  margin: 0;
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
  max-width: 56rem;
}

.cc-section {
  display: flex;
  width: 100%;
}

/* Result row: preview + ratio | WCAG badges; stacks on narrow viewports */
.cc-section--result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-9);
}

.cc-result-left {
  display: flex;
  align-items: flex-end;
  gap: var(--space-5);
  min-width: 0;
}

.cc-preview-box {
  width: 12.25rem;
  height: 12.25rem;
  border: 2px solid var(--color-fg);
  border-radius: var(--radius-regular);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.625rem;
  background-color: var(--color-bg);
  transition: background-color 0.15s, border-color 0.15s;
}

.cc-preview-text {
  font-size: 7rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.21rem;
  color: var(--color-fg);
  transition: color 0.15s;
}

.cc-ratio-block {
  padding-bottom: var(--space-4);
}

.cc-contrast-ratio {
  font-size: 5rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.15rem;
  color: var(--color-fg);
}

.cc-result-right {
  min-width: 0;
  justify-self: stretch;
}

.cc-badge-stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: flex-start;
}

.cc-badge-labeled {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
}

.cc-badge {
  width: 5.75rem;
  min-height: 2.75rem;
  border: 1px solid var(--color-fg);
  border-radius: var(--radius-small);
  background: var(--color-fg);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  cursor: default;
  font-family: inherit;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
  padding: 0.5rem 0.75rem;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.cc-badge.cc-badge--fail { opacity: 0.35; }
.cc-badge.cc-badge--pass { opacity: 1; }
.cc-badge-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }
.cc-badge-arrow {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.cc-badge.cc-badge--fail .cc-badge-icon { display: none; }

.cc-badge-label {
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
  white-space: nowrap;
  color: var(--color-fg);
}

/* Input row */
.cc-section--input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

/* Saved themes (Profile) */
.cc-section--saved {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-separator);
  max-width: 56rem;
}

.cc-saved__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cc-saved__title {
  margin: 0;
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
}

.cc-saved__subtitle {
  margin: 0;
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.cc-saved__grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 200px));
  gap: var(--space-4);
}

.cc-theme-card {
  position: relative;
  width: 100%;
  min-width: 156px;
  max-width: 200px;
  min-height: 9rem;
  padding: var(--space-4);
  border-radius: var(--radius-regular);
  border: 1px solid color-mix(in srgb, var(--color-fg) 20%, transparent);
  background: var(--color-bg);
  color: var(--color-fg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, transform 0.05s;
}

.cc-theme-card:hover {
  background: color-mix(in srgb, var(--color-bg) 92%, var(--color-fg) 8%);
}

.cc-theme-card:active {
  transform: translateY(1px);
}

.cc-theme-card:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.cc-theme-card--selected {
  border: 2px solid var(--color-fg);
}

.cc-theme-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
}

.cc-theme-card__title {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
}

.cc-theme-card__actions {
  flex: 0 0 auto;
}

.cc-theme-card__trash {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-small);
  color: var(--color-fg);
  cursor: pointer;
}

.cc-theme-card__trash:hover {
  background-color: var(--color-surface-state-hover);
}

.cc-theme-card__trash:active {
  background-color: var(--color-surface-state-pressed);
}

.cc-theme-card__trash-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  color: var(--color-fg);
  fill: none;
  overflow: visible;
}

.cc-theme-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.25rem;
  min-width: 0;
}

.cc-theme-card__swatch {
  display: block;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--color-separator);
}

.cc-theme-card__row-label {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--space-2);
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
  white-space: nowrap;
}

.cc-theme-card--add {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.cc-theme-card__plus {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-fg) 20%, transparent);
  display: grid;
  place-items: center;
}

.cc-theme-card__icon {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  color: var(--color-fg);
  fill: none;
}

.cc-theme-card__label {
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
}

.cc-input-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.cc-input-field {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cc-field-label {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  color: var(--color-fg-secondary);
}

.cc-hex-input {
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
}

.cc-tab-control {
  display: flex;
  flex-direction: column;
}

.cc-tabs { display: flex; }

.cc-tab {
  height: 2.5rem;
  padding: 0 var(--space-4);
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-fg);
  font-family: inherit;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, border-color 0.15s, color 0.15s;
}

.cc-tab:hover { opacity: 0.8; }

.cc-tab.cc-tab--active {
  opacity: 1;
  font-weight: var(--fw-medium);
  border-bottom-color: var(--color-fg);
}

.cc-tab-body {
  display: none;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
}

.cc-tab-body.cc-tab-body--active { display: flex; }

.cc-slider-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cc-slider-label {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  color: var(--color-fg-secondary);
}

.cc-slider-value {
  color: var(--color-fg);
  font-variant-numeric: tabular-nums;
}

.cc-slider-track-wrapper { width: 100%; }

/* Slider — designs/components/slider/variants/default
   Track 4px; filled range solid fg; inactive track fg @ 40%;
   thumb is a pill (42×24, rx 12), not a circle. */
.cc-color-slider {
  --slider-thumb-w: 2.625rem; /* 42px */
  --slider-thumb-h: 1.5rem;   /* 24px */
  --slider-track-h: 0.25rem;  /* 4px */
  width: 100%;
  height: var(--slider-thumb-h);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.cc-color-slider:focus-visible {
  outline: none;
}

.cc-color-slider:focus-visible::-webkit-slider-thumb {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.cc-color-slider:focus-visible::-moz-range-thumb {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.cc-color-slider::-webkit-slider-runnable-track {
  height: var(--slider-track-h);
  border-radius: var(--radius-small, 0.25rem);
  background: linear-gradient(
    to right,
    var(--color-fg) 0%,
    var(--color-fg) var(--cc-progress, 0%),
    color-mix(in srgb, var(--color-fg) 40%, transparent) var(--cc-progress, 0%),
    color-mix(in srgb, var(--color-fg) 40%, transparent) 100%
  );
}

.cc-color-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--slider-thumb-w);
  height: var(--slider-thumb-h);
  margin-top: calc((var(--slider-track-h) - var(--slider-thumb-h)) / 2);
  border: 2px solid var(--color-fg);
  border-radius: var(--radius-pill);
  background: var(--color-fg);
  box-sizing: border-box;
  cursor: pointer;
}

.cc-color-slider::-moz-range-track {
  height: var(--slider-track-h);
  border-radius: var(--radius-small, 0.25rem);
  border: none;
  background: linear-gradient(
    to right,
    var(--color-fg) 0%,
    var(--color-fg) var(--cc-progress, 0%),
    color-mix(in srgb, var(--color-fg) 40%, transparent) var(--cc-progress, 0%),
    color-mix(in srgb, var(--color-fg) 40%, transparent) 100%
  );
}

.cc-color-slider::-moz-range-thumb {
  width: var(--slider-thumb-w);
  height: var(--slider-thumb-h);
  border: 2px solid var(--color-fg);
  border-radius: var(--radius-pill);
  background: var(--color-fg);
  box-sizing: border-box;
  cursor: pointer;
}

/* Action row */
.cc-section--action {
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cc-btn-action {
  height: 3rem;
  padding: 0 var(--space-4);
  border: 2px solid var(--color-fg);
  border-radius: var(--radius-regular);
  background: var(--color-fg);
  color: var(--color-bg);
  font-family: inherit;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
}

.cc-btn-action:hover { opacity: 0.85; }

.cc-btn-action--secondary {
  background: transparent;
  color: var(--color-fg);
}

/* Mobile: stack WCAG badges under preview + ratio; stack colour inputs */
@media (max-width: 48rem) {
  .cc-section--result {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: start;
  }
  .cc-result-left {
    gap: var(--space-4);
    width: 100%;
  }
  .cc-result-right {
    width: 100%;
  }
  .cc-preview-box {
    width: 7.5rem;
    height: 7.5rem;
  }
  .cc-preview-text { font-size: 3.5rem; }
  .cc-contrast-ratio { font-size: 3rem; }
  .cc-badge-stack {
    gap: var(--space-2);
    justify-content: flex-start;
  }
  .cc-badge {
    width: auto;
    min-width: 0;
    min-height: calc(var(--btn-height-sm, 2rem) * var(--appearance-font-scale, 1));
    padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
    gap: var(--space-2);
    font-size: var(--fs-text-sm);
  }
  .cc-section--input {
    grid-template-columns: 1fr;
  }
}

/* ── Form field bottom sheets (components/menu/menu-countries, menu-accounts, mobile) ─ */

.form-field__select-sheet-trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-small);
  background: transparent;
  cursor: pointer;
}

dialog.form-sheet {
  margin: 0;
  border: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  z-index: 200;
}

/* Closed <dialog> must stay hidden — author `display:flex` must not override UA. */
dialog.form-sheet:not([open]) {
  display: none !important;
}

dialog.form-sheet[open] {
  /* UA dialog defaults use fit-content + margin:auto → centered floater. Force full viewport
     so flex-end pins the panel to the bottom (true bottom sheet). */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-width: 100dvw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0.25rem;
  border: none;
  background: transparent;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  /* Visible overflow so the sliding panel isn't clipped below the viewport while translating up —
     hiding it made the slide read as a tiny twitch (almost all frames were clipped). Panel still clips its own rounding. */
  overflow: visible;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  --form-sheet-slide-depth: calc(100vh + 1rem + env(safe-area-inset-bottom, 0px));
}

@supports (height: 100dvh) {
  dialog.form-sheet[open] {
    --form-sheet-slide-depth: calc(100dvh + 1rem + env(safe-area-inset-bottom, 0px));
  }
}

dialog.form-sheet::backdrop {
  background: var(--color-overlay-scrim);
  /* Match payment `.modal-shell` timing (see openModalVisual / modal-shell transitions). */
  animation: form-sheet-backdrop-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes form-sheet-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes form-sheet-backdrop-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.form-sheet__panel {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  margin-top: auto;
  align-self: center;
  width: 100%;
  max-width: 26.25rem; /* 420px — components/menu/menu-countries / menu-accounts (desktop) */
  max-height: min(70vh, 32rem);
  /* Clip the sliding panel; scroll lives on .form-sheet__list so short lists don’t show a
     sheet-level scrollbar (and transform+overflow:auto doesn’t flicker a track on open). */
  overflow: hidden;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.25rem);
  /* Full radius: sheet sits in 4dp padded dialog */
  border-radius: var(--radius-regular);
  background-color: var(--color-bg);
  color: var(--color-fg);
  box-shadow: 0 0.25rem 1.5rem var(--color-modal-elevated-shadow);
}

dialog.form-sheet[open] .form-sheet__panel {
  /* `%` translates resolve from the panel box and can shrink to ~0 during the first frames;
     `--form-sheet-slide-depth` slides from fully below the fold (viewport-based). Same curve + duration as backdrop. */
  animation: form-sheet-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes form-sheet-panel-in {
  from {
    transform: translate3d(0, var(--form-sheet-slide-depth), 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* Dismiss — mirror payment modal-sheet exit (`modal-shell--closing`: ease-in, downward). */
dialog.form-sheet.form-sheet--closing[open]::backdrop {
  animation: form-sheet-backdrop-out 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

dialog.form-sheet.form-sheet--closing[open] .form-sheet__panel {
  animation: form-sheet-panel-out 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes form-sheet-panel-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, var(--form-sheet-slide-depth), 0);
  }
}

/* Desktop: anchored pop-up — width matches trigger, flips above/below; slides up into place */
@media (min-width: 1280px) {
  dialog.form-sheet[data-form-sheet-anchored="true"][open] {
    justify-content: flex-start;
    align-items: flex-start;
  }

  dialog.form-sheet[data-form-sheet-anchored="true"] .form-sheet__panel {
    position: fixed;
    left: var(--form-sheet-panel-left);
    width: var(--form-sheet-panel-width);
    max-width: none;
    max-height: var(--form-sheet-panel-max-height);
    margin: 0;
    margin-top: 0;
    flex: 0 0 auto;
    align-self: flex-start;
    box-sizing: border-box;
  }

  dialog.form-sheet[data-form-sheet-type="more-functions"][data-form-sheet-anchored="true"] .form-sheet__panel {
    width: max(var(--form-sheet-panel-width), 17.5rem);
    max-width: min(26.25rem, calc(100vw - 2rem));
  }

  dialog.form-sheet[data-form-sheet-placement="below"] .form-sheet__panel {
    top: var(--form-sheet-panel-top);
    bottom: auto;
  }

  dialog.form-sheet[data-form-sheet-placement="above"] .form-sheet__panel {
    bottom: var(--form-sheet-panel-bottom);
    top: auto;
  }

  dialog.form-sheet[data-form-sheet-anchored="true"][open] .form-sheet__panel {
    animation: form-sheet-panel-in-anchored 0.25s ease-out both;
  }

  dialog.form-sheet.form-sheet--closing[open][data-form-sheet-anchored='true'] .form-sheet__panel {
    animation: form-sheet-panel-out-anchored 0.25s ease-in forwards;
  }
}

@keyframes form-sheet-panel-in-anchored {
  from {
    transform: translateY(1rem);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes form-sheet-panel-out-anchored {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog.form-sheet[open] .form-sheet__panel {
    animation: none;
    opacity: 1;
    transform: none;
  }

  @media (min-width: 1280px) {
    dialog.form-sheet[data-form-sheet-anchored="true"][open] .form-sheet__panel {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  dialog.form-sheet::backdrop {
    animation: none;
    opacity: 1;
  }

  dialog.form-sheet.form-sheet--closing[open] .form-sheet__panel,
  dialog.form-sheet.form-sheet--closing[open]::backdrop {
    animation: none;
  }

  @media (min-width: 1280px) {
    dialog.form-sheet.form-sheet--closing[open][data-form-sheet-anchored='true'] .form-sheet__panel {
      animation: none;
    }
  }
}

/* Mobile / tablet: sheet spans viewport minus dialog padding (4dp each side). */
@media (max-width: 1279px) {
  .form-sheet__panel {
    align-self: stretch;
    max-width: none;
    width: 100%;
  }
}

.form-sheet__heading-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Desktop (≥1280): no nav-bar in sheet — title bar only */
.form-sheet__nav {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2);
  flex-shrink: 0;
}

.form-sheet__nav-start {
  display: block;
  width: 2.75rem;
  grid-column: 1;
}

.form-sheet__heading-display {
  margin: 0;
  grid-column: 2;
  justify-self: center;
  align-self: center;
  padding: 0 var(--space-2);
  text-align: center;
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.form-sheet__nav-close {
  grid-column: 3;
  justify-self: end;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-small);
  background: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.form-sheet__nav-close:hover {
  background-color: var(--color-surface-state-hover);
}

.form-sheet__nav-close:active {
  background-color: var(--color-surface-state-pressed);
}

.form-sheet__nav-close:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.form-sheet__nav-close-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.form-sheet__masthead-desktop {
  display: none;
  flex-shrink: 0;
}

.form-sheet__heading-display-desktop {
  margin: 0;
  padding: var(--space-3) var(--space-4) var(--space-2);
  text-align: center;
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.form-sheet__preview-wrap {
  flex-shrink: 0;
}

.form-sheet__preview {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-top: 0.0625rem solid var(--color-separator);
  border-bottom: 0.0625rem solid var(--color-separator);
  background-color: color-mix(in srgb, var(--color-bg) 75%, var(--color-separator));
}

.form-sheet__preview-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-fg);
}

.form-sheet__preview-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-sheet__preview-title {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--color-fg);
}

.form-sheet__preview-sub {
  font-size: var(--fs-text-xs);
  line-height: 1.4;
  color: var(--color-fg-secondary);
}

.form-sheet__preview-amount {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.form-sheet__preview-currency {
  font-size: var(--fs-text-xs);
  color: var(--color-fg-secondary);
  padding-bottom: 0.0625rem;
}

.form-sheet__preview-value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-fg);
}

@media (max-width: 1279px) {
  .form-sheet__nav {
    display: grid;
    grid-template-columns: 2.75rem 1fr 2.75rem;
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .form-sheet__masthead-desktop {
    display: block;
  }

  .form-sheet__heading-display-desktop {
    border-bottom: 0.0625rem solid var(--color-separator);
  }

  dialog.form-sheet[data-form-sheet-type="currency"] .form-sheet__masthead-desktop,
  dialog.form-sheet[data-form-sheet-type="select"] .form-sheet__masthead-desktop,
  dialog.form-sheet[data-form-sheet-type="country"] .form-sheet__masthead-desktop,
  dialog.form-sheet[data-form-sheet-type="account"] .form-sheet__masthead-desktop,
  dialog.form-sheet[data-form-sheet-type="more-functions"] .form-sheet__masthead-desktop,
  dialog.form-sheet[data-form-sheet-type="generic"] .form-sheet__masthead-desktop {
    padding-top: 0;
  }
}

.form-sheet__list {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* Do not stretch to fill leftover flex space — growth + max-height rounding makes `overflow:auto`
     think the list overflows and draws a scrollbar for short menus. Only grow when scrolling is needed. */
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.form-sheet__list[data-fs-scroll='off'] {
  overflow-y: hidden;
}

.form-sheet__row {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  border: none;
  background: none;
  font-family: var(--font-family);
  line-height: var(--lh-text);
  color: var(--color-fg);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.form-sheet__row:not(:last-child) {
  border-bottom: 0.0625rem solid var(--color-separator);
}

.form-sheet__row--country {
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
}

.form-sheet__row--font {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
}

.form-sheet__row--font[aria-selected="true"] {
  font-weight: var(--fw-bold);
}

.form-sheet__row--more-function {
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
}

.form-sheet__more-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.form-sheet__more-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.form-sheet__row--account {
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
}

.form-sheet__row:hover {
  background-color: var(--color-surface-state-hover);
}

.form-sheet__row:active {
  background-color: var(--color-surface-state-pressed);
}

.form-sheet__row:focus {
  outline: none;
}

.form-sheet__row:focus-visible {
  outline: 2px solid var(--color-input-stroke-focus);
  outline-offset: -2px;
}

@media (hover: none) and (pointer: coarse) {
  .form-sheet__row:focus,
  .form-sheet__nav-close:focus,
  dialog.basic-dialog-payment-exit .uz-btn:focus {
    outline: none;
  }
}

.form-sheet__account-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.form-sheet__account-info {
  flex: 1 1 auto;
  min-width: 0;
}

.form-sheet__account-name {
  display: block;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.form-sheet__account-iban {
  display: block;
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.form-sheet__account-amount {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
  padding-left: var(--space-1);
}

.form-sheet__account-currency {
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
  padding-bottom: 0.0625rem;
}

.form-sheet__account-value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
  text-align: right;
}

/* Payment exit confirmation (basic dialog — designs/screens/dialog-basic; above payment UI) */

dialog.basic-dialog-payment-exit {
  margin: 0;
  padding: max(var(--space-4), env(safe-area-inset-top, 0px))
    max(var(--space-4), env(safe-area-inset-right, 0px))
    max(var(--space-4), env(safe-area-inset-bottom, 0px))
    max(var(--space-4), env(safe-area-inset-left, 0px));
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  max-height: none;
  max-width: none;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 220;
}

dialog.basic-dialog-payment-exit[open] {
  display: grid;
  align-content: center;
  justify-items: center;
}

dialog.basic-dialog-payment-exit:not([open]) {
  display: none !important;
}

dialog.basic-dialog-payment-exit::backdrop {
  background: var(--color-overlay-scrim);
  animation: form-sheet-backdrop-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

dialog.basic-dialog-payment-exit[open] .basic-dialog-payment-exit__surface {
  animation: basic-dialog-surface-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

dialog.basic-dialog-payment-exit.basic-dialog-payment-exit--closing[open]::backdrop {
  animation: form-sheet-backdrop-out 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

dialog.basic-dialog-payment-exit.basic-dialog-payment-exit--closing[open] .basic-dialog-payment-exit__surface {
  animation: basic-dialog-surface-out 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Mobile / tablet: bottom sheet — align with form-sheet + confirmation dialog. */
@media (max-width: 1279px) {
  dialog.basic-dialog-payment-exit[open] {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-width: 100dvw;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    overflow: visible;
    overscroll-behavior: contain;
    padding: 0.25rem;
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
    --form-sheet-slide-depth: calc(100vh + 1rem + env(safe-area-inset-bottom, 0px));
  }

  @supports (height: 100dvh) {
    dialog.basic-dialog-payment-exit[open] {
      --form-sheet-slide-depth: calc(100dvh + 1rem + env(safe-area-inset-bottom, 0px));
    }
  }

  dialog.basic-dialog-payment-exit::backdrop {
    animation: form-sheet-backdrop-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  dialog.basic-dialog-payment-exit[open] .basic-dialog-payment-exit__surface {
    animation: form-sheet-panel-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    width: 100%;
    max-width: none;
    margin-top: auto;
    box-shadow: 0 0.25rem 1.5rem var(--color-modal-elevated-shadow);
  }

  dialog.basic-dialog-payment-exit.basic-dialog-payment-exit--closing[open] .basic-dialog-payment-exit__surface {
    animation: form-sheet-panel-out 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
  }
}

@keyframes basic-dialog-surface-in {
  from {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes basic-dialog-surface-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0) scale(0.97);
  }
}

.basic-dialog-payment-exit__surface {
  background-color: var(--color-bg);
  color: var(--color-fg);
  border-radius: var(--radius-regular);
  border: 0.0625rem solid var(--color-separator);
  padding: var(--dialog-padding-block) var(--dialog-padding-inline);
  width: min(22.5rem, 100%);
  box-sizing: border-box;
  box-shadow: 0 0.5rem 2rem var(--color-modal-elevated-shadow);
}

.basic-dialog-payment-exit__title {
  margin: 0 0 var(--space-2);
  padding: 0;
  font-size: var(--fs-text-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  text-align: center;
}

@media (min-width: 1280px) {
  .basic-dialog-payment-exit__title {
    margin-bottom: var(--space-3);
  }
}

.basic-dialog-payment-exit__message {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-text-md);
  line-height: 1.5;
  color: var(--color-fg-secondary);
  text-align: center;
}

@media (min-width: 1280px) {
  .basic-dialog-payment-exit__message {
    margin-bottom: var(--space-4);
  }
}

.basic-dialog-payment-exit__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (prefers-reduced-motion: reduce) {
  dialog.basic-dialog-payment-exit::backdrop,
  dialog.basic-dialog-payment-exit.basic-dialog-payment-exit--closing[open]::backdrop {
    animation: none;
    opacity: 1;
  }

  dialog.basic-dialog-payment-exit[open] .basic-dialog-payment-exit__surface,
  dialog.basic-dialog-payment-exit.basic-dialog-payment-exit--closing[open] .basic-dialog-payment-exit__surface {
    animation: none;
    transform: none;
  }
}

/* ==========================================================================
 * Payment details overlay
 * designs/screens/payment-details — domestic-payment-details +
 * internal-account-transfer-details (designs/screens/payment-details.json)
 * Entry: tap any .booking-row in the bookings card → js/payment-details.js
 * ========================================================================== */

/* Shared overlay chrome (mirrors account-information / share-information) */
.modal--payment-details {
  overflow: hidden;
  border-radius: var(--radius-regular);
}

/* Body: no step children → scroll directly */
.modal--payment-details .modal__body {
  position: static;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 0%;
  min-height: 0;
}

/* Variant visibility helpers ─────────────────────────── */
/* .pd--domestic hides internal-only blocks, and vice-versa */
.modal--payment-details.pd--domestic .pd-internal-only { display: none; }
.modal--payment-details.pd--internal .pd-domestic-only { display: none; }
/* .pd-pending-only items are hidden on non-pending (executed) payments */
.modal--payment-details:not(.pd--pending) .pd-pending-only { display: none; }

/* payment-details scroll container */
.payment-details {
  display: flex;
  flex-direction: column;
}

/* ── Amount hero ────────────────────────────────────── */

.payment-details__amount-hero {
  padding: var(--space-3) var(--space-3) var(--space-2);
}

.payment-details__amount-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.payment-details__amount-value {
  font-size: var(--fs-h5);          /* 1.75 rem / 28 dp */
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.payment-details__amount-currency {
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

/* Edit buttons are only visible for pending payments */
.modal--payment-details:not(.pd--pending) .payment-details__edit-btn { display: none; }

/* Recipient is read-only in payment details (Edit/Delete/Copy bar covers pending edits). */
.payment-details__edit-btn--to { display: none !important; }

/* Edit button (pencil) — reused on amount row and "to" row */
.payment-details__edit-btn {
  margin-left: auto;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-small);
  cursor: pointer;
  color: var(--color-fg);
  transition: background-color 0.15s ease;
}

.payment-details__edit-btn:hover  { background-color: var(--color-surface-state-hover);   }
.payment-details__edit-btn:active { background-color: var(--color-surface-state-pressed); }

.payment-details__edit-btn:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.payment-details__edit-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ── "To" section (domestic-payment-details only) ─── */

/* ── Divider rule: standalone for internal transfers ─── */
.payment-details__rule {
  height: 0.0625rem;
  background-color: var(--color-separator);
  margin: var(--space-2) var(--space-3);
}

/* ── Function bar: rule + action buttons for domestic payments ──────────────
   The rule is always shown (acts as the section divider).
   The action buttons (.payment-details__function-bar__actions) carry the
   pd-pending-only class so they appear only on pending domestic payments.
   ─────────────────────────────────────────────────────────────────────────── */
.payment-details__function-bar__rule {
  height: 0.0625rem;
  background-color: var(--color-separator);
  margin: var(--space-2) var(--space-3);
}

.payment-details__function-bar__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-3) var(--space-2);
}

/* Small FilledTonal standard button — icon leading + text label */
.payment-details__fn-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-1);
  height: var(--btn-height-sm);
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  border: none;
  border-radius: var(--radius-small);
  background-color: var(--color-btn-tonal-bg);
  cursor: pointer;
  color: var(--color-btn-tonal-fg);
  transition: background-color 0.1s ease;
}

.payment-details__fn-btn:hover  { background-color: var(--color-btn-tonal-hover); }
.payment-details__fn-btn:active { background-color: var(--color-btn-tonal-pressed); }

.payment-details__fn-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.payment-details__fn-label {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.payment-details__to {
  padding: 0 var(--space-3) var(--space-2); /* 16dp below — matches group's 16dp top padding */
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.payment-details__to-label {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.payment-details__to-body {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.payment-details__to-value {
  flex: 1;
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

/* ── Account rows (internal-account-transfer-details only) */

.payment-details__accounts {
  padding: 0 var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.payment-details__account-label {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
  margin-top: var(--space-2); /* larger gap before each label (separates the two groups) */
}

/* First label (from) needs no top margin */
.payment-details__account-label:first-child {
  margin-top: 0;
}

.payment-details__account-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 0.0625rem solid var(--color-fg);
  border-radius: var(--radius-regular);
}

.payment-details__account-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--color-btn-primary-bg);
}

.payment-details__account-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.payment-details__account-name {
  font-size: var(--fs-text-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.payment-details__account-iban {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.payment-details__account-balance {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-shrink: 0;
}

.payment-details__account-balance-currency {
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.payment-details__account-balance-value {
  font-size: var(--fs-text-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

/* ── Info rows (Status / Booking confirmation / Signed) */

.payment-details__info-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);          /* 8dp between Row Items within the group */
  padding-top: var(--space-2);  /* 16dp from the divider above — matches to-section's 16dp */
  padding-bottom: var(--space-2); /* 16dp gap to the Expander below */
}

.payment-details__info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0 var(--space-3);
  min-height: 1.5rem; /* 24dp per Figma Row Item */
}

.payment-details__info-label {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.payment-details__info-value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

/* Download button */
.payment-details__download {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-btn-primary-bg);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  padding: 0.25rem var(--space-1);
  border-radius: var(--radius-small);
  transition: background-color 0.15s ease;
}

.payment-details__download:hover  { background-color: var(--color-surface-state-hover);   }
.payment-details__download:active { background-color: var(--color-surface-state-pressed); }

.payment-details__download:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.payment-details__download-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* ── "Further options" expander ─────────────────────── */

.payment-details__further-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
  width: 100%;
  text-align: left;
  border-radius: var(--radius-small);
  transition: background-color 0.15s ease;
}

.payment-details__further-toggle:hover  { background-color: var(--color-surface-state-hover);   }
.payment-details__further-toggle:active { background-color: var(--color-surface-state-pressed); }

.payment-details__further-toggle:focus-visible {
  outline: 0.125rem solid var(--color-fg);
  outline-offset: 0.125rem;
}

.payment-details__further-chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--color-fg);
  transition: transform 0.15s ease;
}

.payment-details__further-toggle[aria-expanded="true"] .payment-details__further-chevron {
  transform: rotate(180deg);
}

/* Further options content panel */
.payment-details__further-content {
  padding: 0 var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.payment-details__message-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* booking-row: cursor pointer to signal tappability */
.booking-row {
  cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════
   INTERNAL ACCOUNT TRANSFER FLOW
   designs/screens/internal-account-transfer
   ════════════════════════════════════════════════════════════════ */

/* ── Amount + currency input wrap (legacy — use .amount-input) ── */

/* ── Intro text ───────────────────────────────────────────────── */

.iat-intro {
  font-size: var(--fs-text-sm);
  color: var(--color-fg-secondary);
  margin: 0;
}

/* ── Schedule step ────────────────────────────────────────────── */

.iat-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 0.0625rem solid var(--color-separator);
}

.iat-toggle-row__label {
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

/* Segmented that spans full width (different from theme segmented) */
.segmented--full {
  width: 100%;
  margin-bottom: var(--space-3);
}

/* debit-account as full-width control inside IAT forms */
.modal--iat-flow .form .debit-account,
.modal--payment-flow .form .debit-account,
.modal--trade-flow .form .debit-account {
  width: 100%;
}

/* ── body scroll lock when IAT / trade open ──────────────────── */

body.body--iat-open,
body.body--trade-open {
  overflow: hidden;
}

/* ── IAT overlay positions itself correctly ───────────────────── */

#uz-iat-overlay .modal-shell {
  position: relative;
}

/* ── Investment product details (designs/screens/investment-product-details) ── */

.view--investment-product-details .view__main {
  display: flex;
  flex-direction: column;
  gap: var(--view-stack-gap);
}

.view--investment-product-details .view__nav {
  margin-bottom: 0;
}

.investment-product-details__grid {
  display: grid;
  gap: var(--view-stack-gap);
}

.investment-product-details__left {
  display: flex;
  flex-direction: column;
  gap: var(--view-stack-gap);
  min-width: 0;
}

.investment-product-details__left .action-buttons {
  width: 100%;
  margin-bottom: 0;
}

.section-card--performance,
.section-card--positions {
  margin-bottom: 0;
}

.section-card--performance .section-card__body {
  padding: var(--space-3);
}

.section-card__product-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.section-card__title--product {
  color: var(--color-fg);
  font-weight: var(--fw-medium);
}

.performance-card__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.performance-card__product {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.performance-card__product-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.performance-card__product-title {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.section-card--positions .section-card__body {
  padding: 0;
}

.section-card--positions .section-card__inline-header {
  padding: var(--space-3) var(--space-3) var(--space-1);
}

.section-card--positions .section-card__inline-header .show-all-btn.uz-btn {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

/* Preview list: 3 rows mobile, 5 rows desktop (matches investment grid @ 1024px). */
@media (max-width: 1023px) {
  .section-card--positions .positions-list__entry:nth-child(n + 4) {
    display: none;
  }

  .section-card--positions .positions-list__entry:nth-child(3) .divider {
    display: none;
  }
}

.performance-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.performance-card__details-btn.uz-btn {
  flex-shrink: 0;
  width: auto;
  margin: 0;
}

.performance-card__balance {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  min-width: 0;
}

.performance-card__balance-value {
  /* Performance balance: fixed 28dp — must not jump with desktop typography tokens. */
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.performance-card__balance-currency {
  font-size: var(--fs-text-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.performance-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.performance-card__date {
  flex-shrink: 0;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
  font-style: normal;
}

.performance-card__change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
}

.performance-card__change-sep {
  color: var(--color-fg-label);
}

.performance-card__chart {
  color: var(--color-btn-primary-bg);
  margin-bottom: var(--space-3);
}

.performance-card__chart-svg {
  display: block;
  width: 100%;
  height: 164px;
}

.performance-card__chart-axis {
  fill: var(--color-fg-label);
  font-family: var(--font-family);
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-regular);
}

.performance-card__chart-axis--y {
  text-anchor: end;
}

.performance-card__chart-axis--x {
  text-anchor: middle;
}

.performance-card__chart-tooltip {
  fill: var(--color-bg);
  stroke: var(--color-fg);
  stroke-opacity: 0.2;
  stroke-width: 1;
}

.performance-card__chart-tooltip-shadow feDropShadow {
  flood-color: var(--performance-chart-tooltip-shadow-color);
  flood-opacity: var(--performance-chart-tooltip-shadow-opacity);
}

.performance-card__chart-tooltip-value {
  fill: var(--color-fg);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: var(--fw-bold);
  text-anchor: start;
}

.performance-card__chart-tooltip-date {
  fill: var(--color-fg-label);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: var(--fw-regular);
  text-anchor: end;
}

.performance-card__chart-hover[hidden] {
  display: none;
}

.performance-card__chart-hover {
  pointer-events: none;
}

.performance-card__chart-line-hit {
  cursor: crosshair;
}

.performance-card__range {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.performance-card__range-chip {
  flex-shrink: 0;
  border: none;
  border-radius: 9999px;
  min-height: 2rem;
  padding: 0.375rem 0.875rem;
  font-family: var(--font-family);
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
  background-color: var(--color-segmented-track-bg);
  cursor: pointer;
}

.performance-card__range-chip:hover {
  background-color: var(--color-surface-state-hover);
}

.performance-card__range-chip--active {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
}

.performance-card__range-chip--active:hover {
  background-color: var(--color-btn-primary-hover);
}

.performance-card__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.performance-card__summary-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.performance-card__summary-icon {
  flex-shrink: 0;
  pointer-events: none;
  cursor: default;
}

.performance-card__summary-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.performance-card__summary-amount {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  flex-shrink: 0;
}

.performance-card__summary-currency {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.performance-card__summary-value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.section-card__inline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.section-card--positions .section-card__title {
  font-size: var(--fs-text-md);
  line-height: var(--lh-text);
  color: var(--color-fg);
  font-weight: var(--fw-bold);
}

/* position — designs/components/list-item/list-item/variants/position (88dp row)
 * Row spacing: same trim stack as product-item / wealth-overview-account (8dp via .type-stack-tight). */
.list-item--position {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-inline: 0;
  padding-block: calc(var(--space-3) + var(--trim-top-text-sm))
    calc(var(--space-3) + var(--trim-bottom-text-xs));
  padding-inline: var(--space-3);
  gap: var(--space-3);
  width: 100%;
  box-sizing: border-box;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
}

.section-card--positions .divider {
  margin-inline: 0;
}

.list-item--position .list-item__body {
  flex: 1 1 auto;
  min-width: 0;
}

.list-item__end--position {
  flex: 0 0 auto;
  flex-shrink: 0;
  align-items: flex-end;
  text-align: right;
}

.list-item--position .list-item__end--position.type-stack-tight {
  flex: 0 0 auto;
}

.list-item--position .list-item__title {
  color: var(--color-fg);
}

.list-item--position .list-item__subtitle,
.list-item--position .list-item__quantity {
  color: var(--color-fg-label);
}

/* Position row 3 — 8dp below trimmed xs row 2; 24dp row height (left icon defines the band). */
.list-item--position .type-stack-tight > .type-xs.type-trim + .list-item__performance,
.list-item--position .type-stack-tight > .list-item__quantity.type-xs.type-trim + .list-item__total {
  margin-block-start: calc(
    var(--text-row-gap) - var(--trim-bottom-text-xs)
  );
}

.list-item--position .list-item__performance,
.list-item--position .list-item__total {
  display: flex;
  align-items: center;
  min-height: 1.5rem;
  margin-block: 0;
}

.list-item--position .list-item__performance {
  gap: var(--space-1);
}

.list-item--position .list-item__total {
  justify-content: flex-end;
}

.list-item--position .list-item__performance-icon {
  flex-shrink: 0;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-fg-label);
  fill: none;
  overflow: visible;
}

.list-item--position .list-item__performance-icon > use {
  fill: none;
  pointer-events: none;
}

.list-item--position .list-item__performance-values {
  display: inline;
}

.list-item--position .list-item__performance-value {
  display: inline;
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.list-item--position .list-item__performance-value + .list-item__performance-value {
  margin-inline-start: var(--space-2);
}

.list-item--position .list-item__price.type-trim,
.list-item--position .list-item__total {
  text-align: right;
}

.list-item--position .list-item__price.type-trim .list-item__currency,
.list-item--position .list-item__price.type-trim .list-item__value,
.list-item--position .list-item__total .list-item__currency,
.list-item--position .list-item__total .list-item__value {
  display: inline;
  margin-block: 0;
}

.list-item--position .list-item__price.type-trim .list-item__currency,
.list-item--position .list-item__total .list-item__currency {
  margin-inline-end: var(--space-1);
}

.list-item--position .list-item__currency {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-label);
}

.list-item--position .list-item__value {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg);
}

.list-item--position .list-item__price .list-item__value {
  font-weight: var(--fw-bold);
}

.list-item--position .list-item__total .list-item__value {
  font-weight: var(--fw-regular);
}

.action-buttons--investment {
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
}

/* Persona B (Max): standard-button/small-secondary function bar — variant b */
.action-buttons--investment.action-buttons--standard {
  display: none;
  gap: var(--space-4);
}

.action-buttons--investment.action-buttons--standard .uz-btn {
  flex: 1 1 0;
  min-width: 0;
}

:root[data-persona="max"] .action-buttons--investment.action-buttons--circular {
  display: none;
}

:root[data-persona="max"] .action-buttons--investment.action-buttons--standard {
  display: flex;
}

@media (max-width: 1023px) {
  .body[data-screen="investment-product-details"] .action-buttons--investment.action-buttons--circular .action-button,
  .body[data-screen="details-of-position"] .action-buttons--investment.action-buttons--circular .action-button {
    flex: 0 0 auto;
    width: var(--action-button-container-width);
    min-width: var(--action-button-container-width);
    max-width: var(--action-button-container-width);
  }
}

@media (min-width: 1024px) {
  .investment-product-details__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ── Details of position (designs/screens/details-of-position) ── */

.view--details-of-position .view__main {
  display: flex;
  flex-direction: column;
  gap: var(--view-stack-gap);
}

.view--details-of-position .view__nav {
  margin-bottom: 0;
}

.view__nav--position-details {
  align-items: flex-start;
  padding-block: var(--space-2);
  min-height: 3.5rem;
}

.view__nav-title-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  min-width: 0;
  max-width: calc(100% - 5.5rem);
}

.view__nav-meta,
.details-of-position__meta {
  margin: 0;
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
  text-align: center;
}

.performance-card--position .performance-card__change-icon {
  flex-shrink: 0;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-fg-label);
  fill: none;
  overflow: visible;
}

.performance-card--position .performance-card__change-icon > use {
  fill: none;
  pointer-events: none;
}

.details-of-position__grid {
  display: grid;
  gap: var(--view-stack-gap);
}

.details-of-position__left,
.details-of-position__right {
  display: flex;
  flex-direction: column;
  gap: var(--view-stack-gap);
  min-width: 0;
}

.details-of-position__left .action-buttons {
  width: 100%;
  margin-bottom: 0;
}

.section-card--my-positions,
.section-card--key-figures {
  margin-bottom: 0;
}

.section-card--my-positions .section-card__body,
.section-card--key-figures .section-card__body {
  padding-top: var(--space-3);
  padding-bottom: 0;
}

.section-card--my-positions .section-card__inline-header,
.section-card--key-figures .section-card__inline-header {
  padding-inline: var(--space-3);
  margin-bottom: var(--space-1);
}

.section-card--my-positions .section-card__title,
.section-card--key-figures .section-card__title {
  font-size: var(--fs-text-md);
  font-weight: var(--fw-bold);
  color: var(--color-fg);
}

.data-card__rows {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
}

.data-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.data-card__row + .data-card__row {
  border-top: 0.0625rem solid var(--color-separator);
}

.data-card__label,
.data-card__value {
  margin: 0;
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
}

.data-card__label {
  color: var(--color-fg-secondary);
  font-weight: var(--fw-regular);
}

.data-card__value {
  color: var(--color-fg);
  font-weight: var(--fw-regular);
  text-align: right;
}

@media (min-width: 1024px) {
  .details-of-position__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ── Shell page transitions (js/shell-nav.js) ─────────────────────────────── */

:root {
  --shell-page-transition-duration: 380ms;
  --shell-page-transition-easing: ease-in-out;
  --shell-content-reveal-duration: 320ms;
}

html.shell-nav-pending .view.view--active {
  opacity: 0;
}

html.shell-nav-pending.shell-nav-pending--forward .view.view--active {
  transform: translate3d(12%, 0, 0);
}

html.shell-nav-pending.shell-nav-pending--back .view.view--active {
  transform: translate3d(-12%, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html.shell-nav-pending .view.view--active {
    opacity: 1;
    transform: none;
  }

  .shell-view--enter-forward,
  .shell-view--enter-back,
  .shell-view--exit-forward,
  .shell-view--exit-back {
    animation: none !important;
  }

  [data-shell-reveal],
  [data-shell-reveal="when-ready"] {
    opacity: 1 !important;
    transition: none !important;
  }
}

body.shell-nav-transitioning {
  pointer-events: none;
}

.main-content--page-transition {
  overflow-x: clip;
}

.view.view--active.shell-view--enter-forward,
.view.view--active.shell-view--enter-back,
.view.view--active.shell-view--exit-forward,
.view.view--active.shell-view--exit-back {
  will-change: transform, opacity;
}

.shell-view--enter-forward {
  animation: shell-view-enter-forward var(--shell-page-transition-duration)
    var(--shell-page-transition-easing) both;
}

.shell-view--enter-back {
  animation: shell-view-enter-back var(--shell-page-transition-duration)
    var(--shell-page-transition-easing) both;
}

.shell-view--exit-forward {
  animation: shell-view-exit-forward var(--shell-page-transition-duration)
    var(--shell-page-transition-easing) both;
}

.shell-view--exit-back {
  animation: shell-view-exit-back var(--shell-page-transition-duration)
    var(--shell-page-transition-easing) both;
}

@keyframes shell-view-enter-forward {
  from {
    opacity: 0;
    transform: translate3d(12%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shell-view-enter-back {
  from {
    opacity: 0;
    transform: translate3d(-12%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes shell-view-exit-forward {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-12%, 0, 0);
  }
}

@keyframes shell-view-exit-back {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(12%, 0, 0);
  }
}

/* Staggered content reveal — hidden during page slide, faded in after enter. */
html.shell-nav-pending [data-shell-reveal],
html.shell-nav-pending [data-shell-reveal="when-ready"],
.view.view--active:not(.shell-view--entered) [data-shell-reveal],
.view.view--active:not(.shell-view--entered) [data-shell-reveal="when-ready"]:not(.shell-reveal--ready) {
  opacity: 0;
}

.view.view--active.shell-view--entered [data-shell-reveal],
.view.view--active.shell-view--entered [data-shell-reveal="when-ready"].shell-reveal--ready {
  opacity: 1;
  transition: opacity var(--shell-content-reveal-duration) var(--shell-page-transition-easing);
}

/* Legacy class names — keep inert if cached scripts reference them. */
.main-content__inner--enter-forward,
.main-content__inner--enter-back,
.main-content__inner--exit-forward,
.main-content__inner--exit-back {
  animation: none !important;
}

/* ==========================================================================
 * Trade flow step 1 — designs/screens/trade-flow-step-1
 * Entry: Details of position → Buy/Sell → js/trade-flow-overlay.js
 * ========================================================================== */

.modal--trade-flow {
  overflow: hidden;
  border-radius: var(--radius-regular);
}

.modal--trade-flow .modal__body {
  position: static;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 0%;
  min-height: 0;
}

.modal--trade-flow .modal__nav {
  padding-bottom: var(--space-2);
}

.modal__title-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  max-width: calc(100% - 5.5rem);
  text-align: center;
}

.modal__subtitle {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.modal--trade-flow .form {
  gap: var(--space-3);
}

.modal--trade-flow .form-field__text-rows {
  border-color: color-mix(in srgb, var(--color-fg) 20%, transparent);
  background-color: var(--color-bg-secondary);
}

.trade-flow__order-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  align-items: start;
}

.trade-flow__order-row--single {
  grid-template-columns: 1fr;
}

.trade-flow__order-row .form-field {
  min-width: 0;
}

.trade-flow__order-row .form-field__select,
.trade-flow__order-row .amount-input--no-currency {
  height: 2.5rem;
  min-height: 2.5rem;
}

.trade-flow__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-1);
}

.trade-flow__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 1.5rem;
}

.trade-flow__summary-label {
  font-size: var(--fs-text-sm);
  line-height: var(--lh-text);
  color: var(--color-fg-secondary);
}

.trade-flow__summary-value {
  font-size: var(--fs-text-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-text);
  color: var(--color-fg);
  text-align: right;
}

.modal--trade-flow .segmented--full {
  margin-bottom: 0;
}

#uz-trade-overlay .modal-shell {
  position: relative;
}