/* Styles only the Money tab's screens need. Everything shared is `ui/kit.css`: reach for a kit piece first.
   Logical properties only; nothing under 12px; a tap target is at least 44px.

   Every class here starts `m-` (a card face's parts start `cf-`), and a Money screen's root and its
   sheets carry `.m-screen`, so nothing in this file can reach another area's screen. */

/* ---------------------------------------------------------------- shared by the Money screens */

/* A currency beside a small figure is still 12px: the kit sets it as a fraction of the figure. */
.m-screen .cur { font-size: max(12px, 0.42em); }
.m-sheet { display: grid; gap: 12px; align-content: start; min-inline-size: 0; }
.m-main { flex: 1; min-inline-size: 0; }
.m-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.m-say { margin: 0; font-size: 14px; line-height: 1.45; }
.m-neg .big { color: var(--bad); }
/* A tile that is a door has a chevron in its corner: its label stops short of it. */
.m-screen a.t > .lbl, .m-safe-main > .lbl { padding-inline-end: 22px; }
.m-screen a.m-dashed > .lbl { padding-inline-end: 0; }
.m-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-block-size: 44px; }
.m-foot .whyb { block-size: 44px; }
.m-foot > .whyb:first-child { margin-inline-start: -10px; }
.m-screen .zone .m-zone-fig { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
/* A link at the end of a zone label is a full 44px target here (the kit's is 42). */
.m-screen .zone a { margin-block: -15px; padding-block: 15px; }
.m-linkb { min-block-size: 44px; margin-block: -14px; display: inline-flex; align-items: center; gap: 2px; font: 600 13px var(--text); color: var(--muted); flex: none; }
.m-linkb .ico { inline-size: 14px; block-size: 14px; }
.m-more-rows { inline-size: 100%; min-block-size: 50px; display: flex; align-items: center; justify-content: center; gap: 4px; font: 700 14px var(--text); border-block-start: 1px solid var(--line); }
.m-more-rows .ico { inline-size: 16px; block-size: 16px; }
.btn.m-act { padding-inline: 10px; font-size: 14px; }
.m-sheet > .m-name { margin-block-start: 0; padding-inline: 4px; }
.m-screen .t-card > .ui-chart + .rows { margin-block-start: 6px; }
.m-screen .t-card > .lbl + .big { margin-block-start: 10px; }
.m-axis { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 6px; font: 500 12px/1.2 var(--text); color: var(--muted); }

/* labelled figures, in the colour of the tile they sit on */
.m-calc { margin: 0; display: grid; }
.m-calc > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 7px; font-size: 14px; }
.m-calc dt { opacity: 0.82; }
.m-calc dd { margin: 0; font-weight: 600; text-align: end; white-space: nowrap; }
.m-calc > .sum { border-block-start: 1.5px solid color-mix(in srgb, currentColor 28%, transparent); margin-block-start: 4px; padding-block-start: 10px; font-weight: 700; }
.m-calc > .sum dt { opacity: 1; }

/* what a chart's line of words is made of */
.m-rd { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.m-rd.soft, .m-rd-at { color: var(--muted); font-weight: 500; }
.m-rd .num { font: 700 13px var(--text); letter-spacing: 0; }
.m-rd .cur, .m-screen .ui-chart .cur { vertical-align: 0; font-weight: 500; }
.m-lk { align-self: center; inline-size: 14px; block-size: 3px; border-radius: 2px; background: currentColor; flex: none; }
.m-rd.soft .m-lk { opacity: 0.55; }
.m-rd.what .m-lk { block-size: 0; background: none; border-block-start: 2px dashed var(--violet); border-radius: 0; }

/* ---------------------------------------------------------------- safe to spend */

.m-safe { padding: 16px 16px 4px; }
.m-safe-main { display: block; position: relative; }
.m-safe-main > .chev { position: absolute; inset-block-start: 0; inset-inline-end: -2px; inline-size: 18px; block-size: 18px; opacity: 0.55; }
.m-safe .big { margin-block-start: 12px; }
.m-safe .un { margin-block-start: 8px; }
.m-safe .because { margin-block-end: 12px; }
.m-safe.off { padding: 16px; display: grid; gap: 8px; justify-items: start; }
.m-safe.off .big { font-size: 30px; margin-block-start: 6px; }
.m-safe.off .m-say { color: var(--muted); }
.m-safe.off .btn { margin-block-start: 6px; }

/* ---------------------------------------------------------------- a card face */

.m-face { display: grid; grid-template-rows: auto 1fr auto auto; inline-size: 100%; aspect-ratio: 1.586; border-radius: 18px; padding: 16px 18px; position: relative; overflow: hidden; isolation: isolate; text-align: start; color: #fff; background: linear-gradient(135deg, #2a3a80 0%, #141b40 58%, #2f47b0 130%); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }
.m-face::before { content: ""; position: absolute; z-index: -1; inset-block-start: -42%; inset-inline-end: -18%; inline-size: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 68%); }
.m-face::after { content: ""; position: absolute; z-index: -1; inset-block-end: -58%; inset-inline-start: -16%; inline-size: 76%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.07); }
.m-face[data-art="gold"] { background: linear-gradient(135deg, #ecd28a 0%, #b88d32 58%, #f2e0a6 130%); color: #2a1c00; }
.m-face[data-art="teal"] { background: linear-gradient(135deg, #1f9a90 0%, #0b4c54 58%, #2cc0ad 130%); }
.m-face[data-art="charcoal"] { background: linear-gradient(135deg, #45474f 0%, #17181c 58%, #5a5d67 130%); }
.m-face[data-art="plum"] { background: linear-gradient(135deg, #7a3380 0%, #35143c 58%, #96469b 130%); }
.m-face[data-art="sand"] { background: linear-gradient(135deg, #f3e6c8 0%, #d6bc8a 58%, #f8f0de 130%); color: #3a2a10; }
.cf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; min-inline-size: 0; font: 600 13px/1.25 var(--text); }
.cf-top bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-wave { inline-size: 20px; block-size: 20px; transform: rotate(90deg); opacity: 0.85; flex: none; }
.cf-chip { align-self: center; inline-size: 38px; block-size: 28px; border-radius: 7px; background: linear-gradient(135deg, #f4e4ab, #c9a13f); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16); }
.m-face[data-art="gold"] .cf-chip, .m-face[data-art="sand"] .cf-chip { background: linear-gradient(135deg, #fff8dc, #dcc27c); }
.cf-num { font: 600 19px/1 var(--display); letter-spacing: 0.06em; white-space: nowrap; margin-block-end: 12px; }
.cf-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.cf-who { display: grid; gap: 3px; min-inline-size: 0; }
.cf-who b { font: 600 12px/1.2 var(--text); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cf-who small { font: 500 12px/1 var(--text); opacity: 0.85; }
.cf-scheme { font: italic 800 20px/1 var(--display); letter-spacing: -0.02em; flex: none; }
.cf-ice { display: inline-flex; align-items: center; gap: 5px; block-size: 26px; padding-inline: 7px 10px; border-radius: 13px; background: #1c2c3a; color: #fff; font: 700 12px/1 var(--text); flex: none; }
.cf-ice .ico { inline-size: 15px; block-size: 15px; stroke-width: 2.2; }

/* frozen: the art is iced over, whatever it was */
.m-face.frozen { background: linear-gradient(135deg, #e3edf5 0%, #a9bccb 58%, #f0f5fa 130%); color: #1c2c3a; }
.m-face.frozen::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 68%); }
.m-face.frozen .cf-num, .m-face.frozen .cf-who, .m-face.frozen .cf-scheme { opacity: 0.5; }
.m-face.frozen .cf-chip { filter: grayscale(1); opacity: 0.55; }

/* the small face a tile stacks */
.m-face.mini { grid-template-rows: auto 1fr; border-radius: 12px; padding: 9px 10px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22); }
.m-face.mini .cf-top { font-size: 12px; }
.m-face.mini .cf-wave { display: none; }
.m-face.mini .cf-num { align-self: end; font-size: 12px; letter-spacing: 0.03em; margin-block-end: 0; }
.m-face.mini .cf-foot { position: absolute; inset-inline-end: 10px; inset-block-end: 9px; }
.m-face.mini .cf-scheme { font-size: 12px; }
.m-face.mini .cf-ice { padding: 0; inline-size: 22px; block-size: 22px; justify-content: center; }

/* ---------------------------------------------------------------- Money: the overview */

.m-cards { padding: 16px; }
.m-cards > .chev, .m-spent > .chev { position: absolute; inset-block-start: 14px; inset-inline-end: 12px; inline-size: 18px; block-size: 18px; opacity: 0.55; }
.m-stack { display: grid; margin-block: 12px 10px; }
.m-stack > span { grid-area: 1 / 1; margin-block-start: calc(var(--i) * 11px); transform: scale(calc(1 - var(--back) * 0.07)); transform-origin: 50% 0; }
.m-cards .un { margin-block-start: auto; }
.m-net .un { line-height: 1.3; }

.m-quiet .m-say { font: 600 17px/1.25 var(--display); letter-spacing: -0.01em; margin-block-start: auto; padding-block-start: 14px; }
[lang="ar"] .m-quiet .m-say { letter-spacing: 0; line-height: 1.5; }
.m-quiet .un { margin-block-start: 6px; }
.m-dashed { border: 2px dashed var(--line); }
.m-go { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.m-go .ico { inline-size: 14px; block-size: 14px; }

.m-spent { padding: 16px; }
.m-spent .big { font-size: 44px; margin-block-start: 10px; }
.m-pace { display: flex; position: relative; block-size: 10px; border-radius: 5px; background: color-mix(in srgb, currentColor 12%, transparent); margin-block: 30px 10px; }
.m-pace > i { display: block; block-size: 100%; border-radius: 5px; background: var(--good); inline-size: calc(var(--p, 0) * 1%); min-inline-size: 6px; }
.m-pace.over > i { background: var(--amber); }
.m-pace > b { position: absolute; inset-block: -5px; inset-inline-start: calc(var(--d, 0) * 1%); inline-size: 2px; margin-inline-start: -1px; border-radius: 1px; background: var(--ink); display: flex; justify-content: center; }
.m-pace > b > small { position: absolute; inset-block-end: calc(100% + 3px); font: 600 12px/1 var(--text); color: var(--muted); white-space: nowrap; }

.m-ring .ringbox { margin-block-start: auto; align-self: flex-start; }
.m-ring .ringbox b { font-size: 28px; letter-spacing: -0.03em; }
.m-ring .un { margin-block-start: 8px; }

.m-burden .big { font-size: 40px; }
.m-burden .un { margin-block: 4px 12px; font-weight: 500; }
.m-burden .note { margin-block-start: 10px; }
.m-burden .m-calc { margin-block-start: 6px; }

/* ---------------------------------------------------------------- Transactions */

.m-txn .big { font-size: 40px; }
.m-pick-h { font: 700 12px/1 var(--text); letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-block-start: 8px; }
[lang="ar"] .m-pick-h { letter-spacing: 0; font-size: 13px; }

/* ---------------------------------------------------------------- Spending */

.m-month .big { font-size: 48px; margin-block: 10px 12px; }
.m-month .chips { margin-block-end: 14px; }
.m-month .chip { min-block-size: 30px; font-size: 12.5px; }
.m-seg-pic, .m-seg-ico { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; overflow: hidden; flex: none; background: var(--surface2); box-shadow: 0 0 0 2px var(--surface); }
.m-seg-pic img, .m-seg-pic .glyph { inline-size: 100%; block-size: 100%; object-fit: cover; }
.m-seg-pic .glyph .ico, .m-seg-ico .ico { inline-size: 15px; block-size: 15px; }
.m-screen .row > .m-dir { inline-size: 28px; block-size: 28px; border-radius: 50%; }
.m-screen .row > .m-dir.up { background: var(--inv); color: var(--inv-ink); }
.m-screen .row > .m-dir.down { background: var(--mint); color: var(--mint-ink); }
.m-screen .row > .m-dir .ico { inline-size: 15px; block-size: 15px; stroke-width: 2.2; }
.m-trend .big { font-size: 40px; margin-block: 8px 16px; }
.m-places .regs { margin-inline: -16px; padding: 4px 16px 2px; }
.m-places .reg { flex: 0 0 68px; }
.m-places .reg small { max-inline-size: 72px; }
.m-say-big { margin: 0 0 14px; display: grid; gap: 3px; }
.m-say-big b { font: 600 22px/1.15 var(--display); letter-spacing: -0.02em; }
.m-say-big small { font-size: 13px; opacity: 0.75; }
[lang="ar"] .m-say-big b { letter-spacing: 0; line-height: 1.45; }
.m-versus { display: grid; gap: 14px; }
.m-vs-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-block-end: 6px; font-size: 14px; }
.m-vs-top b { font-weight: 600; }
.m-vs .num { font: 600 15px var(--display); }
.m-vs .bar { block-size: 10px; border-radius: 5px; }
.m-vs:not(.mine) .bar { color: var(--muted); }

/* ---------------------------------------------------------------- Recurring */

.m-recur { padding: 16px; display: flex; align-items: center; gap: 16px; }
.m-recur .ringbox b { font-size: 22px; letter-spacing: -0.02em; }
.m-recur .big { margin-block: 10px 6px; }
.m-recur .un { line-height: 1.35; }
.m-review { padding: 16px; }
.m-name { display: block; font: 600 20px/1.2 var(--display); letter-spacing: -0.02em; margin-block-start: 10px; }
[lang="ar"] .m-name { letter-spacing: 0; line-height: 1.4; }
.m-review .big { font-size: 40px; margin-block-start: 8px; }
.m-review .un { margin-block-start: 4px; font-weight: 500; }
.m-pic { inline-size: 92px; block-size: 92px; border-radius: 24px; overflow: hidden; flex: none; background: rgba(0, 0, 0, 0.08); }
.m-pic img, .m-pic .glyph { inline-size: 100%; block-size: 100%; object-fit: cover; }
.m-review .m-say { margin-block: 10px 12px; font-size: 13px; opacity: 0.85; }
.m-review .btns .btn { padding-inline: 10px; min-block-size: 48px; font-size: 14px; }
.m-review .btn:not(.onc) { background: var(--lav-ink); color: var(--lav); }
.m-overlap { padding-block: 12px; padding-inline: 16px 12px; flex-direction: row; align-items: center; gap: 14px; min-block-size: 72px; text-align: start; }
.m-overlap .m-main b { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.m-overlap .m-main small { display: block; font-size: 13px; color: var(--muted); margin-block-start: 2px; }
.m-overlap > .chev { inline-size: 18px; block-size: 18px; color: var(--muted); flex: none; }
.m-series { display: flex; align-items: center; gap: 14px; }
.m-series .m-pic { inline-size: 72px; block-size: 72px; border-radius: 20px; }
.m-series .big { font-size: 34px; }
.m-series .un { margin-block-start: 4px; }

/* ---------------------------------------------------------------- Forecast */

.m-whatif { display: grid; gap: 8px; margin-block: 12px 14px; }
.m-whatif .lbl { color: var(--muted); }
.m-whatif .chips.scroll { margin-inline: -16px; padding-inline: 16px; }
.m-band .note { margin-block-start: 10px; }
.m-whatif-tile { padding: 16px 16px 6px; }
.m-whatif-tile .big { margin-block: 12px 4px; }
.m-whatif-tile .un { font-weight: 500; margin-block-end: 10px; }
.m-whatif-tile .because { margin-block-end: 10px; }

/* ---------------------------------------------------------------- Financial health */

.m-health { padding: 18px 16px; display: flex; align-items: center; gap: 18px; }
.m-health .ringbox b { font: 700 44px/1 var(--display); letter-spacing: -0.04em; }
.m-health .big { font-size: 34px; line-height: 1.05; margin-block: 10px 4px; white-space: normal; }
[lang="ar"] .m-health .big { line-height: 1.35; }
.m-health .btn { margin-block-start: 12px; }
.m-factors > h3 .whyb { block-size: 44px; margin-block: -14px; }
.m-factors .because { margin-block: 10px 4px; }
.m-factor-list { display: grid; margin-block-start: 4px; }
.m-factor { display: grid; gap: 8px; inline-size: 100%; min-block-size: 56px; padding-block: 12px; text-align: start; }
.m-factor + .m-factor { border-block-start: 1px solid var(--line); }
.m-f-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.m-f-top b { font-size: 15px; font-weight: 600; }
.m-f-top .num { font: 700 17px var(--display); }
.m-f-top small { font-size: 13px; color: var(--muted); }
.m-todo { padding: 16px 16px 6px; }
.m-todo .m-name { margin-block-start: 0; font-size: 18px; }
.m-todo .big { font-size: 36px; margin-block-start: 12px; }
.m-todo .un { margin-block-start: 4px; font-weight: 500; }
.m-todo .stack img, .m-todo .stack .glyph { box-shadow: 0 0 0 2.5px var(--lav); }
.m-obj { inline-size: 84px; block-size: 84px; object-fit: contain; flex: none; margin-block: -6px; }
.m-todo .m-foot { margin-block-start: 8px; }
.m-todo .because { margin-block-end: 10px; }
.m-scale .big { font-size: 44px; margin-block: 8px 4px; }
.m-scale .bar { margin-block-start: 12px; }
.m-scale .note { margin-block-start: 10px; }
.m-notes { margin: 10px 0 0; padding-inline-start: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }

/* ---------------------------------------------------------------- Cards */

.m-faces { gap: 12px; margin-inline: calc(var(--ana-gutter) * -1); padding: 4px var(--ana-gutter) 10px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--ana-gutter); }
.m-facebtn { flex: 0 0 84%; scroll-snap-align: center; border-radius: 18px; opacity: 0.5; transform: scale(0.94); transition: opacity 0.2s, transform 0.2s; }
.m-facebtn[aria-pressed="true"] { opacity: 1; transform: none; }
.m-faces.one { justify-content: center; }
.m-faces.one .m-facebtn { flex-basis: min(100%, 330px); }
.m-toggle { padding: 14px; min-block-size: 116px; justify-content: space-between; gap: 12px; text-align: start; }
.m-toggle .m-top { align-items: center; }
.m-toggle .glyph { inline-size: 40px; block-size: 40px; border-radius: 14px; background: var(--surface2); }
.m-toggle .glyph .ico { inline-size: 20px; block-size: 20px; }
.m-toggle[aria-checked="true"] .glyph { background: var(--inv); color: var(--inv-ink); }
.m-sw { inline-size: 46px; block-size: 28px; border-radius: 14px; background: var(--surface2); box-shadow: inset 0 0 0 1.5px var(--line); position: relative; flex: none; transition: background 0.2s; }
.m-sw::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: inset-inline-start 0.2s; }
.m-toggle[aria-checked="true"] .m-sw { background: var(--good); box-shadow: none; }
.m-toggle[aria-checked="true"] .m-sw::after { inset-inline-start: 21px; background: #fff; }
.m-toggle .m-main b { display: block; font-size: 15px; font-weight: 600; }
.m-toggle .m-main small { display: block; font-size: 13px; color: var(--muted); margin-block-start: 2px; line-height: 1.35; }
.m-toggle[disabled] { opacity: 0.5; cursor: default; }
.m-freeze { flex-direction: row; align-items: center; justify-content: flex-start; min-block-size: 76px; padding: 12px 16px; gap: 14px; }
.m-freeze .m-top { display: contents; }
.m-freeze .glyph { order: 1; }
.m-freeze .m-main { order: 2; }
.m-freeze .m-sw { order: 3; }
.m-freeze.tone-sky .m-main small { color: inherit; opacity: 0.75; }
.m-freeze.tone-sky .glyph { background: var(--sky-ink); color: var(--sky); }
.m-limit .big { font-size: 44px; margin-block: 10px 2px; }
.m-limit input[type="range"] { margin-block: 8px 2px; }
.m-limit .m-foot { margin-block-end: 8px; }
.m-limit .because { margin-block-end: 12px; }
.m-owed .big { font-size: 44px; margin-block: 10px 14px; }
.m-owed .un { margin-block-start: 8px; }