/* Accounts: the currency strip, balance hero and history, the month summary.
   Loaded after ds/css/tokens.css and ds/css/app.css; only what fasset-ds
   does not already say lives here. */

/* The currency accounts as one strip, in the prototype's form. Up to four sit
   four to a row, top aligned, Add currency a slim last cell. From five the
   cells are sized so a quarter of the next always peeks; the strip scrolls
   sideways with a snap per cell, and the fade sits only on a side that hides
   something. A phone shows about two and a half cells. */
.currency-strip {
  --add-w: 0px;
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
#currencies[data-add="true"] .currency-strip { --add-w: 148px; }
.currency-strip::-webkit-scrollbar { display: none; }
.currency-strip > * { flex: 0 0 calc((100% - var(--add-w)) / 4); scroll-snap-align: start; }
#currencies[data-strip="scroll"] .currency-strip > * { flex-basis: calc(100% / 4.25); }
.currency-strip > :not(:first-child),
.currency-strip > :nth-child(odd):not(:first-child) { border-left: 1px solid var(--border-faint); padding-left: var(--space-20); }
.currency-strip .tile-label,
.currency-strip .tile-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.currency-strip .tile-value { white-space: nowrap; }
.currency-strip .tile-sub .status { font-size: inherit; }
#currencies .currency-strip > .currency-add {
  position: relative;
  flex: 0 0 var(--add-w, auto);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 0;
  padding-left: var(--space-8);
}
#currencies[data-strip="scroll"] .currency-strip > .currency-add { flex-basis: auto; padding-inline: var(--space-12); border-left: 1px solid var(--border-faint); }
.currency-all-value { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font); font-size: var(--text-16); }
.currency-all-value .icon { color: var(--text-subtle); }
.currency-strip-wrap[data-fade="end"] .currency-strip {
  -webkit-mask-image: linear-gradient(to right, var(--text-strong) calc(100% - var(--space-40)), transparent);
  mask-image: linear-gradient(to right, var(--text-strong) calc(100% - var(--space-40)), transparent);
}
.currency-strip-wrap[data-fade="start"] .currency-strip {
  -webkit-mask-image: linear-gradient(to left, var(--text-strong) calc(100% - var(--space-40)), transparent);
  mask-image: linear-gradient(to left, var(--text-strong) calc(100% - var(--space-40)), transparent);
}
.currency-strip-wrap[data-fade="both"] .currency-strip {
  -webkit-mask-image: linear-gradient(to right, transparent, var(--text-strong) var(--space-40), var(--text-strong) calc(100% - var(--space-40)), transparent);
  mask-image: linear-gradient(to right, transparent, var(--text-strong) var(--space-40), var(--text-strong) calc(100% - var(--space-40)), transparent);
}
.currency-strip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-12); }
.currency-strip-head h2 { font-size: var(--text-12); font-weight: var(--w-body); color: var(--text-subtle); margin: 0; }
.currency-strip-nav { display: inline-flex; gap: var(--space-4); }
#currency-rail-shared { margin-top: var(--space-12); }
.currency-all-balance { margin-left: auto; padding-right: var(--space-8); }
button.stat-strip-cell:focus-visible { outline: 1.5px solid var(--focus-ring); outline-offset: -2px; }
@media (max-width: 640px) {
  .currency-strip > *,
  #currencies[data-strip="scroll"] .currency-strip > * { flex-basis: 40%; }
  #currencies .currency-strip > .currency-add { flex-basis: auto; padding-inline: var(--space-8); }
  /* On a phone Add currency is its plus alone; the words stay for a screen reader. */
  .currency-add-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #add-currency-btn { position: relative; padding: var(--space-8); }
}
.currency-choice { width: 112px; max-width: 100%; flex-shrink: 0; }
.currency-choice .select-trigger { min-height: 34px; }
/* Starts level with the Transactions heading beside it (R5-8), so no padding of its own. */
.accounts-month .num.accent { color: var(--accent-text); }
.accounts-month h2 { font-size: var(--text-16); font-weight: var(--w-medium); }
#month-period { margin: var(--space-8) 0 var(--space-16); }
#month-basis { margin-top: var(--space-16); }
/* Accounts' activity and its "This month" rail, the prototype's inline 2fr 1fr
   written as a rule so the phone layout below can still stack it. */
.grid-2.accounts-activity { grid-template-columns: 2fr 1fr; align-items: start; gap: var(--space-24); }
@media (max-width: 900px) {
  .grid-2, .grid-2.accounts-activity { grid-template-columns: 1fr; }
}
/* balance / net hero — the typographic set piece */
/* Accounts' hero is a grid, so the range toggle can sit in the amount's own
   row and be centred on it (R5-2): the label, amount and change line are
   column one, the toggle is column two of the amount's row. On a phone it
   drops under the change line. Insights keeps ds's flex .bal-hero. */
.acc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-16);
  row-gap: 0; /* fasset-ds's flex .bal-hero carries gap: 16px, which a grid also reads as a row gap */
  align-items: start;
}
.acc-hero > div:not(.seg) { display: contents; }
.acc-hero > div:not(.seg) > * { grid-column: 1; }
/* The Accounts island draws the picker inside a layout-neutral wrapper (display: contents), which a child selector does not see through. */
.acc-hero > .seg, .acc-hero > span > .seg { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; }
/* The gap above the amount is the label's, not the amount's, so the amount's row
   is the amount alone and the toggle centres on it exactly. */
.acc-hero .bal-label { margin-bottom: var(--space-8); }
.acc-hero .bal-value { margin-top: 0; }
@media (max-width: 640px) {
  .acc-hero { grid-template-columns: minmax(0, 1fr); }
  .acc-hero > .seg, .acc-hero > span > .seg { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--space-14); }
}
.bal-asof { color: var(--text-faint); }
.balance-history-head { align-items: center; }
.balance-history-range { min-height: 18px; margin: -4px 0 0; }
.balance-history-point { min-height: 18px; margin: var(--space-2) 0 0; }
#recent-tx.recent-preview { position: relative; }
#recent-tx.recent-preview::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--space-16);
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}
/* A currency panel's own balance history (currencies.js), below its figure. */
.panel-section { margin-top: var(--space-20); }
.panel-section .balance-history-head { flex-wrap: wrap; gap: var(--space-8); }
/* The total's figure while its reference rates are on the way: a placeholder
   the figure's own height, never the USD balance standing in for the total. */
.bal-value .bal-value-wait { display: inline-block; width: 220px; max-width: 70%; height: 0.9em; vertical-align: middle; }
/* The rates line under the change line: indicative, with the rates' date, or
   what the total leaves out. Quieter than the change line above it. */
.acc-hero .bal-rates { margin-top: var(--space-4); }
/* Add money: a currency's sign in its row's tile, as the prototype draws it. */
.icon-tile-sm .currency-sign { font-size: var(--text-13); font-weight: var(--w-medium); line-height: 1; }
/* The Available line under the total: one quiet line, its two figures in the
   money face. "set aside" is a button that reads as part of the sentence and
   opens the breakdown Popover; its chevron turns while it is open. */
.acc-hero .bal-available { margin-top: var(--space-6); }
.bal-available .bal-fig { color: var(--text-default); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.bal-available .bal-setaside {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: calc(var(--space-2) * -1) 0;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--text-subtle);
  font: inherit;
  cursor: pointer;
}
.bal-available .bal-setaside:hover,
.bal-available .bal-setaside[aria-expanded="true"] { background: var(--bg-hover); color: var(--text-default); }
.bal-available .bal-setaside:focus-visible { outline: 1.5px solid var(--focus-ring); outline-offset: 1px; }
.bal-available .bal-setaside svg { transition: transform var(--dur-exit) var(--ease); }
.bal-available .bal-setaside[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The breakdown: what is set aside, by kind, in USD. */
.setaside-pop { padding: var(--space-12) var(--space-16) var(--space-10); }
.setaside-pop-title { font-size: var(--text-12); font-weight: var(--w-medium); color: var(--text-strong); margin-bottom: var(--space-4); }
.setaside-pop .def-row { padding: var(--space-6) 0; }
.setaside-pop-hint { display: block; margin-top: var(--space-2); font-size: var(--text-12); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.setaside-pop-foot { margin-top: var(--space-6); }
/* The bank-not-ready banner is followed by the standard section gap (the same as .section's own) before the balance. */
#bank-banner { margin-bottom: calc(var(--rhythm-section) / 2); }

/* The chart's place is held from the first paint (the service's history arrives after it), so what sits below it does not move when the line is drawn. It is the chart's
   own height, 210. */
#bal-chart { min-height: calc(var(--space-40) * 5 + var(--space-8) + var(--space-2)); }
/* The change line under the balance has its one line held too, for the same reason: it fills in when the history arrives. */
#bal-delta { min-height: calc(var(--text-12) * 1.55); }

/* The USD funding note (js/screens/usd-funding.js): the design root's callout set as one line, the need first and its actions after it, wrapping on a narrow screen. */
.usd-funding { flex-wrap: wrap; align-items: center; }
.usd-funding-text { color: var(--text-default); margin-inline-end: auto; }