/* ============================================================
   Banking Experience System — component library (bes.css)
   Consumes tokens.css (--bes-*). Logical properties only.
   Waves 1–2: 20 component families. v2.0.0-draft.
   ============================================================ */

/* ---------- base ---------- */
.bes {
  font-family: var(--bes-app-fontFamily);
  color: var(--bes-text-primary);
  font-size: var(--bes-type-body-size);
  line-height: var(--bes-type-body-line);
  -webkit-font-smoothing: antialiased;
}
.bes *, .bes *::before, .bes *::after { box-sizing: border-box; }
.bes :focus-visible { outline: var(--bes-focus-width, 2px) solid var(--bes-border-focus); outline-offset: var(--bes-focus-offset, 2px); }
/* Arabic surfaces lead with the Arabic face: shaping and vertical metrics come
   from the font that owns the script, not from a Latin face falling back. */
.bes:lang(ar), :lang(ar) .bes { font-family: var(--bes-app-fontFamilyArabic), var(--bes-app-fontFamily); }
@media (prefers-reduced-motion: reduce) {
  .bes *, .bes *::before, .bes *::after { transition: none !important; animation: none !important; }
}

/* ---------- Amount (doc 13) ---------- */
.bes-amount { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; display: inline-block; }
.bes-amount .cur { font-size: .75em; font-weight: 500; color: var(--bes-text-secondary); }
.bes-amount--hero { font-size: var(--bes-type-amountHero-size); line-height: var(--bes-type-amountHero-line); font-weight: var(--bes-type-amountHero-weight); letter-spacing: -.3px; }
.bes-amount--lg   { font-size: var(--bes-type-amountLg-size);   line-height: var(--bes-type-amountLg-line);   font-weight: var(--bes-type-amountLg-weight); }
.bes-amount--md   { font-size: var(--bes-type-amountMd-size);   line-height: var(--bes-type-amountMd-line);   font-weight: var(--bes-type-amountMd-weight); }
.bes-amount--sm   { font-size: var(--bes-type-amountSm-size);   line-height: var(--bes-type-amountSm-line);   font-weight: var(--bes-type-amountSm-weight); }
.bes-amount--meta { font-size: var(--bes-type-amountMeta-size); line-height: var(--bes-type-amountMeta-line); font-weight: var(--bes-type-amountMeta-weight); color: var(--bes-text-secondary); }
.bes-amount--credit   { color: var(--bes-financial-income); }
.bes-amount--negative { color: var(--bes-financial-negative); }
.bes-amount--struck   { text-decoration: line-through; color: var(--bes-text-secondary); font-weight: 500; }
.bes-amount--hero .dec, .bes-amount--lg .dec { font-size: .6em; vertical-align: .32em; }

/* ---------- Button (doc 08) ---------- */
.bes-btn {
  font: inherit; font-size: var(--bes-button-fontSize); font-weight: var(--bes-button-weight); cursor: pointer;
  border-radius: var(--bes-button-radius); border: 1px solid transparent;
  padding: var(--bes-density-ctlPadY, 12px) var(--bes-density-ctlPadX, 20px); min-height: var(--bes-density-controlH);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--bes-motion-fast) var(--bes-motion-easeStandard);
}
.bes-btn--primary { background: var(--bes-action-primary); color: var(--bes-text-onAction); }
.bes-btn--primary:hover { background: var(--bes-action-primaryHover); }
.bes-btn--primary:active { background: var(--bes-action-primaryPressed); }
.bes-btn--secondary { background: var(--bes-surface-primary); color: var(--bes-text-primary); border-color: var(--bes-border-strong); }
.bes-btn--secondary:hover { background: var(--bes-surface-tertiary); }
.bes-btn--ghost { background: transparent; color: var(--bes-text-link); }
.bes-btn--ghost:hover { background: var(--bes-surface-secondary); }
.bes-btn--destructive { background: transparent; color: var(--bes-action-destructive); border-color: var(--bes-action-destructive); }
.bes-btn--destructive:hover { background: var(--bes-status-errorTint); }
.bes-btn--destructive-solid { background: var(--bes-action-destructive); color: var(--bes-text-onAction); }
.bes-btn:disabled, .bes-btn[aria-disabled="true"] { background: var(--bes-surface-tertiary); color: var(--bes-text-disabled); border-color: transparent; cursor: not-allowed; }
.bes-btn--sm { font-size: var(--bes-button-smFontSize); padding: 8px 14px; min-height: 36px; }
.bes-btn--lg { font-size: var(--bes-button-lgFontSize); padding: 14px 24px; width: 100%; }
.bes-btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.bes-btn--loading::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: var(--bes-dot-radius);
  color: var(--bes-text-onAction); animation: bes-spin var(--bes-spinner-duration) linear infinite;
}
.bes-btn--secondary.bes-btn--loading::after { color: var(--bes-text-secondary); }
@keyframes bes-spin { to { transform: rotate(360deg); } }

/* Icon button */
.bes-iconbtn {
  font: inherit; cursor: pointer; background: transparent; border: none;
  color: var(--bes-text-secondary); border-radius: var(--bes-radius-sm);
  min-width: var(--bes-size-targetMin); min-height: var(--bes-size-targetMin);
  display: inline-flex; align-items: center; justify-content: center;
}
.bes-iconbtn:hover { background: var(--bes-surface-tertiary); color: var(--bes-text-primary); }
.bes-iconbtn--bordered { border: 1px solid var(--bes-border-strong); }
.bes-iconbtn[aria-pressed="true"] { color: var(--bes-action-primary); background: var(--bes-surface-tertiary); }

/* ---------- Status badge (doc 12) ---------- */
.bes-badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--bes-badge-radius); padding: 4px 11px;
  font-size: var(--bes-type-caption-size); font-weight: 600; line-height: 1.3;
}
/* Transaction states (doc 07 §4) — one variant per canonical state, all 13.
   Several states share a hue on purpose: completed and refunded are both green,
   processing/pending/unknown all teal. They are told apart by the paired icon and
   label, never by colour — doc 12's rule made structural rather than advisory.
   Before this existed, "Refunded" shipped styled as success and was pixel-identical
   to "Completed", and UNKNOWN was indistinguishable from "Processing". */
.bes-badge--draft           { background: var(--bes-transaction-draftTint); color: var(--bes-transaction-draft); }
.bes-badge--review          { background: var(--bes-transaction-reviewTint); color: var(--bes-transaction-review); }
.bes-badge--authentication  { background: var(--bes-transaction-authenticationTint); color: var(--bes-transaction-authentication); }
.bes-badge--processing      { background: var(--bes-transaction-processingTint); color: var(--bes-transaction-processing); }
.bes-badge--pending         { background: var(--bes-transaction-pendingTint); color: var(--bes-transaction-pending); }
.bes-badge--completed       { background: var(--bes-transaction-completedTint); color: var(--bes-transaction-completed); }
.bes-badge--failed          { background: var(--bes-transaction-failedTint); color: var(--bes-transaction-failed); }
.bes-badge--unknown         { background: var(--bes-transaction-unknownTint); color: var(--bes-transaction-unknown); }
.bes-badge--blocked         { background: var(--bes-transaction-blockedTint); color: var(--bes-transaction-blocked); }
.bes-badge--reversed        { background: var(--bes-transaction-reversedTint); color: var(--bes-transaction-reversed); }
.bes-badge--refunded        { background: var(--bes-transaction-refundedTint); color: var(--bes-transaction-refunded); }
.bes-badge--disputed        { background: var(--bes-transaction-disputedTint); color: var(--bes-transaction-disputed); }
.bes-badge--cancelled       { background: var(--bes-transaction-cancelledTint); color: var(--bes-transaction-cancelled); }

/* Generic UI status — form validation, alerts, banners. NOT transaction states. */
.bes-badge--success  { background: var(--bes-status-successTint); color: var(--bes-status-success); }
.bes-badge--info     { background: var(--bes-status-infoTint);    color: var(--bes-status-info); }
.bes-badge--warning  { background: var(--bes-status-warningTint); color: var(--bes-status-warning); }
.bes-badge--error    { background: var(--bes-status-errorTint);   color: var(--bes-status-error); }
.bes-badge--neutral  { background: var(--bes-surface-tertiary);   color: var(--bes-text-secondary); }
/* The glyph is what separates two states that share a hue on screen. It is
   aria-hidden because the visible label already carries the state for assistive
   tech — but it is never optional, because without it colour would be doing the
   work alone for a sighted user. */
.bes-badge .glyph { font-weight: 700; font-size: 1em; line-height: 1; flex: none; }
.bes-badge .ic { inline-size: 12px; block-size: 12px; flex: none; }

/* ---------- Alert (doc 12) ---------- */
.bes-alert {
  display: flex; gap: 12px; align-items: flex-start;
  border-radius: var(--bes-radius-md); padding: 14px 16px;
  border-inline-start: 3px solid; font-size: var(--bes-type-bodySm-size); line-height: 1.55;
}
.bes-alert .ic { flex: none; margin-block-start: 2px; inline-size: 18px; block-size: 18px; }
.bes-alert b, .bes-alert strong { display: block; margin-block-end: 2px; font-weight: 600; }
.bes-alert--info    { background: var(--bes-status-infoTint);    border-color: var(--bes-status-info);    color: var(--bes-text-primary); }
.bes-alert--info .ic, .bes-alert--info b { color: var(--bes-status-info); }
.bes-alert--success { background: var(--bes-status-successTint); border-color: var(--bes-status-success); }
.bes-alert--success .ic, .bes-alert--success b { color: var(--bes-status-success); }
.bes-alert--warning { background: var(--bes-status-warningTint); border-color: var(--bes-status-warning); }
.bes-alert--warning .ic, .bes-alert--warning b { color: var(--bes-status-warning); }
.bes-alert--error   { background: var(--bes-status-errorTint);   border-color: var(--bes-status-error); }
.bes-alert--error .ic, .bes-alert--error b { color: var(--bes-status-error); }
.bes-alert .actions { display: flex; gap: 14px; margin-block-start: 8px; }
.bes-alert .actions a { font-weight: 600; font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-link); text-decoration: none; }
.bes-alert .actions a:hover { text-decoration: underline; }

/* ---------- Form primitives (doc 09) ---------- */
.bes-field { display: flex; flex-direction: column; gap: 6px; margin-block-end: var(--bes-density-fieldGap); }
.bes-label { font-size: var(--bes-type-label-size); font-weight: var(--bes-type-label-weight); }
.bes-label .opt { color: var(--bes-text-secondary); font-weight: 400; }
.bes-help { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); line-height: 1.5; }
.bes-error-msg { display: flex; gap: 6px; align-items: flex-start; font-size: var(--bes-type-bodyXs-size); font-weight: 500; color: var(--bes-status-error); }
.bes-input {
  font: inherit; font-size: var(--bes-control-fontSize); color: var(--bes-text-primary);
  background: var(--bes-surface-primary);
  border: 1px solid var(--bes-border-input, var(--bes-border-strong)); border-radius: var(--bes-control-radius);
  padding: var(--bes-density-ctlPadY, 12px) 14px; min-height: var(--bes-density-controlH); inline-size: 100%;
}
.bes-input::placeholder { color: var(--bes-text-disabled); }
.bes-input:focus-visible { outline: 2px solid var(--bes-border-focus); outline-offset: 1px; border-color: var(--bes-border-focus); }
.bes-input[aria-invalid="true"] { border-color: var(--bes-border-error); }
.bes-input:read-only { background: var(--bes-surface-secondary); border-style: dashed; }
.bes-input:disabled { background: var(--bes-surface-tertiary); color: var(--bes-text-disabled); }
.bes-input--ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
.bes-field--verified .bes-input { border-color: var(--bes-status-success); background: var(--bes-surface-secondary); }
.bes-verified-note { display: flex; gap: 6px; align-items: center; font-size: var(--bes-type-bodyXs-size); color: var(--bes-status-success); font-weight: 500; }

/* Currency input */
.bes-currency { position: relative; }
.bes-currency .bes-input {
  font-size: var(--bes-type-amountLg-size); font-weight: 700; font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate; padding-inline-start: 64px; min-height: 64px;
}
.bes-currency .code {
  position: absolute; inset-inline-start: 14px; inset-block-start: 50%; transform: translateY(-50%);
  font-size: var(--bes-control-fontSize); font-weight: 600; color: var(--bes-text-secondary); pointer-events: none;
}
.bes-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 8px; }
.bes-chip {
  font: inherit; font-size: var(--bes-type-bodyXs-size); font-weight: 600; cursor: pointer;
  border: 1px solid var(--bes-border-strong); background: var(--bes-surface-primary);
  color: var(--bes-text-primary); border-radius: var(--bes-chip-radius); padding: 6px 13px;
}
.bes-chip:hover { background: var(--bes-surface-secondary); }
.bes-chip[aria-pressed="true"] { background: var(--bes-text-primary); color: var(--bes-surface-primary); border-color: var(--bes-text-primary); }
.bes-context-line { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); margin-block-start: 6px; }
.bes-context-line--error { color: var(--bes-status-error); font-weight: 500; }

/* Checkbox / radio / switch */
.bes-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: var(--bes-type-bodySm-size); line-height: 1.5; }
.bes-check input { inline-size: 20px; block-size: 20px; margin: 1px 0 0; accent-color: var(--bes-action-primary); flex: none; cursor: pointer; }
.bes-check .desc { display: block; font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); }
.bes-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--bes-type-bodySm-size); }
.bes-switch input { position: absolute; opacity: 0; inline-size: 44px; block-size: 26px; cursor: pointer; }
.bes-switch .track {
  inline-size: 44px; block-size: 26px; border-radius: var(--bes-radius-full);
  background: var(--bes-border-strong); position: relative; flex: none;
  transition: background var(--bes-motion-fast) var(--bes-motion-easeStandard);
}
.bes-switch .track::after {
  content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  inline-size: 20px; block-size: 20px; border-radius: var(--bes-dot-radius); background: var(--bes-surface-primary);
  box-shadow: var(--bes-elevation-e1);
  transition: transform var(--bes-motion-fast) var(--bes-motion-easeStandard);
}
.bes-switch input:checked + .track { background: var(--bes-action-primary); }
.bes-switch input:checked + .track::after { transform: translateX(18px); }
[dir="rtl"] .bes-switch input:checked + .track::after { transform: translateX(-18px); }
.bes-switch input:focus-visible + .track { outline: 2px solid var(--bes-border-focus); outline-offset: 2px; }
.bes-switch .state { font-weight: 500; color: var(--bes-text-secondary); font-size: var(--bes-type-bodyXs-size); }

/* ---------- Tabs & segmented (doc 10) ---------- */
.bes-tabs { display: flex; gap: 4px; border-block-end: 1px solid var(--bes-border-default); }
.bes-tab {
  font: inherit; font-size: var(--bes-type-bodySm-size); font-weight: 500; cursor: pointer;
  background: none; border: none; color: var(--bes-text-secondary);
  padding: 12px 16px; border-block-end: 2px solid transparent; margin-block-end: -1px;
}
.bes-tab:hover { color: var(--bes-text-primary); }
.bes-tab[aria-selected="true"] { color: var(--bes-text-primary); font-weight: 600; border-color: var(--bes-action-primary); }
.bes-seg { display: inline-flex; background: var(--bes-surface-tertiary); border-radius: var(--bes-radius-md); padding: 3px; gap: 2px; }
.bes-seg button {
  font: inherit; font-size: var(--bes-type-bodyXs-size); font-weight: 600; cursor: pointer; border: none;
  background: transparent; color: var(--bes-text-secondary); border-radius: var(--bes-seg-radius); padding: 7px 16px;
}
.bes-seg button[aria-pressed="true"] { background: var(--bes-surface-primary); color: var(--bes-text-primary); box-shadow: var(--bes-elevation-e1); }

/* Stepper */
.bes-stepper { display: flex; align-items: center; gap: 8px; font-size: var(--bes-type-bodyXs-size); }
.bes-step { display: flex; align-items: center; gap: 8px; color: var(--bes-text-secondary); }
.bes-step .n {
  inline-size: 26px; block-size: 26px; border-radius: var(--bes-dot-radius); display: grid; place-items: center;
  border: 1.5px solid var(--bes-border-strong); font-weight: 600; font-size: var(--bes-type-caption-size); flex: none;
}
.bes-step--done .n { background: var(--bes-status-success); border-color: var(--bes-status-success); color: var(--bes-text-onAction); }
.bes-step--current { color: var(--bes-text-primary); font-weight: 600; }
.bes-step--current .n { border-color: var(--bes-action-primary); color: var(--bes-action-primary); }
.bes-step-bar { flex: 1; block-size: 1.5px; background: var(--bes-border-default); min-inline-size: 16px; }

/* ---------- Card & list (docs 11, 14, 15) ---------- */
.bes-card {
  background: var(--bes-surface-primary); border: 1px solid var(--bes-border-default);
  border-radius: var(--bes-card-radius); padding: var(--bes-density-cardPad); box-shadow: var(--bes-elevation-e1);
}
.bes-list { background: var(--bes-surface-primary); border: 1px solid var(--bes-border-default); border-radius: var(--bes-radius-lg); overflow: hidden; }
.bes-list-head {
  font-size: var(--bes-type-caption-size); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bes-text-secondary); padding: 12px 18px 6px;
}
:lang(ar) .bes-list-head { letter-spacing: 0; text-transform: none; font-size: var(--bes-type-bodyXs-size); }
.bes-item { display: flex; align-items: center; gap: 14px; padding: var(--bes-density-ctlPadY, 12px) var(--bes-density-listPadX, 18px); min-block-size: var(--bes-density-rowHeight); border-block-start: 1px solid var(--bes-border-default); }
.bes-item:first-child, .bes-list-head + .bes-item { border-block-start: none; }
.bes-item .lead {
  inline-size: 38px; block-size: 38px; border-radius: var(--bes-radius-md);
  background: var(--bes-surface-tertiary); color: var(--bes-text-secondary);
  display: grid; place-items: center; flex: none;
}
.bes-item .main { flex: 1; min-inline-size: 0; }
.bes-item .t { font-weight: 500; font-size: var(--bes-type-bodyMd-size); }
.bes-item .s { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); }
.bes-item .trail { text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
a.bes-item, button.bes-item { text-decoration: none; color: inherit; cursor: pointer; inline-size: 100%; border-inline: none; background: none; font: inherit; text-align: start; }
a.bes-item:hover, button.bes-item:hover { background: var(--bes-surface-secondary); }

/* Account card */
.bes-acct .row1 { display: flex; justify-content: space-between; align-items: flex-start; }
.bes-acct .name { font-weight: 600; }
.bes-acct .meta { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); }
.bes-acct .bal { margin-block-start: 10px; }
.bes-acct .sub { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); margin-block-start: 2px; }
.bes-acct .actions { display: flex; gap: 8px; margin-block-start: 16px; }

/* ---------- Fee breakdown & review (docs 13, 16) ---------- */
.bes-rows { font-size: var(--bes-type-bodySm-size); }
.bes-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; }
.bes-row .k { color: var(--bes-text-secondary); }
.bes-row .v { font-weight: 500; text-align: end; }
.bes-row--rate { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); }
.bes-rows .sep { border-block-start: 1px solid var(--bes-border-default); margin-block-start: 6px; padding-block-start: 6px; }
.bes-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-block-start: 2px solid var(--bes-border-strong); margin-block-start: 8px; padding-block-start: 12px;
}
.bes-total .k { font-weight: 600; }
.bes-total .v { font-size: var(--bes-type-h3-size); font-weight: 700; }
.bes-consequence { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); line-height: 1.55; margin-block-start: 14px; }
.bes-lock { color: var(--bes-status-success); font-weight: 600; }
.bes-whyfee {
  font-size: var(--bes-type-caption-size); font-weight: 600; color: var(--bes-text-link);
  background: none; border: none; cursor: pointer; padding: 0; font-family: inherit;
}

/* ---------- Payee verification (doc 16) ---------- */
.bes-cop { display: flex; gap: 12px; align-items: flex-start; }
.bes-cop .ic { inline-size: 36px; block-size: 36px; border-radius: var(--bes-dot-radius); display: grid; place-items: center; flex: none; }
.bes-cop--match .ic { background: var(--bes-status-successTint); color: var(--bes-status-success); }
.bes-cop--close .ic { background: var(--bes-status-warningTint); color: var(--bes-status-warning); }
.bes-cop--nomatch .ic { background: var(--bes-status-errorTint); color: var(--bes-status-error); }
.bes-cop b { display: block; font-size: var(--bes-type-bodyMd-size); margin-block-end: 2px; }
.bes-cop p { margin: 0; font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); line-height: 1.5; }

/* ---------- Progress & limit (docs 12, 13) ---------- */
.bes-progress { block-size: 8px; background: var(--bes-surface-tertiary); border-radius: var(--bes-radius-full); overflow: hidden; }
.bes-progress .fill { block-size: 100%; background: var(--bes-action-primary); border-radius: inherit; transition: inline-size var(--bes-motion-gentle) var(--bes-motion-easeStandard); }
.bes-progress--warn .fill { background: var(--bes-status-warning); }
.bes-progress--full .fill { background: var(--bes-status-error); }
.bes-limit .figures { display: flex; justify-content: space-between; font-size: var(--bes-type-bodyXs-size); margin-block-start: 6px; }
.bes-limit .figures .used { font-weight: 600; }
.bes-limit .reset { font-size: var(--bes-type-caption-size); color: var(--bes-text-secondary); margin-block-start: 3px; }

/* ---------- Skeleton ---------- */
.bes-skel { background: var(--bes-surface-tertiary); border-radius: var(--bes-radius-sm); animation: bes-pulse var(--bes-skeleton-duration) ease-in-out infinite; }
@keyframes bes-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .bes-skel { animation: none; } }

/* ---------- Modal & sheet (doc 11) ---------- */
.bes-scrim {
  position: fixed; inset: 0; background: var(--bes-elevation-overlay);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: var(--bes-z-modal);
}
.bes-scrim.open { display: flex; }
.bes-modal {
  background: var(--bes-surface-raised); border-radius: var(--bes-modal-radius);
  box-shadow: var(--bes-elevation-e3); max-inline-size: 440px; inline-size: 100%; padding: 24px;
}
.bes-modal h3 { margin: 0 0 8px; font-size: var(--bes-type-bodyLg-size); font-weight: 600; }
.bes-modal p { margin: 0 0 18px; font-size: var(--bes-type-bodySm-size); color: var(--bes-text-secondary); line-height: 1.55; }
.bes-modal .actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 640px) {
  .bes-scrim.sheet { align-items: flex-end; padding: 0; }
  .bes-scrim.sheet .bes-modal { border-end-start-radius: 0; border-end-end-radius: 0; max-inline-size: none; }
}

/* ---------- Toast ---------- */
.bes-toasts { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; display: flex; flex-direction: column; gap: 8px; z-index: var(--bes-z-toast); }
.bes-toast {
  background: var(--bes-surface-inverse); color: var(--bes-text-inverse);
  border-radius: var(--bes-radius-md); padding: 12px 18px; font-size: var(--bes-type-bodySm-size); font-weight: 500;
  box-shadow: var(--bes-elevation-e2); display: flex; gap: 10px; align-items: center;
}
/* Inverse surfaces flip in dark mode, so the text on them must flip too. The system
   branch MUST stay inside the media query: unguarded, :root:not([data-theme="light"])
   also matches the default un-stamped document and renders the toast at 1:1. */
:root[data-theme="dark"] .bes-toast { color: var(--bes-text-primary); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bes-toast { color: var(--bes-text-primary); }
}

/* ---------- Banner ---------- */
.bes-banner {
  display: flex; gap: 10px; align-items: center; padding: 11px 18px;
  font-size: var(--bes-type-bodySm-size); font-weight: 500; border-block-end: 1px solid var(--bes-border-default);
  background: var(--bes-status-infoTint); color: var(--bes-text-primary);
}
.bes-banner--security { background: var(--bes-status-warningTint); }
.bes-banner .ic { color: var(--bes-status-info); flex: none; }
.bes-banner--security .ic { color: var(--bes-status-warning); }

/* ---------- Table (doc 11) ---------- */
.bes-table-wrap { overflow-x: auto; border: 1px solid var(--bes-border-default); border-radius: var(--bes-radius-lg); }
.bes-table { border-collapse: collapse; inline-size: 100%; font-size: var(--bes-type-bodySm-size); min-inline-size: 560px; }
.bes-table th {
  text-align: start; font-size: var(--bes-type-caption-size); font-weight: 600; color: var(--bes-text-secondary);
  background: var(--bes-surface-secondary); padding: 10px var(--bes-density-cellPad);
  border-block-end: 1px solid var(--bes-border-default); white-space: nowrap;
}
.bes-table td { padding: 10px var(--bes-density-cellPad); border-block-end: 1px solid var(--bes-border-default); vertical-align: top; }
.bes-table tr:last-child td { border-block-end: none; }
.bes-table .num { text-align: end; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.bes-table tbody tr:hover { background: var(--bes-surface-secondary); }

/* ---------- Empty state ---------- */
.bes-empty { text-align: center; padding: 40px 24px; }
.bes-empty .t { font-weight: 600; font-size: var(--bes-type-body-size); margin-block-end: 4px; }
.bes-empty .s { font-size: var(--bes-type-bodySm-size); color: var(--bes-text-secondary); margin-block-end: 16px; }

/* ---------- Timeline (doc 15) ---------- */
.bes-timeline { list-style: none; margin: 0; padding: 0; }
.bes-timeline li { display: flex; gap: 12px; position: relative; padding-block-end: 20px; }
.bes-timeline li::before {
  content: ""; position: absolute; inset-inline-start: 11px; inset-block-start: 26px; inset-block-end: 0;
  inline-size: 2px; background: var(--bes-border-default);
}
.bes-timeline li:last-child::before { display: none; }
.bes-timeline .dot {
  inline-size: 24px; block-size: 24px; border-radius: var(--bes-dot-radius); flex: none; display: grid; place-items: center;
  background: var(--bes-surface-tertiary); color: var(--bes-text-secondary); font-size: var(--bes-type-micro-size); z-index: 1;
}
.bes-timeline .done .dot { background: var(--bes-status-success); color: var(--bes-text-onAction); }
.bes-timeline .current .dot { background: var(--bes-status-infoTint); color: var(--bes-status-info); outline: 2px solid var(--bes-status-info); }
.bes-timeline .t { font-size: var(--bes-type-bodySm-size); font-weight: 500; }
.bes-timeline .current .t { font-weight: 600; }
.bes-timeline .s { font-size: var(--bes-type-caption-size); color: var(--bes-text-secondary); }

/* ============================================================
   Wave 3–4 components (v1.0)
   ============================================================ */

/* ---------- Select (styled native) ---------- */
.bes-select { position: relative; }
.bes-select select {
  appearance: none; font: inherit; font-size: var(--bes-control-fontSize); color: var(--bes-text-primary);
  background: var(--bes-surface-primary); border: 1px solid var(--bes-border-input, var(--bes-border-strong));
  border-radius: var(--bes-control-radius); padding: 12px 14px; padding-inline-end: 40px;
  min-height: var(--bes-density-controlH); width: 100%; cursor: pointer;
}
.bes-select::after {
  content: ""; position: absolute; inset-inline-end: 14px; inset-block-start: 50%;
  width: 9px; height: 9px; border-inline-end: 2px solid var(--bes-text-secondary);
  border-block-end: 2px solid var(--bes-text-secondary);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.bes-select select:focus-visible { outline: 2px solid var(--bes-border-focus); outline-offset: 1px; }

/* ---------- Combobox ---------- */
.bes-combo { position: relative; }
.bes-combo-list {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px);
  background: var(--bes-surface-raised); border: 1px solid var(--bes-border-default);
  border-radius: var(--bes-control-radius); box-shadow: var(--bes-elevation-e2);
  max-block-size: 280px; overflow-y: auto; z-index: var(--bes-z-raised);
  margin: 0; padding: 6px; list-style: none;
}
.bes-combo-list[hidden] { display: none; }
.bes-combo-list li {
  padding: 10px 12px; border-radius: var(--bes-radius-sm); cursor: pointer; font-size: var(--bes-type-bodySm-size);
}
.bes-combo-list li .s { display: block; font-size: var(--bes-type-caption-size); color: var(--bes-text-secondary); }
.bes-combo-list li:hover, .bes-combo-list li[aria-selected="true"] { background: var(--bes-surface-tertiary); }
.bes-combo-list .empty { color: var(--bes-text-secondary); cursor: default; }
.bes-combo-count { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Date picker ---------- */
.bes-datepicker {
  background: var(--bes-surface-raised); border: 1px solid var(--bes-border-default);
  border-radius: var(--bes-radius-md); box-shadow: var(--bes-elevation-e2);
  padding: 14px; inline-size: 296px;
}
.bes-dp-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 8px; }
.bes-dp-head .m { font-weight: 600; font-size: var(--bes-type-bodySm-size); }
.bes-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.bes-dp-grid .wd { font-size: var(--bes-type-micro-size); font-weight: 600; color: var(--bes-text-secondary); text-align: center; padding: 6px 0; }
.bes-dp-grid button {
  font: inherit; font-size: var(--bes-type-bodyXs-size); font-variant-numeric: tabular-nums; cursor: pointer;
  background: none; border: none; border-radius: var(--bes-radius-sm);
  block-size: 36px; color: var(--bes-text-primary);
}
.bes-dp-grid button:hover { background: var(--bes-surface-tertiary); }
.bes-dp-grid button[aria-current="date"] { outline: 1.5px solid var(--bes-border-strong); }
.bes-dp-grid button[aria-selected="true"] { background: var(--bes-action-primary); color: var(--bes-text-onAction); }
.bes-dp-grid button:disabled, .bes-dp-grid button[aria-disabled="true"] { color: var(--bes-text-disabled); cursor: not-allowed; text-decoration: line-through; }
.bes-dp-note { font-size: var(--bes-type-caption-size); color: var(--bes-text-secondary); margin-block-start: 8px; }

/* ---------- Menu (action menu) ---------- */
.bes-menu {
  background: var(--bes-surface-raised); border: 1px solid var(--bes-border-default);
  border-radius: var(--bes-radius-md); box-shadow: var(--bes-elevation-e2);
  padding: 6px; min-inline-size: 200px; list-style: none; margin: 0;
}
.bes-menu button {
  font: inherit; font-size: var(--bes-type-bodySm-size); cursor: pointer; background: none; border: none;
  color: var(--bes-text-primary); border-radius: var(--bes-radius-sm);
  padding: 10px 12px; inline-size: 100%; text-align: start; display: flex; gap: 10px; align-items: center;
}
.bes-menu button:hover { background: var(--bes-surface-tertiary); }
.bes-menu .destructive button { color: var(--bes-action-destructive); }
.bes-menu .sep { border-block-start: 1px solid var(--bes-border-default); margin: 6px 4px; }

/* ---------- Accordion ---------- */
.bes-accordion { border: 1px solid var(--bes-border-default); border-radius: var(--bes-radius-md); }
.bes-accordion details { border-block-start: 1px solid var(--bes-border-default); }
.bes-accordion details:first-child { border-block-start: none; }
.bes-accordion summary {
  font-size: var(--bes-type-bodySm-size); font-weight: 600; padding: 14px 16px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; list-style: none;
}
.bes-accordion summary::-webkit-details-marker { display: none; }
.bes-accordion summary::after {
  content: ""; inline-size: 8px; block-size: 8px; flex: none;
  border-inline-end: 2px solid var(--bes-text-secondary); border-block-end: 2px solid var(--bes-text-secondary);
  transform: rotate(45deg); transition: transform var(--bes-motion-fast) var(--bes-motion-easeStandard);
}
.bes-accordion details[open] summary::after { transform: rotate(225deg); }
.bes-accordion .body { padding: 0 16px 14px; font-size: var(--bes-type-bodySm-size); color: var(--bes-text-secondary); line-height: 1.6; }

/* ---------- Drawer ---------- */
.bes-drawer-scrim { position: fixed; inset: 0; background: var(--bes-elevation-overlay); display: none; z-index: var(--bes-z-drawer); }
.bes-drawer-scrim.open { display: block; }
.bes-drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(440px, 92vw);
  background: var(--bes-surface-raised); box-shadow: var(--bes-elevation-e3);
  z-index: calc(var(--bes-z-drawer) + 1); display: none; flex-direction: column;
}
.bes-drawer.open { display: flex; }
.bes-drawer .head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-block-end: 1px solid var(--bes-border-default); }
.bes-drawer .head h3 { margin: 0; font-size: var(--bes-type-body-size); font-weight: 600; }
.bes-drawer .body { padding: 20px; overflow-y: auto; flex: 1; }

/* ---------- Popover & tooltip ---------- */
.bes-pop { position: relative; display: inline-block; }
.bes-pop .tip {
  position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%);
  background: var(--bes-surface-inverse); color: var(--bes-text-inverse);
  font-size: var(--bes-type-caption-size); font-weight: 500; padding: 6px 10px; border-radius: var(--bes-radius-sm);
  white-space: nowrap; opacity: 0; pointer-events: none; z-index: var(--bes-z-raised);
  transition: opacity var(--bes-motion-fast) var(--bes-motion-easeStandard);
}
[dir="rtl"] .bes-pop .tip { transform: translateX(50%); }
.bes-pop:hover .tip, .bes-pop:focus-within .tip { opacity: 1; }
:root[data-theme="dark"] .bes-pop .tip { color: var(--bes-text-primary); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bes-pop .tip { color: var(--bes-text-primary); }
}

/* ---------- Breadcrumb & pagination ---------- */
.bes-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--bes-type-bodyXs-size); list-style: none; margin: 0; padding: 0; }
.bes-breadcrumb li { display: flex; gap: 6px; align-items: center; }
.bes-breadcrumb li + li::before {
  content: ""; inline-size: 6px; block-size: 6px;
  border-inline-end: 1.5px solid var(--bes-text-disabled); border-block-end: 1.5px solid var(--bes-text-disabled);
  transform: rotate(-45deg);
}
[dir="rtl"] .bes-breadcrumb li + li::before { transform: rotate(135deg); }
.bes-breadcrumb a { color: var(--bes-text-secondary); text-decoration: none; }
.bes-breadcrumb a:hover { color: var(--bes-text-link); text-decoration: underline; }
.bes-breadcrumb [aria-current="page"] { color: var(--bes-text-primary); font-weight: 500; }
.bes-pagination { display: flex; align-items: center; gap: 10px; font-size: var(--bes-type-bodyXs-size); }
.bes-pagination .range { color: var(--bes-text-secondary); font-variant-numeric: tabular-nums; }

/* ---------- Character count ---------- */
.bes-charcount { font-size: var(--bes-type-caption-size); color: var(--bes-text-secondary); text-align: end; font-variant-numeric: tabular-nums; }
.bes-charcount.over { color: var(--bes-status-error); font-weight: 600; }

/* ---------- File upload ---------- */
.bes-upload {
  border: 1.5px dashed var(--bes-border-input, var(--bes-border-strong)); border-radius: var(--bes-radius-md);
  padding: 24px; text-align: center; background: var(--bes-surface-secondary);
}
.bes-upload.drag { border-color: var(--bes-action-primary); background: var(--bes-surface-tertiary); }
.bes-upload .hint { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); margin-block-start: 6px; }
.bes-file {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--bes-border-default); border-radius: var(--bes-radius-md); margin-block-start: 8px;
}
.bes-file .n { flex: 1; font-size: var(--bes-type-bodySm-size); direction: ltr; unicode-bidi: isolate; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bes-file .meta { font-size: var(--bes-type-caption-size); color: var(--bes-text-secondary); }

/* ---------- PIN / code entry ---------- */
.bes-pin { display: flex; gap: 10px; direction: ltr; }
.bes-pin input {
  font: inherit; font-size: var(--bes-type-h3-size); font-weight: 700; text-align: center;
  inline-size: 48px; block-size: 56px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--bes-border-input, var(--bes-border-strong)); border-radius: var(--bes-control-radius);
  background: var(--bes-surface-primary); color: var(--bes-text-primary);
  -webkit-text-security: disc;
}
.bes-pin--code input { -webkit-text-security: none; }
.bes-pin input:focus-visible { outline: 2px solid var(--bes-border-focus); outline-offset: 1px; border-color: var(--bes-border-focus); }
.bes-pin.error input { border-color: var(--bes-border-error); }
.bes-attempts { font-size: var(--bes-type-bodyXs-size); color: var(--bes-status-error); font-weight: 500; margin-block-start: 8px; }

/* ---------- Rate lock timer ---------- */
.bes-ratelock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--bes-type-bodyXs-size); font-weight: 600; color: var(--bes-status-success); font-variant-numeric: tabular-nums; }
.bes-ratelock.warn { color: var(--bes-status-warning); }
.bes-ratelock.expired { color: var(--bes-status-error); text-decoration: line-through; }

/* ---------- Amount delta ---------- */
.bes-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--bes-type-bodyXs-size); font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.bes-delta--up { color: var(--bes-financial-income); }
.bes-delta--down { color: var(--bes-financial-negative); }
.bes-delta--flat { color: var(--bes-text-secondary); }
.bes-delta .tf { color: var(--bes-text-secondary); font-weight: 400; }

/* ---------- Card art ---------- */
.bes-cardart {
  inline-size: var(--bes-cardArt-inlineSize); aspect-ratio: 1.586;
  border-radius: var(--bes-cardArt-radius); padding: var(--bes-cardArt-pad);
  background: linear-gradient(135deg, var(--bes-cardArt-from), var(--bes-cardArt-to));
  color: var(--bes-cardArt-ink); display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.bes-cardart .bank { font-size: var(--bes-type-bodyXs-size); font-weight: 600; letter-spacing: var(--bes-cardArt-trackWide); }
.bes-cardart .pan { font-size: var(--bes-type-body-size); font-weight: 600; letter-spacing: var(--bes-cardArt-track); font-variant-numeric: tabular-nums; direction: ltr; }
.bes-cardart .row { display: flex; justify-content: space-between; align-items: flex-end; }
.bes-cardart .holder { font-size: var(--bes-type-caption-size); opacity: .85; text-transform: uppercase; letter-spacing: var(--bes-cardArt-trackWide); }
.bes-cardart .schemes { display: flex; gap: 6px; align-items: center; font-size: var(--bes-type-micro-size); font-weight: 700; opacity: .95; }
.bes-cardart--virtual::after {
  content: "VIRTUAL"; position: absolute; inset-block-start: 14px; inset-inline-end: 14px;
  font-size: var(--bes-type-micro-size); font-weight: 700; letter-spacing: var(--bes-cardArt-trackWide); background: var(--bes-cardArt-badgeBg);
  padding: 3px 8px; border-radius: var(--bes-cardArt-badgeRadius);
}
.bes-cardart--frozen { filter: saturate(.25) brightness(1.06); }
.bes-cardart--frozen::before {
  content: "FROZEN"; position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--bes-type-bodyXs-size); font-weight: 700; letter-spacing: var(--bes-cardArt-track); background: var(--bes-cardArt-frozenBg); backdrop-filter: blur(1.5px);
}

/* ---------- Repayment schedule ---------- */
.bes-schedule .paid td { color: var(--bes-text-secondary); }
.bes-schedule .due td { font-weight: 600; }

/* ---------- Risk indicator ---------- */
.bes-risk { display: flex; flex-direction: column; gap: 6px; max-inline-size: 340px; }
.bes-risk .scale { display: flex; gap: 3px; }
.bes-risk .scale span { flex: 1; block-size: 8px; border-radius: var(--bes-risk-barRadius); background: var(--bes-surface-tertiary); }
.bes-risk .scale span.on { background: var(--bes-status-warning); }
.bes-risk--low .scale span.on { background: var(--bes-status-success); }
.bes-risk--high .scale span.on { background: var(--bes-status-error); }
.bes-risk .meaning { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); line-height: 1.5; }
.bes-risk .lvl { font-size: var(--bes-type-bodyXs-size); font-weight: 600; }

/* ---------- Charts ---------- */
.bes-chart { inline-size: 100%; }
.bes-chart svg { display: block; inline-size: 100%; block-size: auto; }
.bes-chart .axis { stroke: var(--bes-border-default); stroke-width: 1; }
.bes-chart .gridline { stroke: var(--bes-border-default); stroke-width: 1; stroke-dasharray: 2 3; }
.bes-chart text { font-family: inherit; font-size: var(--bes-type-micro-size); fill: var(--bes-text-secondary); font-variant-numeric: tabular-nums; }
.bes-chart .lbl-strong { fill: var(--bes-text-primary); font-weight: 600; }
.bes-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--bes-type-caption-size); margin-block-start: 8px; }
.bes-chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--bes-text-secondary); }
.bes-chart-legend i { inline-size: 10px; block-size: 10px; border-radius: var(--bes-chart-swatchRadius); }
.bes-chart-table-link { font-size: var(--bes-type-caption-size); font-weight: 600; }

/* ---------- Notification item ---------- */
.bes-notif { display: flex; gap: 12px; padding: 14px 16px; border-block-start: 1px solid var(--bes-border-default); align-items: flex-start; }
.bes-notif:first-child { border-block-start: none; }
.bes-notif .ic { inline-size: 34px; block-size: 34px; border-radius: var(--bes-dot-radius); display: grid; place-items: center; flex: none; background: var(--bes-surface-tertiary); color: var(--bes-text-secondary); }
.bes-notif--security .ic { background: var(--bes-status-warningTint); color: var(--bes-status-warning); }
.bes-notif--fraud .ic { background: var(--bes-status-errorTint); color: var(--bes-status-error); }
.bes-notif .t { font-size: var(--bes-type-bodySm-size); font-weight: 500; }
.bes-notif .s { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); }
.bes-notif .when { font-size: var(--bes-type-caption-size); color: var(--bes-text-secondary); margin-inline-start: auto; white-space: nowrap; }

/* ---------- Session pause interruption ---------- */
.bes-interrupt {
  position: fixed; inset: 0; z-index: var(--bes-z-critical);
  background: var(--bes-surface-primary); display: none;
  align-items: center; justify-content: center; padding: 24px;
}
.bes-interrupt.open { display: flex; }
.bes-interrupt .box { max-inline-size: 440px; text-align: center; }
.bes-interrupt h2 { font-size: var(--bes-type-h3-size); font-weight: 700; margin: 16px 0 8px; }
.bes-interrupt p { color: var(--bes-text-secondary); line-height: 1.6; margin: 0 0 10px; }
.bes-interrupt .actions { display: flex; flex-direction: column; gap: 10px; margin-block-start: 20px; }

/* ---------- Spaces / goal card ---------- */
.bes-goal .head { display: flex; justify-content: space-between; align-items: center; margin-block-end: 10px; }
.bes-goal .name { font-weight: 600; }
.bes-goal .figs { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); margin-block-start: 6px; }
.bes-goal .figs b { color: var(--bes-text-primary); font-variant-numeric: tabular-nums; }

/* ---------- Journey shell (flows) ---------- */
.bes-journey { max-inline-size: 480px; margin-inline: auto; }
.bes-journey .screen { display: none; }
.bes-journey .screen.on { display: block; }
.bes-journey-bar { display: flex; align-items: center; gap: 12px; padding-block: 14px; }
.bes-journey-bar .step-label { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); font-weight: 500; }
.bes-journey-bar h2 { font-size: var(--bes-type-h3-size); font-weight: 600; margin: 0; flex: 1; }
.bes-result { text-align: center; padding: 28px 0 8px; }
.bes-result .ic { inline-size: 64px; block-size: 64px; border-radius: var(--bes-dot-radius); display: grid; place-items: center; margin-inline: auto; margin-block-end: 16px; }
.bes-result--completed .ic { background: var(--bes-transaction-completedTint); color: var(--bes-transaction-completed); }
.bes-result--pending .ic { background: var(--bes-transaction-pendingTint); color: var(--bes-transaction-pending); }
.bes-result--unknown .ic { background: var(--bes-transaction-unknownTint); color: var(--bes-transaction-unknown); }
.bes-result--failed .ic { background: var(--bes-transaction-failedTint); color: var(--bes-transaction-failed); }
.bes-result--blocked .ic { background: var(--bes-transaction-blockedTint); color: var(--bes-transaction-blocked); }
.bes-result--refunded .ic { background: var(--bes-transaction-refundedTint); color: var(--bes-transaction-refunded); }
.bes-result--reversed .ic { background: var(--bes-transaction-reversedTint); color: var(--bes-transaction-reversed); }
.bes-result--disputed .ic { background: var(--bes-transaction-disputedTint); color: var(--bes-transaction-disputed); }
.bes-result--cancelled .ic { background: var(--bes-transaction-cancelledTint); color: var(--bes-transaction-cancelled); }
.bes-result h2 { font-size: var(--bes-type-h3-size); font-weight: 700; margin: 0 0 6px; }
.bes-result .money-state { font-size: var(--bes-type-bodySm-size); color: var(--bes-text-secondary); margin: 6px 0 0; line-height: 1.55; }

/* ---------- Receipt ---------- */
.bes-receipt { background: var(--bes-surface-primary); border: 1px solid var(--bes-border-default); border-radius: var(--bes-radius-sm); padding: 24px; }
.bes-receipt .head { display: flex; justify-content: space-between; align-items: center; border-block-end: 2px solid var(--bes-border-strong); padding-block-end: 12px; margin-block-end: 12px; }
.bes-receipt .title { font-weight: 700; font-size: var(--bes-type-bodyMd-size); }
.bes-receipt .ref { font-size: var(--bes-type-caption-size); color: var(--bes-text-secondary); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
@media print {
  /* Scoped: pages opt in by adding .bes-print-receipt to <body> before window.print() */
  body.bes-print-receipt * { visibility: hidden; }
  body.bes-print-receipt .bes-receipt, body.bes-print-receipt .bes-receipt * { visibility: visible; }
  body.bes-print-receipt .bes-receipt { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; border: none; }
}


/* ---------- v1.0.1 scrutiny additions ---------- */
/* Arabic script rules (moved out of the generated token file; normal specificity) */
:lang(ar) { letter-spacing: 0; }
:lang(ar) button, :lang(ar) input, :lang(ar) .bes-label { letter-spacing: 0; }
.bes-vh { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* class-based masking: value hidden, currency label kept, no stale snapshots.
   bes.js wraps the amount in .bes-mask-val on bind — amounts are authored as bare text
   nodes, which a child selector cannot reach; display:none also takes the digits out of
   the accessibility tree, and a visually-hidden [data-mask-sr] span carries the
   replacement text for assistive tech. */
.bes-masked > .bes-mask-val { display: none; }
.bes-masked::after { content: "•••••"; letter-spacing: .1em; }
/* Payee verification — fourth state: name check unavailable at recipient bank */
.bes-cop--unavailable .ic { background: var(--bes-surface-tertiary); color: var(--bes-text-secondary); }
/* sortable header button + visible direction indicator */
.bes-sortbtn { font: inherit; font-weight: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.bes-sortbtn::after { content: "↕"; opacity: .45; font-size: var(--bes-type-micro-size); }
th[aria-sort="ascending"] .bes-sortbtn::after { content: "↑"; opacity: 1; }
th[aria-sort="descending"] .bes-sortbtn::after { content: "↓"; opacity: 1; }
.bes-combo-list li.active { background: var(--bes-surface-tertiary); }
.bes-chart-empty { font-size: var(--bes-type-bodyXs-size); color: var(--bes-text-secondary); border: 1px dashed var(--bes-border-input); border-radius: var(--bes-radius-md); padding: 18px; text-align: center; }