/* ============================================================
   Prism live-css snapshot — fallback for atlas-web DS2 components

   This file is a snapshot of Prism's live-css endpoint for the
   Autonomous App project (project id 690d808b-7743-49cb-84ea-
   c0d3e97c84c7). It is loaded BEFORE Prism's live-css <link> in
   layout.tsx so the cascade resolves as:
     1. This snapshot provides every class + token if Prism is
        unreachable or the live-css lacks the needed rule.
     2. Prism's live-css <link> loads after and overrides any
        rule it DOES provide (later = wins at equal specificity).

   REFRESH: run 'pnpm refresh:prism-css' in apps/atlas-web to
   re-fetch from the local Prism dev server. Commit the updated
   file.

   DEPRECATION: once production Prism's publish step is live and
   carries every class atlas-web consumes, this fallback can be
   removed and layout.tsx can load only the live-css link.
   ============================================================ */

/* Theme-agnostic tokens (greys, alerts, brand, typography, spacing, radii). */
:root {
  --atg-aa-color-grey-100: #707785;
  --atg-aa-color-grey-70: rgba(112, 119, 133, 0.7);
  --atg-aa-color-grey-50: rgba(112, 119, 133, 0.5);
  --atg-aa-color-grey-30: rgba(112, 119, 133, 0.3);
  --atg-aa-color-grey-15: rgba(112, 119, 133, 0.15);
  --atg-aa-color-grey-10: rgba(112, 119, 133, 0.1);
  --atg-aa-color-grey-5: rgba(112, 119, 133, 0.05);
  --atg-aa-color-alerts-error: #DB3C3C;
  --atg-aa-color-alerts-positive: #29A893;
  --atg-aa-color-alerts-attention: #A8A429;
  --atg-aa-color-internal-use-card-bg: #2163D0;
  --atg-aa-color-internal-use-card-child-bg: #687487;
  --atg-aa-font-headlines-headlines-bold: 400 96px/110% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-headlines-headlines-bold: 96px;
  --atg-aa-font-weight-headlines-headlines-bold: 400;
  --atg-aa-line-height-headlines-headlines-bold: 110%;
  --atg-aa-letter-spacing-headlines-headlines-bold: -3.5%;
  --atg-aa-font-headlines-headlines: 400 96px/110% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-headlines-headlines: 96px;
  --atg-aa-font-weight-headlines-headlines: 400;
  --atg-aa-line-height-headlines-headlines: 110%;
  --atg-aa-letter-spacing-headlines-headlines: -3.5%;
  --atg-aa-font-text-big-number: 400 64px/100% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-big-number: 64px;
  --atg-aa-font-weight-text-big-number: 400;
  --atg-aa-line-height-text-big-number: 100%;
  --atg-aa-letter-spacing-text-big-number: -2.5%;
  --atg-aa-font-text-xxl-bold: 400 48px/130% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-xxl-bold: 48px;
  --atg-aa-font-weight-text-xxl-bold: 400;
  --atg-aa-line-height-text-xxl-bold: 130%;
  --atg-aa-letter-spacing-text-xxl-bold: -2.5%;
  --atg-aa-font-text-xxl: 400 48px/130% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-xxl: 48px;
  --atg-aa-font-weight-text-xxl: 400;
  --atg-aa-line-height-text-xxl: 130%;
  --atg-aa-letter-spacing-text-xxl: -2.5%;
  --atg-aa-font-text-xl-bold: 400 40px/130% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-xl-bold: 40px;
  --atg-aa-font-weight-text-xl-bold: 400;
  --atg-aa-line-height-text-xl-bold: 130%;
  --atg-aa-letter-spacing-text-xl-bold: -2%;
  --atg-aa-font-text-xl: 400 40px/130% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-xl: 40px;
  --atg-aa-font-weight-text-xl: 400;
  --atg-aa-line-height-text-xl: 130%;
  --atg-aa-letter-spacing-text-xl: -2%;
  --atg-aa-font-text-m-bold: 400 28px/120% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-m-bold: 28px;
  --atg-aa-font-weight-text-m-bold: 400;
  --atg-aa-line-height-text-m-bold: 120%;
  --atg-aa-letter-spacing-text-m-bold: -2%;
  --atg-aa-font-text-m: 400 28px/120% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-m: 28px;
  --atg-aa-font-weight-text-m: 400;
  --atg-aa-line-height-text-m: 120%;
  --atg-aa-letter-spacing-text-m: -2%;
  --atg-aa-font-text-s-bold: 500 18px/140% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-s-bold: 18px;
  --atg-aa-font-weight-text-s-bold: 500;
  --atg-aa-line-height-text-s-bold: 140%;
  --atg-aa-letter-spacing-text-s-bold: -1.5%;
  --atg-aa-font-text-schat: 400 20px/146% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-schat: 20px;
  --atg-aa-font-weight-text-schat: 400;
  --atg-aa-line-height-text-schat: 146%;
  --atg-aa-letter-spacing-text-schat: -1.5%;
  --atg-aa-font-text-s: 400 18px/146% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-s: 18px;
  --atg-aa-font-weight-text-s: 400;
  --atg-aa-line-height-text-s: 146%;
  --atg-aa-letter-spacing-text-s: -1.5%;
  --atg-aa-font-text-xs: 400 15px/150% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-xs: 15px;
  --atg-aa-font-weight-text-xs: 400;
  --atg-aa-line-height-text-xs: 150%;
  --atg-aa-letter-spacing-text-xs: -0.75%;
  --atg-aa-font-text-xs-x-button: 400 16px/146% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-xs-x-button: 16px;
  --atg-aa-font-weight-text-xs-x-button: 400;
  --atg-aa-line-height-text-xs-x-button: 146%;
  --atg-aa-letter-spacing-text-xs-x-button: -1%;
  --atg-aa-text-box-trim-text-xs-x-button: trim-both;
  --atg-aa-text-box-edge-text-xs-x-button: cap alphabetic;
  --atg-aa-font-text-xxs-bold: 400 14px/146% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-xxs-bold: 14px;
  --atg-aa-font-weight-text-xxs-bold: 400;
  --atg-aa-line-height-text-xxs-bold: 146%;
  --atg-aa-letter-spacing-text-xxs-bold: -1%;
  --atg-aa-font-text-xxs: 400 14px/146% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-xxs: 14px;
  --atg-aa-font-weight-text-xxs: 400;
  --atg-aa-line-height-text-xxs: 146%;
  --atg-aa-letter-spacing-text-xxs: -1%;
  --atg-aa-font-text-caption: 400 12px/140% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-caption: 12px;
  --atg-aa-font-weight-text-caption: 400;
  --atg-aa-line-height-text-caption: 140%;
  --atg-aa-letter-spacing-text-caption: -1%;
  --atg-aa-font-text-chip-bold: 500 9px/100% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-chip-bold: 9px;
  --atg-aa-font-weight-text-chip-bold: 500;
  --atg-aa-line-height-text-chip-bold: 100%;
  --atg-aa-letter-spacing-text-chip-bold: -1%;
  --atg-aa-text-box-trim-text-chip-bold: trim-both;
  --atg-aa-text-box-edge-text-chip-bold: cap alphabetic;
  --atg-aa-font-text-chip: 400 9px/100% 'ABC Diatype', sans-serif;
  --atg-aa-font-size-text-chip: 9px;
  --atg-aa-font-weight-text-chip: 400;
  --atg-aa-line-height-text-chip: 100%;
  --atg-aa-letter-spacing-text-chip: -1%;
  --atg-aa-text-box-trim-text-chip: trim-both;
  --atg-aa-text-box-edge-text-chip: cap alphabetic;
  --atg-aa-font-secondary-10: 400 10px/140% 'ABC Diatype Mono Unlicensed Trial', sans-serif;
  --atg-aa-font-size-secondary-10: 10px;
  --atg-aa-font-weight-secondary-10: 400;
  --atg-aa-line-height-secondary-10: 140%;
  --atg-aa-letter-spacing-secondary-10: 1.5%;
  --atg-aa-text-box-trim-secondary-10: trim-both;
  --atg-aa-text-box-edge-secondary-10: cap alphabetic;
  --atg-aa-font-secondary-12: 400 12px/140% 'ABC Diatype Mono Unlicensed Trial', sans-serif;
  --atg-aa-font-size-secondary-12: 12px;
  --atg-aa-font-weight-secondary-12: 400;
  --atg-aa-line-height-secondary-12: 140%;
  --atg-aa-letter-spacing-secondary-12: 1.5%;
  --atg-aa-text-box-trim-secondary-12: trim-both;
  --atg-aa-text-box-edge-secondary-12: cap alphabetic;
  --atg-aa-font-secondary-14: 400 14px/140% 'ABC Diatype Mono Unlicensed Trial', sans-serif;
  --atg-aa-font-size-secondary-14: 14px;
  --atg-aa-font-weight-secondary-14: 400;
  --atg-aa-line-height-secondary-14: 140%;
  --atg-aa-letter-spacing-secondary-14: 2%;
  --atg-aa-text-box-trim-secondary-14: trim-both;
  --atg-aa-text-box-edge-secondary-14: cap alphabetic;
  --atg-aa-font-secondary-16: 400 16px/140% 'ABC Diatype Mono Unlicensed Trial', sans-serif;
  --atg-aa-font-size-secondary-16: 16px;
  --atg-aa-font-weight-secondary-16: 400;
  --atg-aa-line-height-secondary-16: 140%;
  --atg-aa-letter-spacing-secondary-16: 2%;
  --atg-aa-text-box-trim-secondary-16: trim-both;
  --atg-aa-text-box-edge-secondary-16: cap alphabetic;
  --atg-aa-font-secondary-18: 400 18px/140% 'ABC Diatype Mono Unlicensed Trial', sans-serif;
  --atg-aa-font-size-secondary-18: 18px;
  --atg-aa-font-weight-secondary-18: 400;
  --atg-aa-line-height-secondary-18: 140%;
  --atg-aa-letter-spacing-secondary-18: 2%;
  --atg-aa-text-box-trim-secondary-18: trim-both;
  --atg-aa-text-box-edge-secondary-18: cap alphabetic;
  --atg-aa-spacing-spacing-none: 0px;
  --atg-aa-spacing-spacing-xxxsmall: 4px;
  --atg-aa-spacing-spacing-xxsmall: 8px;
  --atg-aa-spacing-spacing-xsmall: 12px;
  --atg-aa-spacing-spacing-small: 16px;
  --atg-aa-spacing-spacing-medium-pad: 20px;
  --atg-aa-spacing-spacing-medium: 24px;
  --atg-aa-spacing-spacing-large: 32px;
  --atg-aa-spacing-spacing-xlarge: 64px;
  --atg-aa-radius-radius-xxsmall: 4px;
  --atg-aa-radius-radius-xsmall-2: 8px;
  --atg-aa-radius-radius-small: 16px;
  --atg-aa-radius-radius-medium: 24px;
  --atg-aa-radius-radius-large: 32px;
  --atg-aa-radius-radius-iphone: 52px;
  --atg-aa-radius-radius-xlarge: 64px;
}

/* Theme-aware semantic tokens. Light and dark modes are fully symmetric:
   black tokens and white tokens both invert; greys and alerts (above) stay
   constant. `html.light` / `html.dark` resolve at specificity 0,1,1, which
   beats any `:root` declaration (0,1,0) emitted by Prism's live-css <link>
   loaded after this file — so the theme values are authoritative regardless
   of what Prism currently serves. `:root` copy in the light block protects
   the pre-hydration paint when next-themes has not yet set the class. */
:root, html.light {
  --atg-aa-color-black-100: #020203;
  --atg-aa-color-black-70: rgba(2, 2, 3, 0.7);
  --atg-aa-color-black-50: rgba(2, 2, 3, 0.5);
  --atg-aa-color-black-30: rgba(2, 2, 3, 0.3);
  --atg-aa-color-black-15: rgba(2, 2, 3, 0.15);
  --atg-aa-color-black-10: rgba(2, 2, 3, 0.1);
  --atg-aa-color-black-5: rgba(2, 2, 3, 0.05);
  --atg-aa-color-white-100: #FCFCFD;
  --atg-aa-color-white-70: rgba(252, 252, 253, 0.7);
  --atg-aa-color-white-50: rgba(252, 252, 253, 0.5);
  --atg-aa-color-white-30: rgba(252, 252, 253, 0.3);
  --atg-aa-color-white-20: rgba(252, 252, 253, 0.2);
  --atg-aa-color-white-10: rgba(252, 252, 253, 0.1);
  --atg-aa-color-white-5: rgba(252, 252, 253, 0.05);
}
html.dark {
  --atg-aa-color-black-100: #FCFCFD;
  --atg-aa-color-black-70: rgba(252, 252, 253, 0.7);
  --atg-aa-color-black-50: rgba(252, 252, 253, 0.5);
  --atg-aa-color-black-30: rgba(252, 252, 253, 0.3);
  --atg-aa-color-black-15: rgba(252, 252, 253, 0.15);
  --atg-aa-color-black-10: rgba(252, 252, 253, 0.1);
  --atg-aa-color-black-5: rgba(252, 252, 253, 0.05);
  --atg-aa-color-white-100: #020203;
  --atg-aa-color-white-70: rgba(2, 2, 3, 0.7);
  --atg-aa-color-white-50: rgba(2, 2, 3, 0.5);
  --atg-aa-color-white-30: rgba(2, 2, 3, 0.3);
  --atg-aa-color-white-20: rgba(2, 2, 3, 0.2);
  --atg-aa-color-white-10: rgba(2, 2, 3, 0.1);
  --atg-aa-color-white-5: rgba(2, 2, 3, 0.05);
}

.atg-aa-color-black-100 { color: var(--atg-aa-color-black-100); }

.atg-aa-bg-black-100 { background-color: var(--atg-aa-color-black-100); }

.atg-aa-color-white-100 { color: var(--atg-aa-color-white-100); }

.atg-aa-bg-white-100 { background-color: var(--atg-aa-color-white-100); }

.atg-aa-color-grey-100 { color: var(--atg-aa-color-grey-100); }

.atg-aa-bg-grey-100 { background-color: var(--atg-aa-color-grey-100); }

.atg-aa-color-grey-30 { color: var(--atg-aa-color-grey-30); }

.atg-aa-bg-grey-30 { background-color: var(--atg-aa-color-grey-30); }

.atg-aa-bg-grey-15 { background-color: var(--atg-aa-color-grey-15); }

.atg-aa-secondary-10 {
  font-family: 'ABC Diatype Mono Unlicensed Trial', sans-serif;
  font-size: var(--atg-aa-font-size-secondary-10);
  font-weight: var(--atg-aa-font-weight-secondary-10);
  line-height: var(--atg-aa-line-height-secondary-10);
  letter-spacing: var(--atg-aa-letter-spacing-secondary-10);
  text-transform: uppercase;
  text-box-trim: var(--atg-aa-text-box-trim-secondary-10);
  text-box-edge: var(--atg-aa-text-box-edge-secondary-10);
}

.atg-aa-secondary-12 {
  font-family: 'ABC Diatype Mono Unlicensed Trial', sans-serif;
  font-size: var(--atg-aa-font-size-secondary-12);
  font-weight: var(--atg-aa-font-weight-secondary-12);
  line-height: var(--atg-aa-line-height-secondary-12);
  letter-spacing: var(--atg-aa-letter-spacing-secondary-12);
  text-transform: uppercase;
  text-box-trim: var(--atg-aa-text-box-trim-secondary-12);
  text-box-edge: var(--atg-aa-text-box-edge-secondary-12);
}

.atg-aa-gap-spacing-xxsmall { gap: var(--atg-aa-spacing-spacing-xxsmall); }

.atg-aa-radius-radius-small { border-radius: var(--atg-aa-radius-radius-small); }

.atg-aa-radius-radius-iphone { border-radius: var(--atg-aa-radius-radius-iphone); }

/* ===== Component Styles ===== */

/* Component: Cards/KPISmall */

/* Component: Card KPI Medium */

/* Component: Cards/Chat Artifact */
/* Base card */
.chat-artifact {
  display: flex;
  width: 343px;
  padding: var(--atg-aa-spacing-medium, 24px) var(--atg-aa-spacing-medium-pad, 20px);
  align-items: center;
  gap: var(--atg-aa-spacing-small, 16px);
  border-radius: 16px;
  border: 0.5px solid var(--atg-aa-grey-50, rgba(112, 119, 133, 0.50));
}

/* Portfolio icon */

/* Default (file) icon */

/* Text content wrapper */

/* Title — dark mode */

/* Title — light mode */

/* Status — same in all variants */

/* Action button */

/* Action label — dark mode */

/* Action label — light mode */

/* Icon color — dark mode */

/* Icon color — light mode */

/* Component: Scrim */
.scrim {
  display: flex;
  width: 375px;
  height: 812px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Component: Search */
/* Base component */
.search {
  display: flex;
  width: 343px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--atg-aa-spacing-spacing-small);
}

/* Size variants */

/* Icon container */

/* Mode variants — icon color */

/* Divider */

/* Component: Toast */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Toast base ── */
.toast {
  display: flex;
  width: 343px;
  align-items: center;
  gap: var(--atg-aa-spacing-spacing-small);
  border-radius: 14px;
  border: 1px solid rgba(252, 252, 253, 0.10);
}

/* Mode */

/* Type — padding */

/* Container */

/* Label */

/* Message */

/* Right icon (X / caret-right) */

/* Action icon — bulb inside container */

/* Insight — institution avatar */

/* Action link */

/* Variant: Mode=Dark, Alertness=Attention, Type=Inline */

/* Variant: Mode=Dark, Alertness=Critical, Type=Floating */

/* Variant: Mode=Dark, Alertness=Critical, Type=Inline */

/* Variant: Mode=Dark, Alertness=Regular, Type=Floating */

/* Variant: Mode=Dark, Alertness=Regular, Type=Inline */

/* Variant: Mode=Dark, Alertness=Regular, Type=Action */

/* Variant: Mode=Dark, Alertness=Regular, Type=Insight */

/* Variant: Mode=Light, Alertness=Attention, Type=Floating */

/* Variant: Mode=Light, Alertness=Attention, Type=Inline */

/* Variant: Mode=Light, Alertness=Critical, Type=Floating */

/* Variant: Mode=Light, Alertness=Critical, Type=Inline */

/* Variant: Mode=Light, Alertness=Regular, Type=Floating */

/* Variant: Mode=Light, Alertness=Regular, Type=Inline */

/* Variant: Mode=Light, Alertness=Regular, Type=Action */

/* Variant: Mode=Light, Alertness=Regular, Type=Insight */

/* Component: Toggle */
.toggle {
  position: relative;
  display: inline-block;
  border-radius: 36px;
  box-sizing: border-box;
  cursor: pointer;
}

/* Sizes */

/* Track borders by mode */

/* Knob */

/* Default knob sizing + vertical centering */

/* Small knob sizing + vertical centering */

/* OFF: knob left */

/* ON: knob right */

/* Knob colors */

/* Component: Vault Indicator */

/* Component: VaultHero */

  

  

  

  

  

/* Component: Waving Dots */

/* Light variant */

/* Dark variant */

/* Component: Navigation/TimeRangeSelector */
/* Design Tokens */

/* TimeRangeSelector — all variants */

/* Dark variant */

/* Light variant */

/* Component: Navigation/Tabs */
/* Tabs container */
.tabs {
  display: inline-flex;
  padding: var(--atg-aa-spacing-spacing-small) 0;
  align-items: center;
}

/* Tab button base */

/* Tab label base */

/* Dark mode — active tab */

/* Light mode — active tab */

/* Component: Navigation/MainApp */

/* Component: modal-drag-handle */

/* Component: List/TickerChange */

/* Dark mode */

/* Light mode */

/* Action variants */

/* Component: List/Sources */
.sources {
  display: flex;
  width: 343px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--atg-aa-spacing-spacing-none);
}

/* Variant: Mode=Dark */

/* Component: List/RowLarge */

/* Dark variant */

/* Light variant */

/* Component: List/RowContent */
/* Base */

/* 2-col spread */

/* 3-col stacked */

/* 2-col stacked */

/* Title wrapper */

/* Title */

/* Value */

/* Icon */

/* Variant: Mode=Dark, Size=Small, Type=2-col horz */

/* Variant: Mode=Dark, Size=XSmall, Type=2-col horz */

/* Variant: Mode=Dark, Size=Medium, Type=2-col spread */

/* Variant: Mode=Dark, Size=Small, Type=3-col stacked */

/* Variant: Mode=Dark, Size=Medium, Type=3-col stacked */

/* Variant: Mode=Dark, Size=XSmall, Type=3-col stacked */

/* Variant: Mode=Dark, Size=Small, Type=2-col spread */

/* Variant: Mode=Dark, Size=XSmall, Type=2-col spread */

/* Variant: Mode=Dark, Size=XSmall, Type=2-col stacked */

/* Variant: Mode=Dark, Size=Small, Type=2-col stacked */

/* Variant: Mode=Dark, Size=Medium, Type=2-col stacked */

/* Variant: Mode=Light, Size=Medium, Type=2-col horz */

/* Variant: Mode=Light, Size=Small, Type=2-col horz */

/* Variant: Mode=Light, Size=XSmall, Type=2-col horz */

/* Variant: Mode=Light, Size=Medium, Type=2-col spread */

/* Variant: Mode=Light, Size=Small, Type=3-col stacked */

/* Variant: Mode=Light, Size=Medium, Type=3-col stacked */

/* Variant: Mode=Light, Size=XSmall, Type=3-col stacked */

/* Variant: Mode=Light, Size=Small, Type=2-col spread */

/* Variant: Mode=Light, Size=XSmall, Type=2-col spread */

/* Variant: Mode=Light, Size=XSmall, Type=2-col stacked */

/* Variant: Mode=Light, Size=Small, Type=2-col stacked */

/* Variant: Mode=Light, Size=Medium, Type=2-col stacked */

/* Component: List/Row */
/* ── Row container ── */
.row {
  display: flex;
  width: 343px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* ── Divider ── */

/* ── WithToggle content ── */

/* ── Default content ── */

/* ── Typography ── */

/* WithToggle: Medium → Text/XXS; Small+XSmall → Text/Caption */

/* Default: Medium+Small → Text/XXS; XSmall → Text/Caption */

/* ── Values ── */

/* ── Icon colors ── */

/* ── Toggle ── */

/* Variant: Type=With Toggle, Mode=Light, RowSize=Small */

/* Variant: Type=With Toggle, Mode=Light, RowSize=XSmall */

/* Variant: Type=With Toggle, Mode=Dark, RowSize=Medium */

/* Variant: Type=With Toggle, Mode=Dark, RowSize=Small */

/* Variant: Type=With Toggle, Mode=Dark, RowSize=XSmall */

/* Variant: Type=Default, Mode=Dark, RowSize=Medium */

/* Variant: Type=Default, Mode=Dark, RowSize=Small */

/* Variant: Type=Default, Mode=Dark, RowSize=XSmall */

/* Variant: Type=Default, Mode=Light, RowSize=Medium */

/* Variant: Type=Default, Mode=Light, RowSize=Small */

/* Variant: Type=Default, Mode=Light, RowSize=XSmall */

/* Component: Button Chevron */

/* Component: Button Card */
/* ── Base card ── */

/* ── Dark variant ── */

/* ── Light variant ── */

/* ── Icon container ── */

/* ── Label ── */

/* Component: Buttons/Chat */
.chat {
  display: flex;
  height: 64px;
  padding: var(--atg-aa-spacing-xsmall, 12px) var(--atg-aa-spacing-medium, 24px);
  justify-content: space-between;
  align-items: center;
  border-radius: 80px;
  box-sizing: border-box;
  width: 343px;
}

/* Component: Cards/Big */
p { margin: 0; }

/* ===== AlertCard variants ===== */

/* ===== HomeCard variants ===== */

/* Component: BottomSheet/ActionSheet */
.action-sheet {
  display: flex;
  width: 375px;
  height: 460px;
  padding: var(--atg-aa-spacing-spacing-xsmall) 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border-radius: var(--atg-aa-radius-radius-large);
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
}

/* Component: BottomSheet/FullSheet */
/* ── Base ─────────────────────────────────────────────── */

/* ── Size: Action (460 px, all corners rounded) ─────── */

/* ── Size: Large (812 px, top corners only) ─────────── */

/* ── Mode: Light ────────────────────────────────────── */

/* ── Mode: Dark ─────────────────────────────────────── */

/* ── Header ─────────────────────────────────────────── */

/* ── Drag handle ─────────────────────────────────────── */

/* ── Header inner (Frame 8) ──────────────────────────── */

/* ── Header container (label row) ───────────────────── */

/* ── Label ───────────────────────────────────────────── */

/* ── Divider (light mode only) ───────────────────────── */

/* ── Icons ───────────────────────────────────────────── */

/* Component: BottomSheet/Header */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.header {
  display: flex;
  width: 375px;
  flex-direction: column;
  align-items: center;
}

/* Component: Button Back */

/* Component: Button */
.button {
  display: flex;
  padding: var(--atg-aa-spacing-xsmall, 12px) var(--atg-aa-spacing-small, 16px);
  justify-content: center;
  align-items: center;
  border-radius: 80px;
  border: none;
  background: none;
  cursor: pointer;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

/* Primary / Active / Light */

/* Primary / Active / Dark */

/* Primary / Disabled / Light */

/* Primary / Disabled / Dark */

/* Secondary / Active / Light */

/* Secondary / Active / Dark */

/* Secondary / Disabled / Light */

/* Secondary / Disabled / Dark */

/* Tertiary / Active / Light */

/* Tertiary / Active / Dark */

/* Tertiary / Disabled / Light */

/* Tertiary / Disabled / Dark */

/* Variant: Type=Primary, State=Active, Mode=Light, Size=Small */

/* Variant: Type=Primary, State=Active, Mode=Light, Size=Medium */

/* Variant: Type=Primary, State=Active, Mode=Dark, Size=Large */

/* Variant: Type=Primary, State=Active, Mode=Dark, Size=Small */

/* Variant: Type=Primary, State=Active, Mode=Dark, Size=Medium */

/* Variant: Type=Primary, State=Disabled, Mode=Light, Size=Large */

/* Variant: Type=Primary, State=Disabled, Mode=Light, Size=Small */

/* Variant: Type=Primary, State=Disabled, Mode=Light, Size=Medium */

/* Variant: Type=Primary, State=Disabled, Mode=Dark, Size=Large */

/* Variant: Type=Primary, State=Disabled, Mode=Dark, Size=Small */

/* Variant: Type=Primary, State=Disabled, Mode=Dark, Size=Medium */

/* Variant: Type=Secondary, State=Active, Mode=Light, Size=Large */

/* Variant: Type=Secondary, State=Active, Mode=Light, Size=Small */

/* Variant: Type=Secondary, State=Active, Mode=Light, Size=Medium */

/* Variant: Type=Secondary, State=Active, Mode=Dark, Size=Large */

/* Variant: Type=Secondary, State=Active, Mode=Dark, Size=Small */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Secondary, State=Active, Mode=Dark, Size=Medium */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Tertiary, State=Active, Mode=Light, Size=Large */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Tertiary, State=Active, Mode=Light, Size=Small */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Tertiary, State=Active, Mode=Light, Size=Medium */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Secondary, State=Disabled, Mode=Dark, Size=Large */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Secondary, State=Disabled, Mode=Dark, Size=Small */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Secondary, State=Disabled, Mode=Dark, Size=Medium */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Tertiary, State=Disabled, Mode=Light, Size=Large */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Tertiary, State=Disabled, Mode=Light, Size=Small */

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

/* Variant: Type=Tertiary, State=Disabled, Mode=Light, Size=Medium */

/* Variant: Type=Tertiary, State=Active, Mode=Dark, Size=Large */

/* Variant: Type=Tertiary, State=Active, Mode=Dark, Size=Small */

/* Variant: Type=Tertiary, State=Active, Mode=Dark, Size=Medium */

/* Variant: Type=Secondary, State=Disabled, Mode=Light, Size=Large */

/* Variant: Type=Secondary, State=Disabled, Mode=Light, Size=Small */

/* Variant: Type=Secondary, State=Disabled, Mode=Light, Size=Medium */

/* Variant: Type=Tertiary, State=Disabled, Mode=Dark, Size=Large */

/* Variant: Type=Tertiary, State=Disabled, Mode=Dark, Size=Small */

/* Variant: Type=Tertiary, State=Disabled, Mode=Dark, Size=Medium */

/* Component: Charts */
.charts {
  position: relative;
  width: 227px;
  height: 227px;
}

/* Dark variant */

/* Light variant */

/* Component: Charts/Bars */
/* ── Base component ── */
.bars {
  display: flex;
  width: 343px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--atg-aa-spacing-spacing-small);
}

/* ── Single-layer frame (Default / Start) ── */

/* ── Multi-layer group (Double / Triple) ── */

/* ── Bar base ── */

/* ── Labels ── */

/* ── Bar colors ── */

/* ── Default / Double-primary / Triple-positive heights (all share same heights) ── */

/* ── Start: all bars same height ── */

/* ── Double error layer heights ── */

/* ── Triple secondary layer heights (black in light / white in dark) ── */

/* ── Triple error layer heights ── */

/* Component: Charts/Donut */
/* Shared donut base */

/* Type=3-segments, Mode=Dark */

/* Type=multi-segments, Mode=Dark */

/* Type=3-segments, Mode=Light */

/* Type=multi-segments, Mode=Light */

/* Component: Charts/Line */
.line {
  display: flex;
  width: 343px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--atg-aa-spacing-spacing-small);
}

/* Light mode */

/* Dark mode */

/* Net deposit step line (both modes) */

/* Start indicator background line (both modes) */

/* Component: Divider */
/* ── Divider base ── */
    .divider {
      display: block;
      flex-shrink: 0;
    }

    /* Default: horizontal line, inherits width from parent */
    

    /* Horizontal: full-width horizontal line */
    

    /* Vertical: full-height vertical line */
    

/* Component: Donut Progress */

/* Component: Formfields/Dropdown */
.dropdown {
  display: inline-flex;
  padding: var(--atg-aa-spacing-spacing-xsmall) var(--atg-aa-spacing-spacing-small);
  align-items: center;
  gap: var(--atg-aa-spacing-spacing-small);
  border-radius: 56px;
  border: 1px solid var(--atg-aa-color-grey-30, rgba(112, 119, 133, 0.30));
}

/* Component: Formfields/Input */
.input {
  display: flex;
  width: 343px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--atg-aa-spacing-spacing-large);
}

/* Default Dark */

/* Default Light */

/* Code Dark */

/* Code Light */

/* Typing Dark */

/* Active Dark */

/* Complete Dark */

/* Error Dark */

/* Typing Light */

/* Active Light */

/* Complete Light */

/* Error Light */

/* Component: Formfields/Selectable */
/* ── Base component ── */
.selectable {
  display: flex;
  width: 343px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--atg-aa-spacing-spacing-small);
}

/* ── Dark Default ── */

/* ── Dark Active ── */

/* ── Light Default ── */

/* ── Light Active ── */

/* Variant: State=Default, Mode=Dark, Icon=Chevon */

/* Variant: State=Default, Mode=Dark, Icon=Edit */

/* Variant: State=Active, Mode=Dark, Icon=Chevon */

/* Variant: State=Active, Mode=Dark, Icon=None */

/* Variant: State=Default, Mode=Light, Icon=Chevon */

/* Variant: State=Active, Mode=Dark, Icon=Edit */

/* Variant: State=Active, Mode=Light, Icon=Chevon */

/* Variant: State=Default, Mode=Light, Icon=None */

/* Variant: State=Default, Mode=Light, Icon=Edit */

/* Variant: State=Active, Mode=Light, Icon=None */

/* Variant: State=Active, Mode=Light, Icon=Edit */

/* Component: IconMain */
*, *::before, *::after { box-sizing: border-box; }

/* Banks */

/* Radio */

/* Checkbox */

/* Numbered Step */

/* Checkmark */

/* Dot Colored */

/* Icon */

/* Component: List/News */
.news {
  display: flex;
  width: 343px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--atg-aa-spacing-spacing-none);
}

/* Component: List/List/RowOption */
/* Base component */
  

  

  

  

  

  

  

  

  /* Dark variant */
  

  

  

  /* Light variant */
  

  

  

/* Component: List/Header */
.header {
  display: flex;
  width: 311px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Size variants */

/* Mode variants */

/* Component: Keyboard Numeric */

/* Component: Icons/MainLibrary */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  color: var(--atg-aa-color-black-100);
}

/* Component: Icons/ChevronDir */
/* ── Base ── */

/* ── Size: Default (16×16) ── */

/* ── Size: XSmall (10×10) ── */

/* ── Mode: Light → dark fill ── */

/* ── Mode: Dark → light fill ── */

/* ── XSmall direction transforms ── */

/* Variant: Direction=Direction6, Mode=Dark, Size=Default */

/* Variant: Direction=Right, Mode=Light, Size=Default */

/* Variant: Direction=Direction5, Mode=Dark, Size=Default */

/* Variant: Direction=Up, Mode=Light, Size=Default */

/* Variant: Direction=Direction4, Mode=Dark, Size=Default */

/* Variant: Direction=Down, Mode=Light, Size=XSmall */

/* XSmall vector base dimensions */

/* XSmall direction transforms */

/* Variant: Direction=Right, Mode=Light, Size=XSmall */

/* Variant: Direction=Up, Mode=Light, Size=XSmall */

/* Variant: Direction=Down, Mode=Light, Size=XSmall */

.vector { width: 4.065px; height: 7.189px; transform: rotate(90deg); fill: var(--atg-aa-white-100, #FCFCFD) }

/* Variant: Direction=Right, Mode=Light, Size=XSmall */

.vector { width: 4.065px; height: 7.189px; fill: var(--atg-aa-white-100, #FCFCFD) }

/* Variant: Direction=Up, Mode=Light, Size=XSmall */

/* Component: Badge */
.badge {
      display: inline-flex;
      padding: var(--atg-aa-spacing-spacing-xxxsmall);
      justify-content: center;
      align-items: center;
      gap: 0;
      border-radius: var(--atg-aa-radius-radius-xxsmall);
      background: var(--atg-aa-color-alerts-positive);
    }

    

/* Variant: Type=Alert */
.badge {
      display: inline-flex;
      padding: var(--atg-aa-spacing-spacing-xxxsmall);
      justify-content: center;
      align-items: center;
      gap: 0;
      border-radius: var(--atg-aa-radius-radius-xxsmall);
      background: var(--atg-aa-color-alerts-attention);
    }

    

/* Variant: Type=Error */
.badge {
      display: inline-flex;
      padding: var(--atg-aa-spacing-spacing-xxxsmall);
      justify-content: center;
      align-items: center;
      gap: 0;
      border-radius: var(--atg-aa-radius-radius-xxsmall);
      background: var(--atg-aa-color-alerts-error);
    }

    

/* Component: Avatar */
/* =============================================
   AVATAR — ALL VARIANTS
   ============================================= */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Size 96 */

/* Size 32 */

/* Light mode, default (initials) */

/* Dark mode, default (initials) */

/* Image variant — 96px */

/* Image variant — 32px (uses 300px radius per Figma spec) */

/* Initials text — base */

/* Initials — size 96 (Text/M Flat) */

/* Initials — size 32 (Text/Caption Flat) */

/* Light mode text color */

/* Dark mode text color */

/* Component: Bubble Compact 2 */