/* ============================================================
   Afranga · Withdraw money + Account statement - five concepts
   (08.10.2026). Isolated exploration page. Built on styles.css
   tokens, .inv-* (invest-concepts.css), .set-* (settings.css)
   and the Add money card (add-money.css). New pieces only here:
   bank picker rows, chips, statement table, summary, feed,
   timeline, tiles, split page. rem only, BEM.
   ============================================================ */

.main--wl { padding-bottom: 6rem; }
.wl { max-width: 68.5rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; }
.wl > * { min-width: 0; }
.wl--am { display: block; }
.wl--c { max-width: 52rem; }

.wl-grow { flex: 1; }
.wl-pos { color: var(--green); }
.wl-neg { color: var(--text-primary); }
.wl-note { font: var(--body-s); color: var(--inv-warm); }
.wl-label { font: var(--label-s); color: var(--inv-warm); }
.wl-field { display: flex; flex-direction: column; gap: 0.5rem; }
.wl-center { display: flex; justify-content: center; }
.wl-btn-ic svg { width: 1rem; height: 1rem; }
.wl-btn-full { width: 100%; }
.wl-head-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.wl-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: -0.5rem; }
.wl-count { font: var(--body-s); color: var(--inv-warm); }

/* ---------- amount ---------- */
.wl-amount { display: flex; flex-direction: column; gap: 0.5rem; }
.wl-amount--err, .wl-amount--err:focus-within { border-color: var(--coral-dark); }
.wl-avail { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font: var(--body-s); color: var(--inv-warm); }
.set-btn-link--s { font: var(--label-s); }
.wl-err { font: var(--body-s); color: var(--coral-dark); }
.wl-err--c { text-align: center; }
.wl-cur { font: var(--label-m); color: var(--text-muted); margin-right: 0.25rem; }
.set-input__field .set-btn-link { margin-left: 0.5rem; }

/* ---------- bank picker ---------- */
.wl-banks { display: flex; flex-direction: column; gap: 0.5rem; }
.wl-bank { display: flex; align-items: center; gap: 0.875rem; width: 100%; padding: 0.875rem 1rem; text-align: left; background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.75rem; transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.wl-bank:hover { border-color: var(--text-muted); }
.wl-bank.is-on { background: var(--bg-light); border-color: var(--charcoal); }
.wl-bank.is-on .method__radio { border-color: var(--charcoal); border-width: 0.125rem; }
.wl-bank.is-on .method__radio::after { transform: scale(1); background: var(--charcoal); }
.wl-bank.is-off { cursor: default; opacity: 0.7; }
.wl-bank.is-off:hover { border-color: var(--border); }
.wl-bank--row { cursor: default; }
.wl-bank--row:hover { border-color: var(--border); }
.wl-bank--add { border-style: dashed; color: var(--text-primary); }
.wl-bank__logo { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); font: var(--label-s); color: var(--text-primary); }
.wl-bank__logo svg, .set-bank__logo svg { width: 1rem; height: 1rem; }
.wl-bank__plus { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; border: 0.0625rem dashed var(--text-muted); }
.wl-bank__plus svg { width: 1rem; height: 1rem; }
.wl-bank__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.wl-bank__name { font: var(--label-m); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wl-bank__iban { font: var(--body-s); color: var(--inv-warm); }

.wl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 1.5rem 1rem; background: var(--bg-light); border-radius: 0.75rem; font: var(--body-m); color: var(--inv-warm); }
.wl-empty b { font: var(--label-m); color: var(--text-primary); }
.wl-empty__icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--text-primary); }
.wl-empty__icon svg { width: 1.5rem; height: 1.5rem; }

.wl-mini { display: flex; gap: 0.5rem; font: var(--body-s); color: var(--inv-warm); }
.wl-mini svg { flex: none; width: 1rem; height: 1rem; }

/* ---------- done + timeline ---------- */
.wl-done { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.wl-medal { width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--green-bg); color: var(--green); }
.wl-medal svg { width: 1.75rem; height: 1.75rem; }
.wl-done__title { font: var(--inv-h2); }
.wl-done__text { font: var(--body-m); color: var(--inv-warm); max-width: 26rem; }
.wl-done__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
.wl-done .wl-tl { align-self: stretch; text-align: left; }

.wl-tl { list-style: none; display: flex; flex-direction: column; padding: 1rem 1.25rem; background: var(--bg-light); border-radius: 0.75rem; }
.wl-tl__step { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0.75rem; padding-bottom: 1rem; }
.wl-tl__step:last-child { padding-bottom: 0; }
.wl-tl__step:not(:last-child)::before { content: ''; position: absolute; left: 0.6875rem; top: 1.5rem; bottom: 0; width: 0.125rem; background: var(--border); }
.wl-tl__step.is-done:not(:last-child)::before { background: var(--green-muted); }
.wl-tl__dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; border: 0.125rem solid var(--border); background: var(--white); color: var(--white); }
.wl-tl__dot svg { width: 0.875rem; height: 0.875rem; }
.is-done > .wl-tl__dot { background: var(--green-muted); border-color: var(--green-muted); }
.is-on > .wl-tl__dot { border-color: var(--charcoal); box-shadow: inset 0 0 0 0.25rem var(--white); background: var(--charcoal); }
.wl-tl__body { display: flex; flex-direction: column; gap: 0.125rem; padding-top: 0.125rem; }
.wl-tl__body b { font: var(--label-m); }
.wl-tl__body span { font: var(--body-s); color: var(--inv-warm); }
.is-todo .wl-tl__body b { color: var(--inv-warm); }

/* ---------- chips + filters ---------- */
.wl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.wl-chip { height: 2rem; padding: 0 0.875rem; border-radius: 62rem; border: 0.0625rem solid var(--border); background: var(--white); font: var(--label-s); color: var(--text-primary); white-space: nowrap; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.wl-chip:hover { border-color: var(--text-muted); }
.wl-chip.is-on { background: var(--charcoal); border-color: var(--charcoal); color: var(--white); }
.wl-chip--s { height: 1.75rem; padding: 0 0.625rem; }
.wl-filters { display: flex; flex-direction: column; gap: 1rem; }
.wl-filters--bare { gap: 0.75rem; }
.wl-filters__row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.wl-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: 0.75rem; }
.wl-select { gap: 0.5rem; }
.wl-select svg:first-child { color: var(--inv-warm); }
.wl-ddwrap { position: relative; display: inline-flex; align-items: center; }
.wl-dd { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 30; width: 20rem; padding: 0.5rem; background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.75rem; box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.wl-dd--right { left: auto; right: 0; }
.wl-dd__top { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.625rem; font: var(--overline); letter-spacing: 0.05rem; text-transform: uppercase; color: var(--inv-warm); }
.wl-dd__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem; border-radius: 0.5rem; text-align: left; }
.wl-dd__item:hover, .wl-dd__item.is-sel { background: var(--bg-light); }
.wl-dd__item > svg { width: 1rem; height: 1rem; flex: none; }
.wl-dd__item .set-check { flex: none; pointer-events: none; }
.wl-dd__ic { flex: none; width: 2rem; height: 2rem; border-radius: 0.5rem; display: grid; place-items: center; background: var(--ivory); }
.wl-dd__ic svg { width: 1rem; height: 1rem; }
.wl-dd__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.wl-dd__body b { font: var(--label-m); }
.wl-dd__body small { font: var(--body-s); color: var(--inv-warm); }
/* type filter: category rows with a sub-filter per type */
.wl-dd--types { width: 22rem; }
.wl-dd__scroll { max-height: 26rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.125rem; }
.wl-dd__grp { display: flex; flex-direction: column; }
.wl-dd__grow { display: flex; align-items: stretch; gap: 0.125rem; }
.wl-dd__item--grp { flex: 1; min-width: 0; }
.wl-dd__exp { flex: none; width: 2.25rem; display: grid; place-items: center; border-radius: 0.5rem; color: var(--inv-warm); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.wl-dd__exp:hover { background: var(--bg-light); color: var(--text-primary); }
.wl-dd__exp svg { width: 1rem; height: 1rem; transition: transform var(--t-fast) var(--ease); }
.wl-dd__exp[aria-expanded="true"] svg { transform: rotate(180deg); }
.wl-dd__grp.is-open > .wl-dd__grow .wl-dd__item--grp { background: var(--bg-light); }
.wl-dd__sub { display: flex; flex-direction: column; margin: 0.125rem 0 0.375rem 1.375rem; padding-left: 0.5rem; border-left: 0.0625rem solid var(--border); }
.wl-dd__item--sub { padding: 0.4375rem 0.625rem; gap: 0.625rem; }
.wl-dd__item--sub .wl-dd__body span { font: var(--body-s); color: var(--text-primary); }
.wl-dd__item--sub .set-check { width: 1rem; height: 1rem; }
.wl-dd__item--sub .set-check svg { width: 0.625rem; height: 0.625rem; }
.set-check.is-some { border-color: var(--charcoal); }
.set-check.is-some i { display: block; width: 0.625rem; height: 0.125rem; background: var(--charcoal); border-radius: 0.0625rem; }
/* show more */
.wl-more { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: -0.5rem; }

.wl-search { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 0.75rem; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--white); }
.wl-search svg { width: 1rem; height: 1rem; color: var(--inv-warm); }
.wl-search input { border: 0; outline: 0; background: transparent; font: var(--body-m); width: 8rem; }

/* ---------- summary ---------- */
.wl-sum { background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card); padding: 1.25rem 1.5rem; display: flex; flex-direction: column; }
.wl-sum--flat { box-shadow: none; border: 0.0625rem solid var(--track); }
.wl-sum__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 0.5rem; }
.wl-sum__period { font: var(--body-s); color: var(--inv-warm); }
.wl-sum__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-bottom: 0.0625rem solid var(--border); font: var(--body-m); width: 100%; text-align: left; }
.wl-sum__row span:last-child { font: var(--value); white-space: nowrap; }
.wl-sum__row--bal span:first-child { color: var(--inv-warm); }
.wl-sum__row--close { border-bottom: 0; }
.wl-sum__row--close span { font: var(--label-m) !important; color: var(--text-primary) !important; }
.wl-sum__row--grp span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; }
.wl-sum__row--grp svg { width: 1rem; height: 1rem; transition: transform var(--t-fast) var(--ease); transform: rotate(-90deg); }
.wl-sum__row--grp[aria-expanded="true"] svg { transform: none; }
.wl-sum__row--grp:hover span:first-child { color: var(--coral); }
.wl-sum__row--sub { padding-left: 1.5rem; font: var(--body-s); color: var(--inv-warm); }

/* ---------- statement table ---------- */
.wl-table { background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; overflow: hidden; }
.wl-table__head, .wl-table__row { display: grid; grid-template-columns: 7rem minmax(0, 1.1fr) minmax(0, 1fr) 9.5rem; align-items: center; gap: 1rem; padding: 0 1rem; }
.wl-table--status .wl-table__head, .wl-table--status .wl-table__row { grid-template-columns: 7rem minmax(0, 1.1fr) minmax(0, 1fr) 7rem 8.5rem; }
.wl-table__head { height: 2.75rem; border-bottom: 0.0625rem solid var(--track); }
.wl-table__row { min-height: 3.5rem; padding-top: 0.625rem; padding-bottom: 0.625rem; border-bottom: 0.0625rem solid var(--border); }
.wl-table__row:last-child { border-bottom: 0; }
.wl-table__row--click { cursor: pointer; }
.wl-table__row--click:hover, .wl-table__row.is-open { background: var(--bg-light); }
.wl-table__detail { padding: 0.5rem 1.5rem 1.25rem; background: var(--bg-light); border-bottom: 0.0625rem solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.wl-td { display: flex; flex-direction: column; gap: 0.125rem; font: var(--body-m); min-width: 0; }
.wl-td b { font: var(--label-m); }
.wl-td small { font: var(--body-s); color: var(--text-muted); }
.wl-td--date { font: var(--body-m); color: var(--inv-warm); }
.wl-td--muted { color: var(--inv-warm); font: var(--body-s); }
.wl-td--amt { align-items: flex-end; text-align: right; }
.wl-amt { font: var(--value); white-space: nowrap; }

.wl-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: -0.5rem; }
.wl-pager__info { font: var(--body-s); color: var(--inv-warm); }
.wl-pager__per { display: flex; align-items: center; gap: 0.375rem; font: var(--body-s); color: var(--inv-warm); }
.inv-pager__btn:disabled { opacity: 0.35; cursor: default; }

.wl-taxnote { display: flex; align-items: center; gap: 0.5rem; font: var(--body-s); color: var(--inv-warm); }
.wl-taxnote svg { width: 1rem; height: 1rem; flex: none; }

/* Ghost-accent button (DS Button) and coral links, as in Figma W1 / S2 / S6 */
.wl-accent { color: var(--coral); }
.wl-accent:hover { color: var(--coral-dark); }
.wl-ghost { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font: var(--label-m); color: var(--coral); transition: color var(--t-fast) var(--ease); }
.wl-ghost svg { width: 1rem; height: 1rem; }
.wl-ghost:hover { color: var(--coral-dark); }

/* ---------- A · statement "The ledger" (Figma S1-S11, Georgi 11.10) ---------- */
.wl--ledger { gap: 1.25rem; }
.wl-lhead { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.wl-wallet { display: inline-flex; align-items: baseline; gap: 0.75rem; font: var(--body-m); color: var(--inv-warm); }
.wl-wallet b { font: var(--title-l); color: var(--text-primary); }
.wl-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wl-toolbar .wl-count { margin-right: 0.5rem; }
.wl-cats.is-active { border-color: var(--charcoal); }
.wl-cats__n { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--peach); font: var(--label-s); color: var(--text-primary); }
/* applied filters: DS Tag State=Applied - white, border, plain X */
.wl-showing { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: -0.5rem; font: var(--body-m); color: var(--inv-warm); }
.wl-tag { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.5rem; padding: 0 0.375rem 0 0.5rem; background: var(--white); border: 0.0625rem solid var(--border); border-radius: 62rem; font: var(--label-s); color: var(--text-primary); white-space: nowrap; }
.wl-tag__x { flex: none; width: 1rem; height: 1rem; display: grid; place-items: center; border-radius: 50%; color: var(--text-primary); transition: color var(--t-fast) var(--ease); }
.wl-tag__x svg { width: 0.75rem; height: 0.75rem; stroke-width: 2.4; }
.wl-tag__x:hover { color: var(--coral); }
.wl-tag__x:focus-visible { outline: 0.125rem solid var(--charcoal); outline-offset: 0.0625rem; }
/* table: Date 120 / Type 300 / Details fill / Transaction ID 128 / Amount 176 */
.wl-lt { background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; overflow: hidden; }
.wl-lt__head, .wl-lt__row { display: grid; grid-template-columns: 7.5rem minmax(0, 18.75rem) minmax(0, 1fr) 8rem 11rem; align-items: center; width: 100%; padding: 0 1rem; text-align: left; }
.wl-lt__head { height: 2.75rem; border-bottom: 0.0625rem solid var(--track); }
.wl-lt__right { text-align: right; }
.wl-lt__row { min-height: 4rem; border-bottom: 0.0625rem solid var(--border); cursor: pointer; transition: background var(--t-fast) var(--ease); }
.wl-lt__row:last-child { border-bottom: 0; }
.wl-lt__row:hover, .wl-lt__row.is-open { background: var(--bg-light); }
.wl-lt__row:focus-visible { outline: 0.125rem solid var(--charcoal); outline-offset: -0.125rem; }
.wl-lt__date { font: var(--body-m); }
.wl-lt__type { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; padding-right: 1rem; }
.wl-lt__type b { font: var(--label-m); }
.wl-lt__type small { font: var(--body-s); color: var(--inv-warm); }
.wl-lt__det { min-width: 0; padding-right: 1rem; font: var(--body-m); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-lt__id { font: var(--body-s); color: var(--inv-warm); }
.wl-lt__amt { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.wl-lt__empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.25rem 1rem; text-align: center; font: var(--body-s); color: var(--inv-warm); }
.wl-lt__empty b { font: var(--label-m); color: var(--text-primary); }
.wl-lt__empty .inv-btn-sm { margin-top: 0.5rem; }
.wl--ledger .inv-tfoot { margin-top: -0.5rem; }
.wl--ledger .inv-tfoot__count { display: inline-flex; align-items: center; gap: 0.5rem; }
.inv-dd.wl-dd-up { top: auto; bottom: calc(100% + 0.375rem); left: auto; right: 0; min-width: 5rem; }
.inv-dd.wl-dd-up .inv-dd__item { min-width: 5rem; }
/* custom range: the My investments calendar in a popover */
.wl-cal { position: absolute; top: calc(100% + 0.5rem); left: 0; z-index: 30; width: 25rem; max-width: calc(100vw - 2rem); padding: 1rem; display: flex; flex-direction: column; gap: 1rem; background: var(--white); border: 0.0625rem solid var(--border); border-radius: 0.75rem; box-shadow: var(--shadow-pop); }
.wl-cal__sum { display: flex; flex-direction: column; gap: 0.25rem; font: var(--body-m); color: var(--text-primary); }
.wl-cal__sum small { font: var(--body-s); color: var(--inv-warm); }
.wl-cal__head { display: flex; align-items: center; justify-content: space-between; }
.wl-cal__title { font: var(--label-m); }
.wl-cal__nav { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 0.5rem; color: var(--text-primary); transition: background var(--t-fast) var(--ease); }
.wl-cal__nav svg { width: 1.25rem; height: 1.25rem; }
.wl-cal__nav:hover { background: var(--surface-subtle); }
.wl-cal__nav:disabled { color: var(--text-muted); background: none; cursor: default; }
.wl-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.wl-cal__wd { padding: 0.375rem 0; text-align: center; font: var(--body-s); color: var(--inv-warm); }
.wl-cal__day { height: 2.25rem; border-radius: 0.5rem; font: var(--body-m); color: var(--text-primary); transition: background var(--t-fast) var(--ease); }
.wl-cal__day:hover { background: var(--surface-subtle); }
.wl-cal__day.is-between { background: var(--bg-light); border-radius: 0; }
.wl-cal__day.is-on, .wl-cal__day.is-on:hover { background: var(--charcoal); color: var(--white); }
.wl-cal__day:disabled { color: var(--text-muted); background: none; cursor: default; }
.wl-cal__day:focus-visible { outline: 0.125rem solid var(--charcoal); outline-offset: 0.125rem; }
.wl-cal__foot { display: flex; justify-content: flex-end; gap: 0.5rem; }
/* categories and types drawer */
.wl-cats-list { display: flex; flex-direction: column; }
.wl-cat { border-bottom: 0.0625rem solid var(--border); }
.wl-cat__row { display: flex; align-items: center; gap: 0.5rem; }
.wl-cat__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; text-align: left; }
.wl-cat__main .set-check, .wl-cat__type .set-check { pointer-events: none; }
.wl-cat__body { min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.wl-cat__body b { font: var(--label-m); }
.wl-cat__body small { font: var(--body-s); color: var(--inv-warm); }
.wl-cat__exp { flex: none; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0 0.5rem 0.5rem; font: var(--body-s); color: var(--inv-warm); }
.wl-cat__exp svg { width: 1rem; height: 1rem; transition: transform var(--t-fast) var(--ease); }
.wl-cat__exp:hover { color: var(--text-primary); }
.wl-cat.is-open .wl-cat__exp svg { transform: rotate(180deg); }
.wl-cat__sub { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0 0.75rem 1.25rem; }
.wl-cat__type { display: flex; align-items: center; gap: 0.625rem; padding: 0.25rem 0; text-align: left; font: var(--body-m); }
.wl-cat__type .set-check { width: 1rem; height: 1rem; }
.wl-cat__type .set-check svg { width: 0.625rem; height: 0.625rem; }
/* a line opened (480 panel), download dialog, first-use card */
.wl-phead { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.wl-pover { font: var(--overline); letter-spacing: 0.05rem; text-transform: uppercase; color: var(--inv-warm); }
.wl-pamt { display: flex; align-items: center; gap: 0.75rem; }
.wl-pamt__val { font: var(--number-l); }
.wl-info { padding: 0.75rem 1rem; background: var(--bg-light); border: 0.0625rem solid var(--peach); border-radius: 0.5rem; font: var(--body-m); color: var(--text-primary); }
.wl-dlm { width: 30rem; }
.wl-kv-wrap { white-space: normal; flex: 0 1 auto; }
.wl-start { width: 100%; max-width: 36rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.wl-start__title { font: var(--inv-h3); }
.wl-start__text { font: var(--body-m); color: var(--inv-warm); }
.wl-start__row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font: var(--body-s); color: var(--inv-warm); }

/* ---------- B · wallet hub ---------- */
.wl-bal { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card); }
.wl-bal__nums { display: flex; gap: 3rem; flex-wrap: wrap; align-items: flex-start; }
.wl-bal__nums > div { display: flex; flex-direction: column; gap: 0.25rem; }
.wl-bal__label { display: block; font: var(--body-s); color: var(--inv-warm); }
.wl-bal__val { display: block; font: var(--number-l); }
.wl-bal__val--muted { color: var(--inv-warm); }
.wl-bal__actions { display: flex; gap: 0.75rem; }
.wl-twocol { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.wl-twocol > div { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.wl-twocol .wl-table__head, .wl-twocol .wl-table__row { grid-template-columns: 6.5rem minmax(0, 1fr) 8.5rem; }
.wl-twocol .wl-td--muted, .wl-twocol .wl-table__head > :nth-child(3) { display: none; }

.wl-list { position: relative; display: flex; flex-direction: column; gap: 0.75rem; }
.wl-req { background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; }
.wl-req__head { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1rem 1.25rem; text-align: left; }
.wl-req__head > svg { width: 1rem; height: 1rem; color: var(--inv-warm); transition: transform var(--t-fast) var(--ease); }
.wl-req.is-open .wl-req__head > svg { transform: rotate(180deg); }
.wl-req__icon { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); }
.wl-req__icon svg { width: 1rem; height: 1rem; }
.wl-req__body { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.wl-req__body b { font: var(--label-m); }
.wl-req__body small { font: var(--body-s); color: var(--inv-warm); }
.wl-req__body-open { padding: 0 1.25rem 1.25rem; }

/* ---------- C · activity feed + dialog ---------- */
.wl-feed { display: flex; flex-direction: column; gap: 1.25rem; }
.wl-day { background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card); padding: 0.5rem 1.25rem; }
.wl-day__head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0 0.5rem; font: var(--overline); letter-spacing: 0.05rem; text-transform: uppercase; color: var(--inv-warm); }
.wl-day__head span:last-child { font: var(--label-s); letter-spacing: 0; text-transform: none; }
.wl-item { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 0.75rem 0; border-top: 0.0625rem solid var(--border); text-align: left; }
.wl-item:hover .wl-item__body b, .wl-item.is-on .wl-item__body b { color: var(--coral); }
.wl-item__icon { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); color: var(--text-primary); }
.wl-item__icon svg { width: 1.125rem; height: 1.125rem; }
.wl-item__icon--earn, .wl-item__icon--bonus { background: var(--green-bg); color: var(--green); }
.wl-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.wl-item__body b { font: var(--label-m); transition: color var(--t-fast) var(--ease); }
.wl-item__body small { font: var(--body-s); color: var(--inv-warm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wl-dialog { width: 28rem; }
.wl-bignum { display: flex; align-items: baseline; justify-content: center; gap: 0.25rem; padding: 1rem 0 0; }
.wl-bignum__cur { font: 600 2rem/1 'Montserrat', sans-serif; color: var(--text-muted); }
.wl-bignum input { border: 0; outline: 0; background: transparent; font: 600 3.5rem/1.1 'Montserrat', sans-serif; color: var(--text-primary); text-align: left; min-width: 1ch; max-width: 100%; padding: 0; }
.wl-bignum.is-err input { color: var(--coral-dark); }
.wl-bignum__hint { text-align: center; font: var(--body-s); color: var(--inv-warm); }
.wl-detail-amt { font: var(--number-l); }

/* ---------- D · get paid page + monthly ---------- */
.wl-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.wl-grid > * { min-width: 0; }
.wl-inline { display: flex; flex-direction: column; gap: 1.25rem; padding-top: 0.5rem; }
.wl-prog { display: flex; flex-direction: column; gap: 0.75rem; }
.wl-prog b { font: var(--label-m); }
.wl-month { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.wl-month__name { font: var(--inv-h3); min-width: 9rem; text-align: center; }
.wl-balrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding-top: 1.25rem; border-top: 0.0625rem solid var(--border); }
.wl-balrow--top { padding-top: 0; border-top: 0; }
.wl-balrow > div { display: flex; flex-direction: column; gap: 0.25rem; }
.wl-balrow b { font: var(--title-l); }
.wl-tiles { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.wl-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; padding: 1rem; background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; text-align: left; transition: border-color var(--t-fast) var(--ease); }
.wl-tile:hover { border-color: var(--text-muted); }
.wl-tile.is-on { border-color: var(--charcoal); background: var(--bg-light); }
.wl-tile__icon { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--ivory); }
.wl-tile__icon svg { width: 1rem; height: 1rem; }
.wl-tile__label { font: var(--body-s); color: var(--inv-warm); }
.wl-tile__val { font: var(--label-m); }

/* ---------- E · ledger + split ---------- */
.wl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.wl-stat { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.25rem; background: var(--white); border-radius: 1rem; box-shadow: var(--shadow-card); }
.wl-stat b { font: var(--title-l); }
.wl-countchips { position: relative; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wl-countchip { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 1rem; border: 0.0625rem solid var(--border); border-radius: 0.5rem; background: var(--white); font: var(--label-m); }
.wl-countchip b { font: var(--label-s); color: var(--inv-warm); }
.wl-countchip.is-on { border: 0.125rem solid var(--charcoal); padding: 0 0.9375rem; }
.wl-countchip.is-on b { color: var(--text-primary); }
.wl-split { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
.wl-split__side { position: sticky; top: 1.5rem; }

/* ---------- demo panel extras ---------- */
.wl-demo__tweaks { display: flex; flex-direction: column; gap: 0.75rem; }
.wl-demo__tw { display: flex; flex-direction: column; gap: 0.375rem; font: var(--body-s); }
.wl-demo__tw small { font: var(--caption-s); color: rgba(255, 255, 255, 0.6); }
.wl-demo__type--q { color: #b9e6cf; }

/* room for the demo panel on wide screens */
@media (min-width: 80rem) { .wl-demo-open .main--wl { padding-right: 22rem; } }

/* ---------- mobile ---------- */
@media (max-width: 64rem) {
  .wl-twocol, .wl-grid, .wl-split { grid-template-columns: minmax(0, 1fr); }
  .wl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-split__side { position: static; }
}
@media (max-width: 48rem) {
  /* statement on mobile = cards, as in Figma SM1-SM11 (My investments mobile pattern) */
  .wl-lhead { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .wl-wallet { justify-content: space-between; }
  /* select and Categories hug their content (Georgi 11.10); count + Download on the next line */
  .wl-toolbar { row-gap: 1rem; }
  .wl-toolbar .wl-grow { flex: 0 0 100%; height: 0; }
  .wl-toolbar .wl-count { margin-right: auto; font: var(--label-s); color: var(--text-primary); }
  .wl-toolbar .set-pin { display: none; }
  .wl-cats__more { display: none; }
  /* no chips row on mobile: the count in the Categories button is the only indicator (Georgi 11.10) */
  .wl-showing { display: none; }
  .wl-lt { background: none; border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 0.75rem; }
  .wl-lt__head { display: none; }
  .wl-lt__row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "type type amt" "det det det" "date id id"; gap: 0.25rem 0; padding: 1rem; min-height: 0; background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; }
  .wl-lt__row:last-child { border-bottom: 0.0625rem solid var(--track); }
  .wl-lt__type { grid-area: type; }
  .wl-lt__amt { grid-area: amt; flex-direction: column-reverse; align-items: flex-end; gap: 0.25rem; align-self: start; }
  .wl-lt__det { grid-area: det; white-space: normal; padding-right: 0; }
  .wl-lt__date { grid-area: date; font: var(--body-s); color: var(--inv-warm); }
  .wl-lt__date::after { content: '\00a0·\00a0'; }
  .wl-lt__id { grid-area: id; }
  .wl-lt__id::before { content: 'ID '; }
  .wl-lt__empty { background: var(--white); border: 0.0625rem solid var(--track); border-radius: 1rem; }
  .wl--ledger .inv-tfoot { margin-top: 0; }
  .wl-cal { left: 0; width: min(25rem, calc(100vw - 2rem)); }
  .wl-stats, .wl-balrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-table__head { display: none; }
  .wl-table__row, .wl-table--status .wl-table__row, .wl-twocol .wl-table__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1rem; }
  .wl-td--date { grid-column: 1 / -1; font: var(--body-s); }
  .wl-td--muted { grid-column: 1; }
  .wl-table--status .wl-table__row > :nth-child(4) { display: none; }
  .wl-table__detail { grid-template-columns: minmax(0, 1fr); }
  .wl-bal__nums { gap: 1.5rem; }
  .wl-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wl-dd { width: min(20rem, calc(100vw - 2rem)); }
  .wl-bignum input { font-size: 2.75rem; }
}