/* ============================================================
   My Budget Jar — stylesheet
   Tone: a calm, ledger-like financial tool. Warm paper background,
   ink-navy structure, sage for credits/under-budget, clay for
   debits/over-budget. No dashboard-template gradients.
   ============================================================ */

:root {
    --paper:      #F6F3EC;
    --paper-dim:  #EDE8DB;
    --ink:        #20262E;
    --ink-soft:   #4B5563;
    --navy:       #2B3A4A;
    --navy-dark:  #1C2733;
    --sage:       #5C7A5E;
    --sage-bg:    #E6EDE3;
    --clay:       #A8462F;
    --clay-bg:    #F3E3DC;
    --line:       #D9D2C2;
    --gold:       #B8893F;

    --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--navy-dark);
    font-weight: 600;
    margin: 0 0 0.5em 0;
}

h1 { font-size: 1.9rem; letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------------- Layout ---------------- */
.topbar {
    background: var(--navy-dark);
    color: var(--paper);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.75rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.brand {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.01em;
    color: var(--paper);
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.brand img { display: block; height: 26px; width: auto; }
.topbar nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.topbar nav a {
    color: #C9CFD6;
    font-size: 0.92rem;
    font-weight: 500;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}
.topbar nav a:hover { color: var(--paper); text-decoration: none; }
.topbar nav a.active { color: var(--paper); border-bottom-color: var(--gold); }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.75rem 4rem;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-head p.subtitle { color: var(--ink-soft); margin: 0.2rem 0 0; }

/* ---------------- Buttons ---------------- */
.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 4px;
    border: 1px solid var(--navy);
    background: var(--navy);
    color: var(--paper) !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background 0.15s ease, transform 0.05s ease;
}
.btn:hover { background: var(--navy-dark); }
.btn:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--navy) !important; border-color: var(--line); }
.btn-secondary:hover { background: var(--paper-dim); }
.btn-danger { background: var(--clay); border-color: var(--clay); }
.btn-danger:hover { background: #8B3823; }
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.82rem; }

/* ---------------- Cards / tables ---------------- */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1.4rem;
    margin-bottom: 1.5rem;
}

/* ---------------- Collapsible Overview card ---------------- */
.overview-card {
    padding: 1.1rem 1.4rem;
}
.overview-card[open] {
    padding-bottom: 1.4rem;
}
.overview-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    user-select: none;
}
.overview-summary::-webkit-details-marker {
    display: none;
}
.overview-summary::before {
    content: '▸';
    display: inline-block;
    color: var(--ink-soft);
    font-size: 0.85rem;
    transition: transform 0.15s ease;
    margin-right: 0.25rem;
}
.overview-card[open] .overview-summary::before {
    transform: rotate(90deg);
}
.overview-hint {
    color: var(--ink-soft);
    font-size: 0.85rem;
}
.overview-summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 3px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
thead th {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
    background: var(--paper-dim);
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid var(--line);
}
tbody td {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.92rem;
    vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--paper-dim); }
tfoot td {
    padding: 0.7rem 0.9rem;
    border-top: 2px solid var(--navy);
    background: var(--paper-dim);
    font-size: 0.92rem;
}

/* ---------------- Mobile transaction cards ---------------- */
/* Hidden by default (desktop); shown instead of the table under 640px. */
.tx-card-list {
    display: none;
}
.tx-card-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}
.tx-card-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
}
.tx-card-action-edit {
    left: 0;
    background: var(--navy);
}
.tx-card-action-delete {
    right: 0;
    background: var(--clay);
}
.tx-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.8rem 0.9rem;
    touch-action: pan-y;
}
.tx-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}
.tx-card-category {
    font-weight: 600;
    color: var(--navy-dark);
}
.tx-card-amount {
    font-family: var(--font-mono);
    font-weight: 700;
    white-space: nowrap;
}
.tx-card-row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-bottom: 0.3rem;
}
.tx-card-row3 {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--ink-soft);
}
.tx-card-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.tx-card-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 0.9rem;
    background: var(--paper-dim);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 0.6rem;
}
.tx-card-hint {
    display: none;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.78rem;
    margin: -0.2rem 0 0.75rem;
}

.num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.amount-credit { color: var(--sage); font-weight: 600; }
.amount-debit { color: var(--clay); font-weight: 600; }

.badge {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
}
.badge-bank   { background: var(--sage-bg); color: var(--sage); }
.badge-checking { background: var(--sage-bg); color: var(--sage); }
.badge-savings  { background: #DCE8F0; color: #2D6A8F; }
.badge-credit { background: var(--clay-bg); color: var(--clay); }
.badge-cash   { background: #EDE6F4; color: #6B4E91; }
.badge-pending { background: #FCEFD0; color: var(--gold); }
.badge-completed { background: var(--sage-bg); color: var(--sage); }
.badge-pending-work { background: #E0E9F2; color: #3C6790; }
.badge-reported-work { background: #DCEEEA; color: #2E7D6E; }

/* ---------------- Forms ---------------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
}
.form-grid .full { grid-column: 1 / -1; }
label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
    margin-bottom: 0.3rem;
}
input, select, textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 0.95rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--navy); }
.form-actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; }

.help-text { color: var(--ink-soft); font-size: 0.82rem; margin-top: 0.3rem; }

/* ---------------- Flash messages ---------------- */
.flash {
    padding: 0.8rem 1.1rem;
    border-radius: 5px;
    margin-bottom: 1.25rem;
    font-size: 0.92rem;
    border: 1px solid transparent;
}
.flash.success { background: var(--sage-bg); color: #3B5440; border-color: #C9D9C5; }
.flash.error   { background: var(--clay-bg); color: #7A331F; border-color: #E3C5B7; }

/* ---------------- Dashboard widgets ---------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.stat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy);
    border-radius: 6px;
    padding: 1rem 1.2rem;
}
.stat-card .label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.stat-card .value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; margin-top: 0.25rem; }
.stat-card.positive { border-left-color: var(--sage); }
.stat-card.negative { border-left-color: var(--clay); }

.progress-track {
    background: var(--paper-dim);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-top: 0.4rem;
}
.progress-fill { height: 100%; border-radius: 999px; background: var(--sage); }
.progress-fill.over { background: var(--clay); }

/* ---------------- Mobile budget cards ---------------- */
/* Hidden by default (desktop); shown instead of the table under 640px. */
.budget-card-list {
    display: none;
}
.budget-card-hint {
    display: none;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.78rem;
    margin: 0.5rem 0 1.5rem;
}
.budget-card-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}
.budget-card-action {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    background: var(--navy);
}
.budget-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.8rem 0.9rem;
    touch-action: pan-y;
}
.budget-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.2rem;
}
.budget-card-name {
    font-weight: 600;
    color: var(--navy-dark);
}
.budget-card-row2 {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-bottom: 0.15rem;
}
.budget-card-row3 {
    margin-top: 0.6rem;
    display: flex;
    justify-content: flex-end;
}

/* ---------------- Mobile category cards ---------------- */
/* Hidden by default (desktop); shown instead of the table under 640px. */
.cat-card-list {
    display: none;
}
.cat-card-hint {
    display: none;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.78rem;
    margin: 0.5rem 0 1.5rem;
}
.cat-card-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}
.cat-card-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
}
.cat-card-action-edit {
    left: 0;
    background: var(--navy);
}
.cat-card-action-delete {
    right: 0;
    background: var(--clay);
}
.cat-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.8rem 0.9rem;
    touch-action: pan-y;
}
.cat-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
}
.cat-card-name {
    font-weight: 600;
    color: var(--navy-dark);
}
.cat-card-row2 {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

/* ---------------- Mobile account cards ---------------- */
/* Hidden by default (desktop); shown instead of the table under 640px. */
.acct-card-list {
    display: none;
}
.acct-card-hint {
    display: none;
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.78rem;
    margin: 0.5rem 0 1.5rem;
}
.acct-card-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}
.acct-card-action {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
}
.acct-card-action-edit {
    left: 0;
    background: var(--navy);
}
.acct-card-action-delete {
    right: 0;
    background: var(--clay);
}
.acct-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.8rem 0.9rem;
    touch-action: pan-y;
}
.acct-card-row1 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
.acct-card-name {
    font-weight: 600;
    color: var(--navy-dark);
}
.acct-card-balance {
    font-size: 1.05rem;
    font-weight: 700;
}
.acct-card-row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-bottom: 0.3rem;
}
.acct-card-row3 {
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ink-soft);
}
.empty-state a { font-weight: 600; }

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
}
.dashboard-grid > * {
    /* Without this, a 1fr grid track can never shrink narrower than its content's
       natural minimum width, which lets wide table content blow out the column
       (and the whole page) on narrow screens even though the column is "1fr". */
    min-width: 0;
}

.filter-bar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1rem;
}
.filter-bar .field { min-width: 150px; }
.filter-bar label { margin-bottom: 0.25rem; }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .topbar { flex-direction: column; align-items: flex-start; }
    table { font-size: 0.85rem; }

    /* On phone-width screens, the transactions table is replaced by a stacked
       card list (.tx-card-list) — trying to keep 8+ table columns readable on
       a ~360-390px screen doesn't work well, even after hiding columns. */
    .table-scroll-wrap {
        display: none;
    }
    .tx-card-list {
        display: block;
    }
    .tx-card-hint {
        display: block;
    }

    /* Same table-to-card swap for the Income/Expenses budget tables. */
    .budget-table {
        display: none;
    }
    .budget-card-list {
        display: block;
    }
    .budget-card-hint {
        display: block;
    }

    /* Same table-to-card swap for the Categories page. */
    .categories-table {
        display: none;
    }
    .cat-card-list {
        display: block;
    }
    .cat-card-hint {
        display: block;
    }

    /* Same table-to-card swap for the Accounts page. */
    .accounts-table {
        display: none;
    }
    .acct-card-list {
        display: block;
    }
    .acct-card-hint {
        display: block;
    }

    /* Cards on phone-width screens: let a table scroll horizontally inside its own
       card rather than overflowing past the card's edge or clipping the last column. */
    .card {
        padding: 1rem;
    }
    .card table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .card table thead,
    .card table tbody,
    .card table tfoot {
        display: table;
        width: 100%;
        table-layout: auto;
    }
    thead th, tbody td, tfoot td {
        padding: 0.55rem 0.6rem;
    }
}

/* ============================================================
   Accounts & sign-in
   ============================================================ */

/* Signed-in user + sign-out, pinned to the right of the top bar. */
.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-left: auto;
}
.topbar-user > a {
    color: #C9CFD6;
    font-size: 0.92rem;
    font-weight: 500;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
}
.topbar-user > a:hover { color: var(--paper); text-decoration: none; }
.topbar-user > a.active { color: var(--paper); border-bottom-color: var(--gold); }
.topbar-signout { margin: 0; }
.topbar-signout button {
    background: transparent;
    border: 1px solid rgba(201, 207, 214, 0.45);
    color: #C9CFD6;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    cursor: pointer;
}
.topbar-signout button:hover { color: var(--paper); border-color: var(--paper); }

/* The standalone sign-in / register / code pages: one narrow card on the paper
   background, no app navigation (there's nothing to navigate to yet). */
.auth-wrap {
    max-width: 27rem;
    margin: 0 auto;
    padding: 3.5rem 1.25rem 4rem;
}
.auth-brand {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--navy-dark);
    text-align: center;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.auth-brand img { display: block; height: 30px; width: auto; }
.auth-tagline {
    text-align: center;
    color: var(--ink-soft);
    font-size: 0.88rem;
    margin: 0 0 1.6rem;
}
.auth-card {
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1.6rem 1.7rem;
}
.auth-card h1 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.auth-card > p.subtitle {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
}
.auth-card label { margin-top: 0.9rem; }
.auth-card label:first-of-type { margin-top: 0; }
.auth-card .btn { width: 100%; justify-content: center; text-align: center; }
.auth-links {
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88rem;
    flex-wrap: wrap;
}

/* The 6-digit code box: wide, monospaced, one glyph per slot. */
.code-input {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    letter-spacing: 0.5rem;
    text-align: center;
    padding: 0.6rem 0.5rem;
}
.code-sent-to {
    background: var(--paper-dim);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 0.7rem 0.85rem;
    font-size: 0.88rem;
    margin-bottom: 1.1rem;
}

/* Trusted-device list on the account page. */
.device-list { list-style: none; padding: 0; margin: 0; }
.device-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.device-list li:last-child { border-bottom: none; }
.device-meta { font-size: 0.82rem; color: var(--ink-soft); }

/* Setup escape hatch: sign-in codes printed on the page instead of emailed.
   Both of these are meant to look like something you want to switch off. */
.insecure-banner {
    background: var(--clay);
    color: #FFF6F2;
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 0.6rem 1.75rem;
    text-align: center;
}
.insecure-banner code {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.92em;
}
.code-onscreen {
    border: 2px dashed var(--clay);
    background: var(--clay-bg);
    border-radius: 5px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.1rem;
    text-align: center;
}
.code-onscreen-label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7A331F;
    margin-bottom: 0.35rem;
}
.code-onscreen-value {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.4rem;
    color: #7A331F;
    user-select: all;
}
.code-onscreen-note {
    font-size: 0.76rem;
    color: #7A331F;
    margin-top: 0.45rem;
    line-height: 1.4;
}
.code-onscreen-note code {
    font-family: var(--font-mono);
    font-size: 0.95em;
}

@media (max-width: 640px) {
    .topbar-user { width: 100%; justify-content: space-between; margin-left: 0; }
    .insecure-banner { padding: 0.6rem 1rem; }
    .auth-wrap { padding-top: 2rem; }
    .auth-card { padding: 1.25rem; }
}

/* ============================================================
   Reports (Trends, Year in Review)
   ============================================================ */

.report-tabs {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.5rem;
}
.report-tabs a {
    color: var(--ink-soft);
    font-weight: 600;
    font-size: 0.92rem;
    padding-bottom: 0.7rem;
    border-bottom: 2px solid transparent;
}
.report-tabs a:hover { text-decoration: none; color: var(--navy); }
.report-tabs a.active { color: var(--navy-dark); border-bottom-color: var(--gold); }

.chart-card h2 { margin-bottom: 0.2rem; }
.chart-card .help-text { margin-top: 0; margin-bottom: 0.9rem; }

.chart-legend {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: var(--ink-soft);
}
.chart-legend-item { display: flex; align-items: center; gap: 0.4rem; }
.chart-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
}
.chart-swatch-income { background: var(--sage); }
.chart-swatch-expense { background: var(--clay); }

.chart-svg { display: block; width: 100%; height: auto; }
.chart-gridline { stroke: var(--line); stroke-width: 1; }
.chart-axis-line { stroke: var(--ink-soft); stroke-width: 1; }
.chart-zero-line { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 4 3; }
.chart-axis-label {
    font-family: var(--font-mono);
    font-size: 11px;
    fill: var(--ink-soft);
}
.chart-bar-income { fill: var(--sage); }
.chart-bar-expense { fill: var(--clay); }
.chart-line { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-area-fill { fill: var(--navy); opacity: 0.08; }
.chart-point { fill: var(--navy); }

/* Year-in-review category ranking list */
.year-cat-list { list-style: none; padding: 0; margin: 0; }
.year-cat-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}
.year-cat-list li:last-child { border-bottom: none; }
.year-cat-name { font-weight: 600; color: var(--navy-dark); }
.year-cat-bar-track {
    flex: 1;
    background: var(--paper-dim);
    border-radius: 999px;
    height: 8px;
    margin: 0 1rem;
    overflow: hidden;
}
.year-cat-bar-fill { height: 100%; border-radius: 999px; background: var(--clay); }