@font-face{
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/plex-mono-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/plex-mono-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/plex-sans-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/plex-sans-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/plex-sans-arabic-400-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face{
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/plex-sans-arabic-600-arabic.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* ═══ Sooq & Statement ════════════════════════════════════════════════════
   Design tokens per docs/design/ux-research.md.
   Chart palette validated by the six-check dataviz validator (dark + light);
   every text token computed >= 4.5:1 (AA) against its surface.
   Logical properties throughout, so a future dir="rtl" flip is one attribute.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
    /* Surfaces — warm ink, not blue-black */
    --ink:       #14161D;
    --ink-2:     #1B1E27;
    --ink-3:     #222633;
    --line:      #2A2F3B;

    /* Text — computed AA on both surfaces */
    --text:      #E4E7EE;
    --muted:     #939CAD;

    /* The wealth accent: 21k gold. --gold for interactive/text (8.6:1),
       --gold-deep for marks and hairlines (chart categorical 1). */
    --gold:      #d9ae35;
    --gold-deep: #ae8605;

    /* Status text — money in, money out, caution */
    --pos:       #5fbe72;
    --neg:       #e57a68;
    --warn:      #d9a441;
    --bad:       var(--neg);
    --good:      var(--pos);
    --accent:    var(--gold);

    /* Chart categoricals — fixed assignment order, never cycled (P2) */
    --cat-1: #ae8605;
    --cat-2: #059678;
    --cat-3: #8469b7;
    --cat-4: #60974d;
    --cat-5: #3578b8;
    --cat-6: #bf5547;

    /* Type */
    --sans: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
    --mono: 'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, Menlo, Consolas, monospace;

    /* Rhythm */
    --s1: 4px;  --s2: 8px;  --s3: 12px;  --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px;
    --r1: 6px;  --r2: 10px; --r3: 14px;  --r-pill: 999px;

    --tap: 48px;              /* minimum touch target */
    --tabbar-h: 64px;
}

*{ box-sizing: border-box; }

body{
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font: 15px/1.55 var(--sans);
    /* Tabular figures everywhere: equal-width digits are the trust baseline
       in a money UI. Plex carries true tnum in both sans and mono. */
    font-feature-settings: "tnum";
    -webkit-font-smoothing: antialiased;
}

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* Numbers wear the mono. Amounts are data, not prose. */
.num, .hero-amount, .card-balance, .row-amount, .headline .amount{
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

/* ── Top bar (desktop chrome) ───────────────────────────────────────── */

.bar{
    display: flex; align-items: center; gap: var(--s5);
    padding-block: 0; padding-inline: var(--s5);
    height: 60px;
    background: var(--ink-2); border-block-end: 1px solid var(--line);
    position: sticky; inset-block-start: 0; z-index: 20;
}
.brand{ font-weight: 600; letter-spacing: .04em; color: var(--text); text-decoration: none; }
.brand span{ color: var(--gold); }
.addbtn{
    background: var(--gold); color: var(--ink); font-weight: 600; font-size: 14px;
    padding-block: 8px; padding-inline: 18px;
    border-radius: var(--r-pill); text-decoration: none; margin-inline-end: var(--s2);
}
.addbtn:hover{ filter: brightness(1.08); }
.bar nav{ display: flex; gap: var(--s1); margin-inline-end: auto; }
.bar nav a{
    color: var(--muted); text-decoration: none; font-size: 14px;
    padding-block: 8px; padding-inline: 14px; border-radius: var(--r1);
    min-height: 40px; display: inline-flex; align-items: center;
}
.bar nav a:hover{ color: var(--text); background: var(--ink-3); }
.bar nav a.on{ color: var(--text); background: var(--ink-3); }
.out button{
    background: none; border: 1px solid var(--line); color: var(--muted);
    padding-block: 6px; padding-inline: 12px; border-radius: var(--r1);
    cursor: pointer; font: 13px var(--sans);
}
.out button:hover{ color: var(--text); border-color: var(--muted); }

/* ── Bottom tab bar (mobile chrome) ─────────────────────────────────── */

.tabbar{
    display: none;
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30;
    background: color-mix(in srgb, var(--ink-2) 92%, transparent);
    backdrop-filter: blur(10px);
    border-block-start: 1px solid var(--line);
    padding-block-end: env(safe-area-inset-bottom, 0);
}
.tabbar a{
    flex: 1; display: grid; place-items: center; gap: 2px;
    min-height: var(--tabbar-h);
    color: var(--muted); text-decoration: none; font-size: 11px;
}
.tabbar a svg{ width: 22px; height: 22px; }
.tabbar a.on{ color: var(--gold); }
.tabbar a.fab span.plus{
    display: grid; place-items: center;
    inline-size: 52px; block-size: 52px; border-radius: 50%;
    background: var(--gold); color: var(--ink);
    font-size: 28px; font-weight: 600; line-height: 1;
    margin-block-start: -22px;       /* floats above the bar */
    box-shadow: 0 4px 16px rgb(0 0 0 / .45);
}

main{
    max-width: 1140px; margin-inline: auto;
    padding-block: var(--s6) 64px; padding-inline: var(--s5);
}
footer{ text-align: center; color: var(--muted); font-size: 12px; padding: var(--s5); }

h1{ font-size: 21px; font-weight: 600; margin-block: 0 var(--s1); }
h2{
    font-size: 13px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .08em;
    margin-block: var(--s6) var(--s3);
}
.sub{ color: var(--muted); font-size: 13px; margin-block: 0 var(--s5); }
.head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); }
.head .go{ text-decoration: none; }

/* ── The hero ───────────────────────────────────────────────────────── */

.hero{
    background: linear-gradient(150deg, var(--ink-2), var(--ink-3));
    border: 1px solid var(--line); border-radius: var(--r3);
    padding-block: var(--s6); padding-inline: var(--s6);
    margin-block-end: var(--s5);
}
.hero-label{ color: var(--muted); font-size: 14px; margin-block-end: var(--s2); }
.hero-amount{
    font-size: clamp(34px, 7vw, 56px); font-weight: 600; line-height: 1.05;
    letter-spacing: -.02em;
    /* the gold hairline: wealth is underlined, quietly */
    display: inline-block;
    border-block-end: 3px solid var(--gold-deep);
    padding-block-end: var(--s2);
}
.hero-unit{ color: var(--muted); font-size: .42em; font-weight: 400; font-family: var(--sans); }
.hero-sub{ margin-block-start: var(--s3); color: var(--muted); font-size: 13px; }
.switch{ color: var(--gold); text-decoration: none; margin-inline-start: var(--s3); }
.switch:hover{ text-decoration: underline; }

/* ── Wallet cards ───────────────────────────────────────────────────── */

.cards{ display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card{
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r2);
    padding-block: var(--s4); padding-inline: var(--s4);
    text-decoration: none; color: var(--text); display: block;
    min-height: var(--tap);
}
.card:hover{ border-color: var(--muted); }
.card-kind{ color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
            display: flex; align-items: center; gap: var(--s2); }
/* Pushed to the trailing edge so it reads as an affordance on the card rather
   than another piece of the label. */
.card-edit{ margin-inline-start: auto; color: var(--muted); text-decoration: none; }
.card-edit:hover{ color: var(--accent); }
/* A closed wallet is still yours and still has a balance — dimmed, not hidden,
   because hiding it is what makes people think the money is gone. */
.card.closed{ opacity: .55; }
.tag{ border: 1px solid var(--line); border-radius: 999px; padding-inline: 6px; font-size: 10px; }
.card-name{ font-weight: 600; margin-block: var(--s1) var(--s3); }
.card-balance{ font-size: 21px; font-weight: 600; }
.card-balance.neg{ color: var(--neg); }
.card-unit{ color: var(--muted); font-size: 13px; font-weight: 400; margin-inline-start: var(--s1); font-family: var(--sans); }
.card.add{ border-style: dashed; display: grid; place-content: center; text-align: center; min-height: 106px; }
.card-plus{ font-size: 26px; color: var(--muted); }

/* ── Activity feed ──────────────────────────────────────────────────── */

.feed{ border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--ink-2); }
.row{
    display: grid; grid-template-columns: 88px 1fr auto; gap: var(--s4); align-items: center;
    padding-block: var(--s3); padding-inline: var(--s4);
    min-height: var(--tap);
    border-block-end: 1px solid var(--line);
    text-decoration: none; color: var(--text);
}
.row:last-child{ border-block-end: none; }
.row:hover{ background: var(--ink-3); }
.row-when{ color: var(--muted); font-size: 12px; }
.row-title{ font-weight: 500; unicode-bidi: plaintext; }   /* Arabic titles sit correctly */
.row-meta{ color: var(--muted); font-size: 12px; margin-block-start: 2px; }
.row-amount{ font-size: 16px; font-weight: 600; white-space: nowrap; }
.row-amount.neg{ color: var(--neg); }
.row-amount.pos{ color: var(--pos); }
.row-unit{ color: var(--muted); font-size: 12px; font-weight: 400; margin-inline-start: 3px; font-family: var(--sans); }

/* ── Sentence forms ─────────────────────────────────────────────────── */

.tabs{ display: flex; gap: var(--s2); flex-wrap: wrap; margin-block: var(--s4) var(--s5); }
.tabs a{
    padding-block: 10px; padding-inline: 16px; border-radius: var(--r-pill);
    text-decoration: none; border: 1px solid var(--line); color: var(--muted); font-size: 14px;
    min-height: 40px; display: inline-flex; align-items: center;
}
.tabs a:hover{ color: var(--text); }
.tabs a.on{ background: var(--gold); border-color: var(--gold); color: var(--ink); font-weight: 600; }

.ask{
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r3);
    padding-block: var(--s5); padding-inline: var(--s6);
    max-width: 640px; display: grid; gap: var(--s4);
}
.ask .line{ display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: 15px; }
.ask .line > span{ color: var(--muted); min-inline-size: 82px; }
.ask input, .ask select{ flex: 1; min-inline-size: 150px; }
.ask input.amount{ font: 600 20px/1 var(--mono); padding-block: 10px; padding-inline: 12px; }
.ask .hint-inline{ color: var(--muted); font-size: 12px; min-inline-size: 0; }
.hint{ color: var(--muted); font-size: 13px; margin-block: var(--s1) 0; line-height: 1.5; }

label{ display: block; font-size: 12px; color: var(--muted); margin-block-end: 5px; }
input, select{
    inline-size: 100%; padding-block: 10px; padding-inline: 12px;
    border-radius: var(--r1); border: 1px solid var(--line);
    background: var(--ink); color: var(--text);
    font: inherit; font-size: 14px; min-height: 42px;
}
input:focus, select:focus{ outline: none; border-color: var(--gold); }
input[type=number]{ font-family: var(--mono); }

button.go, a.go{
    padding-block: 11px; padding-inline: 20px;
    border-radius: var(--r1); border: 1px solid var(--gold);
    background: var(--gold); color: var(--ink);
    font: 600 14px var(--sans); cursor: pointer;
    min-height: 44px;
}
button.go:hover, a.go:hover{ filter: brightness(1.08); }
button.go.big, a.go.big{
    padding-block: 13px; padding-inline: 28px; font-size: 15px;
    justify-self: start; display: inline-block; text-decoration: none;
}
button.ghost{
    padding-block: 8px; padding-inline: 12px; border-radius: var(--r1);
    border: 1px solid var(--line); background: none; color: var(--muted);
    cursor: pointer; font: 13px var(--sans); min-height: 40px;
}
button.ghost:hover{ color: var(--text); border-color: var(--muted); }
.full{ grid-column: 1 / -1; }

form.card{
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r2);
    padding: var(--s4); display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: end;
}

/* ── Tables (ledger, prices, review) ────────────────────────────────── */

table{ inline-size: 100%; border-collapse: collapse; font-size: 14px; }
thead th{
    text-align: start; color: var(--muted); font-weight: 500; font-size: 12px;
    text-transform: uppercase; letter-spacing: .06em;
    padding-block: var(--s2); padding-inline: var(--s3);
    border-block-end: 1px solid var(--line);
}
tbody td{
    padding-block: 10px; padding-inline: var(--s3);
    border-block-end: 1px solid var(--line); vertical-align: middle;
}
tbody tr:hover{ background: var(--ink-2); }
.num{ text-align: end; }
.neg{ color: var(--neg); }
.pos{ color: var(--pos); }
.dim{ color: var(--muted); }
.wrap{ overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r2); background: var(--ink-2); }

/* ── Pills, notes, flashes ──────────────────────────────────────────── */

.pill{
    display: inline-block; padding-block: 3px; padding-inline: 10px;
    border-radius: var(--r-pill); font-size: 12px;
    border: 1px solid var(--line); color: var(--muted);
}
.pill.on{ color: var(--text); border-color: var(--gold); }
.pill.warn{ color: var(--warn); border-color: var(--warn); }
.pill.bad{ color: var(--neg); border-color: var(--neg); }
.pill.good{ color: var(--pos); border-color: var(--pos); }

.flash{ padding-block: 10px; padding-inline: 14px; border-radius: var(--r1); margin-block-end: var(--s4); font-size: 14px; }
.flash.ok{    background: color-mix(in srgb, var(--pos) 10%, transparent); border: 1px solid color-mix(in srgb, var(--pos) 35%, transparent); color: var(--pos); }
.flash.error{ background: color-mix(in srgb, var(--neg) 10%, transparent); border: 1px solid color-mix(in srgb, var(--neg) 35%, transparent); color: var(--neg); }

.note{
    background: var(--ink-2); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--warn);
    border-radius: var(--r1); padding-block: var(--s3); padding-inline: var(--s4);
    margin-block: var(--s3); font-size: 13px; color: var(--muted);
}
.note b{ color: var(--text); }
.note.bad{ border-inline-start-color: var(--neg); }
.note.good{ border-inline-start-color: var(--pos); }

ul.checks{ list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
ul.checks li{ font-size: 13px; }
.empty{ color: var(--muted); text-align: center; padding: var(--s7) var(--s4); font-size: 14px; }
.empty a{ color: var(--gold); }

/* Old /ledger escape hatch */
.headline{
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r2);
    padding-block: var(--s5); padding-inline: var(--s6); margin-block-end: var(--s2);
}
.headline .amount{ font-size: 40px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
.headline .unit{ color: var(--muted); font-size: 20px; font-weight: 400; }
.headline .basis{ margin-block-start: 10px; font-size: 13px; color: var(--muted); }
.headline .basis b{ color: var(--text); font-weight: 500; }
.split{ display: flex; gap: var(--s4); flex-wrap: wrap; align-items: baseline; }

.bars{ display: grid; gap: var(--s2); }
.barrow{ display: grid; grid-template-columns: 220px 1fr 140px; gap: var(--s3); align-items: center; font-size: 13px; }
.track{ background: var(--ink-3); border-radius: var(--s1); block-size: 20px; overflow: hidden; }
.fill{ background: var(--cat-5); block-size: 100%; border-radius: var(--s1); }
.fill.liab{ background: var(--neg); }

.welcome{ text-align: center; padding-block: 64px; padding-inline: var(--s4); }
.welcome h1{ font-size: 27px; margin-block-end: 10px; }
.welcome p{ color: var(--muted); max-width: 460px; margin-inline: auto; margin-block-end: var(--s5); line-height: 1.6; }

/* ── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 640px){
    .bar{ height: 52px; gap: var(--s3); padding-inline: var(--s4); }
    .bar nav, .addbtn{ display: none; }           /* the tab bar takes over */
    .tabbar{ display: flex; }
    main{
        padding-inline: var(--s4);
        padding-block-end: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0) + var(--s5));
    }
    .row{ grid-template-columns: 1fr auto; }
    .row-when{ grid-column: 1 / -1; padding-block-start: 2px; }
    .ask{ padding-inline: var(--s4); }
    .ask .line > span{ min-inline-size: 0; }
    .hero{ padding-inline: var(--s5); }
    button.go, a.go{ min-height: var(--tap); }
}

/* ── The rate board (signature element) ─────────────────────────────── */

.board{
    display: block; position: relative;
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r3);
    padding-block: var(--s3); padding-inline: var(--s5);
    margin-block: var(--s5);
    text-decoration: none; color: var(--text);
}
.board:hover{ border-color: var(--gold-deep); }
.board-hint{
    position: absolute; inset-inline-end: var(--s4); inset-block-start: var(--s3);
    color: var(--muted); font-size: 11px;
}
.board-row{
    display: grid; grid-template-columns: 96px 1fr auto; gap: var(--s3);
    align-items: baseline; padding-block: 7px;
}
.board-row + .board-row{ border-block-start: 1px dashed var(--line); }
.board-label{ color: var(--muted); font-size: 13px; }
.board-num{ font: 600 22px var(--mono); font-variant-numeric: tabular-nums; }
.board-num.dim{ font-size: 18px; }
.board-kind{ color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.dot{ inline-size: 8px; block-size: 8px; border-radius: 50%; display: inline-block; }
.dot.fresh{ background: var(--pos); }
.dot.aging{ background: var(--warn); }
.dot.stale{ background: var(--neg); }

/* ── Sparkline under the hero ───────────────────────────────────────── */

.spark{ display: block; inline-size: 100%; block-size: 64px; margin-block-start: var(--s4); }
.spark polyline{ stroke: var(--gold); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.spark circle{ fill: var(--gold); }

/* ── Why-it-moved chips ─────────────────────────────────────────────── */

.change-chips{ display: flex; gap: var(--s2); flex-wrap: wrap; margin-block-start: var(--s3); }
.chip{
    border: 1px solid var(--line); border-radius: var(--r-pill);
    padding-block: 3px; padding-inline: 10px;
    font-size: 12px; color: var(--muted);
}
.chip b{ font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.chip.muted{ border-style: dashed; }

/* ── This-month line and spending bars ──────────────────────────────── */

.month-line{
    display: flex; gap: var(--s5); flex-wrap: wrap; align-items: baseline;
    margin-block-end: var(--s4); font-size: 14px; color: var(--muted);
}
.month-line b{ font-weight: 600; }
.barrow{ text-decoration: none; color: var(--text); }
.bar-label{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.bar-amount{ font-size: 13px; text-align: end; }
.fill.c1{ background: var(--cat-1); }
.fill.c2{ background: var(--cat-2); }
.fill.c3{ background: var(--cat-3); }
.fill.c4{ background: var(--cat-4); }
.fill.c5{ background: var(--cat-5); }
.fill.c6{ background: var(--cat-6); }
.fill.rest{ background: #5b6472; }
.fill.over{ background: var(--neg); }

/* ── Wallet card market value line ──────────────────────────────────── */

.card-value{ color: var(--muted); font-size: 12px; margin-block-start: var(--s1); }
.card-value .num{ font-size: 12px; }
.review-card{ display: block; text-decoration: none; color: var(--muted); }
.review-card:hover{ border-color: var(--muted); }

/* ── Rate tiles (Rates screen) ──────────────────────────────────────── */

.tiles{
    display: grid; gap: var(--s3);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin-block: var(--s4);
}
.tile{
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r2);
    padding-block: var(--s4); padding-inline: var(--s4);
}
.tile-label{ color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.tile-num{ font: 600 27px var(--mono); font-variant-numeric: tabular-nums; margin-block: 6px; }
.tile-num.dim{ color: var(--muted); }
.tile-sub{ color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.oneline{ display: flex; gap: var(--s2); margin-block-start: var(--s3); }
.oneline input{ flex: 1; min-inline-size: 0; }

/* ── Rate history chart ─────────────────────────────────────────────── */

.rates-chart{
    inline-size: 100%; block-size: 150px; display: block;
    background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r2);
}
.rates-chart .market{ stroke: var(--gold); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.rates-chart .official{
    stroke: var(--cat-5); stroke-width: 2; fill: none;
    stroke-dasharray: 5 4; vector-effect: non-scaling-stroke;
}
.chart-legend{ display: flex; gap: var(--s4); font-size: 12px; color: var(--muted); margin-block-start: 8px; flex-wrap: wrap; }
.swatch{ inline-size: 16px; block-size: 3px; display: inline-block; vertical-align: middle; border-radius: 2px; }

details{
    border: 1px solid var(--line); border-radius: var(--r2);
    padding-block: var(--s3); padding-inline: var(--s4);
    margin-block: var(--s4); background: var(--ink-2);
}
details summary{ cursor: pointer; color: var(--muted); font-size: 13px; }
details summary:hover{ color: var(--text); }
details[open] summary{ margin-block-end: var(--s3); }

/* ── The plan ───────────────────────────────────────────────────────── */

.planrows{ display: grid; gap: var(--s3); margin-block: var(--s4); }
.planrow{
    display: grid; grid-template-columns: 130px 1fr 210px; gap: var(--s3);
    align-items: center; font-size: 13px;
}
.planrow .nums{ text-align: end; }

/* ── Review chrome ──────────────────────────────────────────────────── */

tr.focus{ outline: 2px solid var(--gold); outline-offset: -2px; }
tr.break td{ border-block-start: 2px solid var(--neg); }

/* ── Month headers on Activity ──────────────────────────────────────── */

.month-head{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.month-head h2{ margin-block: var(--s6) var(--s3); }
.month-io{ font-size: 12px; color: var(--muted); display: flex; gap: var(--s3); }

/* ── Privacy blur ───────────────────────────────────────────────────── */
/* One session flag; the numbers stay in the DOM but not on the bus. */

.privacy .hero-amount, .privacy .card-balance, .privacy .row-amount,
.privacy .board-num, .privacy .tile-num, .privacy .bar-amount,
.privacy .num, .privacy .headline .amount{
    filter: blur(9px);
}
.eye button{
    background: none; border: 1px solid var(--line); color: var(--muted);
    border-radius: var(--r1); inline-size: 40px; min-block-size: 36px;
    display: grid; place-items: center; cursor: pointer;
}
.eye button:hover{ color: var(--text); border-color: var(--muted); }
.eye svg{ width: 18px; height: 18px; }
.privacy .eye button{ color: var(--gold); border-color: var(--gold); }

@media (max-width: 640px){
    .board-row{ grid-template-columns: 78px 1fr auto; }
    .planrow{ grid-template-columns: 96px 1fr auto; }
    .barrow{ grid-template-columns: 96px 1fr 110px; }
    .month-head h2{ margin-block: var(--s5) var(--s2); }
}

/* ── Motion discipline ──────────────────────────────────────────────── */

.htmx-swapping{ opacity: .4; transition: opacity 120ms ease-out; }
.htmx-settling{ background: var(--ink-3); transition: background 150ms ease-out; }

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation: none !important; transition: none !important; }
}