:root {
    --bg: #fff;
    --muted: #cfcfcf;
    --income: #c8f58b;
    --expense: #ffc7d0;
    --text: #111;
    --greybox: #e6e6e6;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html,
body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--text)
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

header {
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.controls {
    display: flex;
    gap: 12px;
    align-items: center
}

main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px
}

#chart-wrap {
    width: 100%;
    max-width: 1200px;
    position: relative
}

svg {
    width: 100%;
    height: auto;     /* intrinsic height from viewBox aspect ratio — no letterboxing */
    display: block;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa
}

/* Grid lines */
.grid-line {
    stroke: #d3d3d3;
    stroke-width: 0.8;
    opacity: 0.6
}

.grid-line-major {
    stroke: #999;
    stroke-width: 1.5;
    opacity: 0.8
}

/* Step line */
.balance-line {
    fill: none;
    stroke: #1f77b4;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round
}

/* High-DPI: keep stroke widths consistent and crisp on scaled displays */
.grid-line,
.grid-line-major,
.balance-line,
.x-zero-line,
.transaction-point {
    vector-effect: non-scaling-stroke;
    shape-rendering: crispEdges;
}

/* keep axis labels crisp */
.x-axis text, .y-axis text {
    shape-rendering: geometricPrecision;
}

/* Transaction point circles */
.transaction-point {
    stroke: #fff;
    stroke-width: 1.5;
    cursor: crosshair;
    transition: r 0.2s ease, opacity 0.2s ease
}

.transaction-point.income {
    fill: var(--income)
}

.transaction-point.expense {
    fill: var(--expense)
}

/* Past vs future colouring (past darker blue, future lighter blue) */
.transaction-point.past {
    stroke: #0b3f7a;
    stroke-width: 1.5;
}
.transaction-point.future {
    stroke: #6aaae6;
    stroke-width: 1.5;
}

.balance-line.past {
    stroke: #0b3f7a;
}
.balance-line.future {
    stroke: #9ec8f7;
}

.transaction-point:hover {
    r: 6;
    opacity: 0.9
}

/* Axes */
.y-axis,
.x-axis {
    color: #666;
    font-size: 12px
}

.y-axis line,
.x-axis line {
    stroke: #ccc;
    stroke-width: 1
}

.y-axis path,
.x-axis path {
    stroke: #999;
    stroke-width: 1.2
}

/* Hide the x-axis baseline and tick lines but keep labels visible */
.x-axis path.domain,
.x-axis .tick line {
    display: none;
}

/* Horizontal zero axis line (y=0) — visual only, labels remain at bottom */
.x-zero-line {
    stroke: #999;
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: 0.95;
}

.axis-label {
    font-size: 12px;
    fill: #333;
    font-weight: 500
}

#tooltip {
    position: fixed;
    z-index: 50;
    padding: 10px 12px;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    background: #fff;
    border: 1px solid #ddd;
    font-size: 13px;
    max-width: 280px;
    line-height: 1.4
}

#tooltip div {
    margin: 3px 0
}

#tooltip strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px
}

#tooltip small {
    display: block;
    color: #666;
    margin-top: 4px;
    word-break: break-word
}

.hidden {
    display: none
}

footer {
    padding: 8px 12px;
    font-size: 12px;
    color: #666
}

@media (max-width:600px) {
    svg {
        height: auto
    }

    .axis-label {
        font-size: 10px
    }

    .y-axis,
    .x-axis {
        font-size: 10px
    }

    .transaction-point {
        r: 3
    }

    .transaction-point:hover {
        r: 5
    }

    /* --- Mobile-first enhancements --- */
    html, body {
        font-size: 15px;
    }
    #app {
        min-height: 100vh;
    }
    header {
        flex-direction: column;
        align-items: stretch;
        padding: 8px 4px;
    }
    .controls {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    main {
        padding: 2px;
        align-items: stretch;
    }
    #chart-wrap {
        max-width: 100vw;
        padding: 0 2px;
    }
    svg {
        height: auto;
        border-radius: 4px;
    }
    h3 {
        font-size: 1.1em;
        margin: 10px 0 4px 0;
        text-align: center;
    }
    button, .controls button {
        font-size: 1em;
        padding: 12px 0;
        border-radius: 6px;
        width: 100%;
        min-height: 44px;
        margin: 0;
    }
    #tooltip {
        font-size: 14px;
        max-width: 98vw;
        padding: 8px 8px;
    }
    footer {
        font-size: 11px;
        padding: 6px 4px;
        text-align: center;
    }
}