/* =========================================================================
   Accounts · module styles
   The list (list.html) and one account (detail.html). Tokens only.
   ========================================================================= */

/* ---- Net worth -----------------------------------------------------------
   The screen's one large figure, on the canvas rather than in a box, with
   spendable and held under it as a pair divided by a hairline. */
.acc-net {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-block: var(--s-2) var(--s-2);
}

.acc-net__label,
.acc-hero__meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-2);
}

.acc-net__figure,
.acc-hero__balance {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-hero);
  line-height: var(--lh-flush);
  letter-spacing: var(--track-figure);
}

.acc-net__figure .money__sym,
.acc-net__figure .money__code,
.acc-hero__balance .money__sym,
.acc-hero__balance .money__code {
  font-size: 0.5em;
  font-weight: var(--fw-medium);
  color: var(--text-3);
  margin-inline-end: 0.1em;
}

.acc-net__figure .money__minor,
.acc-hero__balance .money__minor { font-size: 0.42em; color: var(--text-3); }

.acc-net__split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--s-3) 0 0;
  border-block: 1px solid var(--line-soft);
}

.acc-net__part { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) 0; min-width: 0; }
.acc-net__part + .acc-net__part { border-inline-start: 1px solid var(--line-soft); padding-inline-start: var(--s-3); }
.acc-net__part dt { font-size: var(--fs-12); color: var(--text-3); }
.acc-net__part dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-fig);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-fig);
}
.acc-net__part--hold dd { color: var(--saved); }

/* ---- An account, printed as its card -------------------------------------
   The ground is the bank's colour (or the one chosen in the form) and the ink
   is white or near-black, whichever reads on it; both arrive as --card and
   --card-ink from account-card.js through the CSSOM. Everything else on the
   card is drawn in currentColor, so it is right on any ground. */
.acc-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.acc-cards__item { position: relative; }

.acc-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 112px;
  padding: var(--s-4);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--card, var(--bg-3));
  color: var(--card-ink, var(--text-1));
  text-decoration: none;
  box-shadow: var(--shadow-menu);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-press) var(--ease-out);
}

a.acc-card:active { transform: scale(0.985); }
a.acc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The printed sheen: a light from the top right and two faint rings, all in
   the card's own ink, so it reads as a card and not as a coloured box. */
.acc-card__sheen,
.acc-card__sheen::before,
.acc-card__sheen::after { position: absolute; pointer-events: none; z-index: -1; }

.acc-card__sheen {
  inset: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, currentColor 20%, transparent), transparent 55%),
    linear-gradient(160deg, transparent 55%, color-mix(in srgb, currentColor 6%, transparent));
}

.acc-card__sheen::before,
.acc-card__sheen::after {
  content: '';
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.acc-card__sheen::before { width: 240px; height: 240px; right: -90px; bottom: -150px; }
.acc-card__sheen::after  { width: 170px; height: 170px; right: -40px; bottom: -120px; }

.acc-card__top { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.acc-cards__item .acc-card__top { padding-inline-end: 40px; }
.acc-card__logo { display: inline-flex; flex: none; border-radius: var(--r-md); box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }

.acc-card__wordmark {
  display: inline-flex;
  flex: none;
  align-items: center;
  max-width: 62%;
  padding: 5px 9px;
  border-radius: var(--r-md);
  background: #FFFFFF; /* the logo's own ground, not a theme colour */
}
.acc-card__wordmark img { display: block; height: 22px; width: auto; max-width: 100%; object-fit: contain; }
.acc-card--hero .acc-card__wordmark img { height: 26px; }

.acc-card__issuer { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.acc-card__bank {
  font-family: var(--font-display);
  font-size: var(--t-section);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-title);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-card__branch { font-size: var(--fs-12); opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.acc-card__kind {
  flex: none;
  padding: 3px var(--s-2);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: var(--r-pill);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.acc-card__number {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  opacity: 0.92;
}

.acc-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-3); min-width: 0; }
.acc-card__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-card__name { font-size: var(--fs-14); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--fs-12); opacity: 0.85; }

.acc-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px var(--s-2);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
}

/* A spendable account below zero is an entry missing in real life. */
.acc-card__pill--warn { background: var(--danger); color: var(--bg-0); }

.acc-card__balance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: end; }
.acc-card__balance-label { font-size: var(--fs-11); opacity: 0.78; }
.acc-card__balance-label .money__sym { color: inherit; }

.acc-card__figure {
  font-family: var(--font-display);
  font-size: var(--fs-23);
  font-weight: var(--fw-semibold);
  font-stretch: var(--wd-fig);
  line-height: var(--lh-flush);
}

.acc-card__figure .money__sym,
.acc-card__figure .money__code,
.acc-card__figure .money__minor { color: inherit; opacity: 0.75; }

/* On a card the figure is the card's own ink, never the red/green of a list:
   red on bKash pink or City red cannot be read, and "Below zero" already
   says it. */
.acc-card__figure,
.acc-card__figure [class*="money--"],
.acc-card__figure .money-dir { color: inherit; }

/* A generic mark (Cash, a bank with no logo) is drawn in the card's ink on a
   faint plate, so it shows on every brand colour in both themes. */
.acc-card .inst-logo--generic .inst-logo__ground { fill: color-mix(in srgb, currentColor 18%, transparent); }
.acc-card .inst-logo--generic .inst-logo__glyph { color: currentColor; }

.acc-card--hero { min-height: 132px; }
.acc-card--hero .acc-card__figure { font-size: var(--fs-34); }

/* Archived: still a real account with history, so dimmed, never struck out. */
.acc-card.is-archived { opacity: 0.6; filter: saturate(0.35); }

/* The last statement against the ledger, under the account's card. */
.acc-recon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--bg-1);
}

.acc-recon__text { margin: 0; font-size: var(--fs-13); color: var(--text-2); }
.acc-recon__text strong { color: var(--text-1); }

/* The actions button rides on the card's corner, outside the link. */
.acc-cards__menu {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.22); /* on a brand colour, not a theme ground */
  color: #FFFFFF;
  cursor: pointer;
}

/* The account form's type picker wraps — seven types of very different label
   lengths, and no side-by-side comparison is being made between them. */
.choices { row-gap: var(--s-2); }

/* The "available" line under a credit card's balance. Right-aligned with the
   figure above it, and small enough not to compete with it. */
.row__end .meta { font-size: var(--fs-11); }

/* ---- One account ---------------------------------------------------------- */
.acc-detail { display: flex; flex-direction: column; }

.acc-hero {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-block: var(--s-3) var(--s-4);
  min-width: 0;
}

.acc-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  color: var(--text-3);
}

.acc-hero__meta .icon { color: var(--text-3); }

.acc-hero__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: var(--fw-semibold);
  /* A long account name wraps; it is the page's subject and is never cut. */
  overflow-wrap: anywhere;
}

.acc-hero__balance { margin-block-start: var(--s-2); }
.acc-hero__balance.is-negative { color: var(--danger); }

.acc-hero__note { margin: var(--s-1) 0 0; font-size: var(--fs-13); color: var(--text-2); }

.acc-month {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid var(--line-soft);
}

.acc-month__item { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-3) 0; min-width: 0; }
.acc-month__item + .acc-month__item { border-inline-start: 1px solid var(--line-soft); padding-inline-start: var(--s-3); }
.acc-month__item dt { font-size: var(--fs-12); color: var(--text-3); }
.acc-month__item dd { margin: 0; font-family: var(--font-display); font-size: var(--t-fig); font-weight: var(--fw-semibold); font-stretch: var(--wd-fig); }
.acc-month__item--in dd { color: var(--in); }

.acc-entries { margin-block-start: var(--s-6); }

.acc-entries__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: var(--s-2);
}

.acc-entries__title { margin: 0; font-family: var(--font-display); font-size: var(--t-section); font-weight: var(--fw-semibold); font-stretch: var(--wd-title); }
.acc-entries__count { font-size: var(--fs-13); color: var(--text-3); }
.acc-entries__more { margin-block-start: var(--s-3); align-self: center; }

.acc-card { border: 0; }

/* Day headings: text only, no band, and not sticky - a short list of one
   account does not need them to stack under the header. */
.acc-day {
  padding: var(--s-3) var(--s-4) var(--s-1);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-3);
}

.acc-row__after { font-size: var(--fs-12); color: var(--text-3); }

/* =========================================================================
   Account colours, by name
   An account stores a colour NAME (Account::COLOURS); the shade is a palette
   token, so it follows the theme. Anything that wears it reads --acc.
   ========================================================================= */
.acc-colour--marigold { --acc: var(--accent); }
.acc-colour--green    { --acc: var(--in); }
.acc-colour--violet   { --acc: var(--saved); }
.acc-colour--blue     { --acc: var(--biz); }
.acc-colour--rose     { --acc: var(--cat-health); }
.acc-colour--teal     { --acc: var(--vault); }
.acc-colour--orange   { --acc: var(--warn); }
.acc-colour--slate    { --acc: var(--move); }

/* =========================================================================
   The form
   ========================================================================= */

/* The five kinds, one row of tiles that fits 360px. */
.acc-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-2); }

.acc-kind {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 64px;
  padding: var(--s-2) var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.acc-kind input { position: absolute; opacity: 0; width: 0; height: 0; }
.acc-kind:has(input:checked) { background: var(--bg-3); border-color: var(--accent); color: var(--text-1); }
.acc-kind:has(input:focus-visible) { box-shadow: var(--e-focus); }
.acc-kind:has(input:disabled) { cursor: default; }
.acc-kind:has(input:disabled:not(:checked)) { opacity: 0.4; }

/* The bank picker: a search box with the picked bank's mark beside it. */
.acc-picker { position: relative; }
.acc-picker__input { display: flex; align-items: center; gap: var(--s-2); }
.acc-picker__input .input { flex: 1 1 auto; min-width: 0; }

.acc-picker__list {
  list-style: none;
  margin: var(--s-1) 0 0;
  padding: var(--s-1);
  border-radius: var(--r-md);
  background: var(--bg-3);
  display: flex;
  flex-direction: column;
}

.acc-picker__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s-1) var(--s-2);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-1);
  font-size: var(--fs-14);
  text-align: start;
  cursor: pointer;
}

.acc-picker__item:active,
.acc-picker__item:hover { background: var(--wash-hover); }

/* Wallet providers: four tiles with their marks. */
.acc-providers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }

.acc-provider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-12);
  color: var(--text-2);
  cursor: pointer;
}

.acc-provider input { position: absolute; opacity: 0; width: 0; height: 0; }
.acc-provider:has(input:checked) { border-color: var(--accent); background: var(--bg-3); color: var(--text-1); }
.acc-picker__mark { display: inline-flex; flex: none; }
.acc-picker__mark:empty { display: none; }
.acc-provider:has(input:focus-visible) { box-shadow: var(--e-focus); }

/* Colour swatches. */
.acc-swatches { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.acc-swatch {
  position: relative;
  /* Eight in one row at 360px: 8 × 32 + 7 × 8 = 312 of 328. */
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--acc);
  cursor: pointer;
}

.acc-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.acc-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--text-1); }
.acc-swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

.acc-reconcile { padding-block-start: var(--s-3); border-block-start: 1px solid var(--line-soft); }

.acc-reconcile__gap .btn { display: flex; margin-block-start: var(--s-2); }

.acc-reconcile__gap {
  margin: var(--s-2) 0 0;
  font-size: var(--fs-13);
  color: var(--text-2);
}

.acc-reconcile__gap strong { color: var(--text-1); }