/*
 * Weekly Budget — web.
 *
 * The palette, type ramp, shapes and components mirror the Android app's
 * Material 3 theme so the two read as one product. Tokens here are the same
 * values as app/src/main/res/values/colors.xml (and values-night for dark),
 * so a change on one side has an obvious counterpart on the other.
 *
 * No framework: the whole app is six small pages, and Bootstrap 3 was both
 * heavier than the result and the reason it looked a decade old.
 */

:root {
    --primary: #146c43;
    --on-primary: #ffffff;
    --primary-container: #a6f2c8;
    --on-primary-container: #00210f;

    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #410002;

    --surface: #f6fbf5;
    --on-surface: #171d19;
    --on-surface-variant: #404943;

    --surface-lowest: #ffffff;
    --surface-low: #f0f6ef;
    --surface-container: #ebf1ea;

    --outline: #707972;
    --outline-variant: #bfc9c1;

    --track: rgba(0, 0, 0, .16);

    /* The Android app's chart palette, value for value, so a category is the
       same colour whichever device it is looked at on. */
    --chart-1: #2e7d5b;
    --chart-2: #3f6f9e;
    --chart-3: #b5843a;
    --chart-4: #8a5aa8;
    --chart-5: #c25e5e;
    --chart-6: #3f8f8a;
    --chart-7: #96793c;
    --chart-8: #6f7fb8;
    --chart-9: #a85b7e;
    --chart-10: #5c8a4a;

    --radius-s: 14px;
    --radius-m: 20px;
    --radius-l: 28px;

    --gutter: 16px;
    --container: 640px;

    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 16px rgba(0, 0, 0, .06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #8bd6ac;
        --on-primary: #00391f;
        --primary-container: #00522f;
        --on-primary-container: #a6f2c8;

        --error: #ffb4ab;
        --on-error: #690005;
        --error-container: #93000a;
        --on-error-container: #ffdad6;

        --surface: #0f1511;
        --on-surface: #dfe5de;
        --on-surface-variant: #bfc9c1;

        --surface-lowest: #0a0f0c;
        --surface-low: #171d19;
        --surface-container: #1b211d;

        --outline: #8a938c;
        --outline-variant: #404943;

        --track: rgba(255, 255, 255, .16);

        --chart-1: #6cc79b;
        --chart-2: #7fb2e0;
        --chart-3: #e0b872;
        --chart-4: #c7a2e0;
        --chart-5: #ef9a9a;
        --chart-6: #76ccc6;
        --chart-7: #d6bb72;
        --chart-8: #a8b4e8;
        --chart-9: #db9ab8;
        --chart-10: #9dc784;

        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .3);
    }
}

/*
   Tabs are separate documents here, so every switch is a full page load and
   flashes white. This cross-fades them instead — the web counterpart of
   suppressing the push animation between tabs in the app. Browsers without
   it simply navigate as before.
*/
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Content links only. Everything built out of an anchor — rows, nav items, the
   app-bar title, anything wearing .btn — sets its own colour with a class, and
   a class beats this. Without it those links fell back to the browser's blue,
   which is unreadable on the dark surface. */
a { color: var(--primary); }

body {
    margin: 0;
    background: var(--surface);
    color: var(--on-surface);
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    /* Room for the fixed bottom bar, plus the iOS home indicator. */
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
    -webkit-font-smoothing: antialiased;
}

/* Tabular figures keep columns of amounts from looking ragged. */
.money { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- App bar ---------- */

.appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
    background: var(--surface);
    border-bottom: 1px solid transparent;
}

.appbar__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: var(--container);
    margin: 0 auto;
}

.appbar.is-scrolled { border-bottom-color: var(--outline-variant); }

.appbar__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appbar__title a { color: inherit; text-decoration: none; }

/* The budget's name, on screens whose title is needed for the screen itself.
   With more than one budget it is otherwise possible to add a week of
   expenses to the wrong one with nothing on the page saying so. */
.appbar__titles { flex: 1; min-width: 0; }
.appbar__titles .appbar__title { flex: none; }

.appbar__sub {
    display: block;
    margin: -2px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--on-surface-variant);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appbar__actions { display: flex; align-items: center; gap: 4px; }

/* ---------- Layout ---------- */

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.appbar > .container { padding: 0; }



/* ---------- Period selector ---------- */

.period {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0 8px;
}

.period__label {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: none;
    border-radius: var(--radius-s);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.period__label:hover { background: var(--surface-container); }
.period__label:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* The picker input is driven by the heading, never shown itself. */
.period__input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.period { position: relative; }

.period__sub {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--on-surface-variant);
}

/* ---------- Buttons ---------- */

.btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s ease, background-color .15s ease;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(.94); }
.btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.btn--text {
    background: transparent;
    color: var(--primary);
    padding: 0 12px;
}

.btn--outlined {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--outline-variant);
}

.btn--icon {
    width: 44px;
    min-height: 44px;
    padding: 0;
    background: transparent;
    color: var(--on-surface-variant);
    border-radius: 999px;
    font-size: 20px;
    line-height: 1;
}

.btn--icon:hover { background: var(--surface-container); filter: none; }

.btn--block {
    width: 100%;
    min-height: 56px;
    border-radius: var(--radius-s);
    font-size: 16px;
}

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

.card {
    background: var(--surface-low);
    border-radius: var(--radius-m);
    padding: 20px 24px;
}

.card--hero {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.card--over { background: var(--error-container); color: var(--on-error-container); }

.hero__label { font-size: 14px; font-weight: 500; margin: 0; }

.hero__amount {
    margin: 4px 0 0;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.hero__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font-size: 14px;
}

/* ---------- Progress ---------- */

.progress {
    height: 10px;
    margin-top: 14px;
    border-radius: 999px;
    background: var(--track);
    overflow: hidden;
}

.progress__fill {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width .3s ease;
}

.card--over .progress__fill { background: var(--error); }

.progress--slim { height: 8px; margin-top: 12px; }

/* ---------- Lists ---------- */

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 20px 4px 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--on-surface-variant);
}

.row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: var(--surface-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-s);
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.row:hover { background: var(--surface-container); }
.row:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.row--static { cursor: default; }
.row--static:hover { background: var(--surface-lowest); }

.row__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--outline);
}

.row__main { flex: 1; min-width: 0; }

.row__title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row__sub { display: block; font-size: 13px; color: var(--on-surface-variant); }

.row__amount { flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

.row__amount--over { color: var(--error); }

.row--block { display: block; }
.row--block .row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* ---------- Empty state ---------- */

.empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--on-surface-variant);
}

.empty__title { margin: 0 0 6px; font-size: 18px; font-weight: 500; color: var(--on-surface); }
.empty__body { margin: 0; font-size: 15px; }

/* ---------- Forms ---------- */

.field { margin-bottom: 14px; }

.field__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--on-surface-variant);
}

.field__input {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 0 16px;
    background: transparent;
    color: var(--on-surface);
    border: 1px solid var(--outline);
    border-radius: var(--radius-s);
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.field__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

select.field__input {
    /* Keeps the native arrow visible on iOS, which hides it when appearance
       is stripped. */
    background-image: linear-gradient(45deg, transparent 50%, var(--on-surface-variant) 50%),
                      linear-gradient(135deg, var(--on-surface-variant) 50%, transparent 50%);
    background-position: calc(100% - 20px) 25px, calc(100% - 15px) 25px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 44px;
}

.field__hint { margin: 6px 2px 0; font-size: 13px; color: var(--on-surface-variant); }

/* The amount field on the add/edit form, sized like the app's. */
.amount-card { text-align: center; }

.amount-card .field__input {
    border: none;
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    min-height: 56px;
}

.amount-card .field__input:focus { box-shadow: none; }

.form-actions { margin-top: 24px; }

/* A copyable identifier. */
.id-card { display: flex; align-items: center; gap: 12px; }
.id-card__value {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    word-break: break-all;
}

/* ---------- Bottom navigation ---------- */

.bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    background: var(--surface-container);
    border-top: 1px solid var(--outline-variant);
}

.bottomnav__inner {
    display: flex;
    width: 100%;
    max-width: var(--container);
    gap: 4px;
}

.bottomnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: var(--on-surface-variant);
    font: inherit;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 16px;
}

.bottomnav__item:hover { color: var(--on-surface); }

.bottomnav__item[aria-current="page"] { color: var(--on-surface); font-weight: 600; }

.bottomnav__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    border-radius: 999px;
    line-height: 1;
}

.bottomnav__icon svg { width: 20px; height: 20px; fill: currentColor; }

.appbar__actions svg { width: 20px; height: 20px; fill: currentColor; }

.bottomnav__item[aria-current="page"] .bottomnav__icon {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

.bottomnav__item--accent .bottomnav__icon { background: var(--primary); color: var(--on-primary); }

/* ---------- Segmented toggle ---------- */

.segment {
    display: flex;
    padding: 3px;
    margin: 4px 0 12px;
    background: var(--surface-container);
    border-radius: 999px;
}

.segment__item {
    flex: 1;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--on-surface-variant);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
}

.segment__item:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.segment__item.is-active {
    background: var(--surface-lowest);
    color: var(--on-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* ---------- Category chart ---------- */

.donut {
    display: block;
    width: 100%;
    max-width: 260px;
    margin: 8px auto 4px;
    /* Start the first slice at twelve o'clock, the way the app draws it. */
    transform: rotate(-90deg);
}

.donut__slice {
    cursor: pointer;
    transition: opacity .15s ease;
}

.donut__slice:hover { opacity: .82; }
.donut__slice.is-dimmed { opacity: .28; }

.donut__center {
    transform: rotate(90deg);
    transform-origin: center;
    text-anchor: middle;
    fill: var(--on-surface);
}

/* These are SVG user units, which the 0 0 100 100 viewBox scales by about 2.6
   at the donut's rendered width — so 10 here lands near 26px on screen. */
.donut__total { font-size: 10px; font-weight: 600; letter-spacing: -.02em; }
.donut__caption { font-size: 4.5px; fill: var(--on-surface-variant); }

.legend { margin-top: 8px; }

.legend__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--radius-s);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.legend__item:hover { background: var(--surface-container); }
.legend__item:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

.legend__item.is-selected {
    background: var(--surface-lowest);
    border-color: var(--outline-variant);
}

.legend__swatch {
    flex: none;
    width: 14px; height: 14px;
    border-radius: 4px;
}

.legend__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend__share { flex: none; font-size: 13px; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.legend__amount { flex: none; font-variant-numeric: tabular-nums; font-weight: 500; min-width: 72px; text-align: right; }

/* ---------- Prose, for How this works ---------- */

.prose { max-width: 34em; }
.prose h2 { margin: 10px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.prose ul { margin: 0 0 12px; padding-left: 22px; }
.prose li { font-size: 16px; line-height: 1.6; color: var(--on-surface-variant); margin-bottom: 6px; }
.prose strong { color: var(--on-surface); }

/*
   The store links: two rows, so bullets are more furniture than help, and the
   rows read better flush with the body text than indented under it. The type
   selector is not decoration — `.prose ul` sets a padding-left and outspecifies
   a bare `.app-links`, which left the reset silently doing nothing.
*/
ul.app-links { list-style: none; margin: 0 0 12px; padding-left: 0; }
ul.app-links li { margin-bottom: 8px; }
.prose p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--on-surface-variant); }

/* The icon carries the spacing between sections, so the heading sits close
   under its own icon rather than floating midway between two. */
.prose__icon {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    margin: 32px 0 0;
    border-radius: 14px;
    background: var(--primary-container); color: var(--on-primary-container);
}
.prose > .prose__icon:first-child { margin-top: 8px; }
.prose__icon svg { width: 24px; height: 24px; fill: currentColor; }

/* ---------- Utilities ---------- */

.btn--danger { background: var(--error-container); color: var(--on-error-container); }
.btn--danger:hover { filter: brightness(.97); }

.row__dot--lg { width: 12px; height: 12px; }

.stack > * + * { margin-top: 12px; }
.muted { color: var(--on-surface-variant); }
.text-center { text-align: center; }
.mt-l { margin-top: 24px; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

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

/* ---------- Language picker ---------- */

/* Every page carries it, so it is deliberately quiet: a select the size of the
   small print, centred under the content and above the bottom bar. Somebody
   whose browser already asked for their language never needs to see it, and
   somebody on a shared or misconfigured device needs it on every page. */
.langbar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
}

.langbar__select {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    font-size: 13px;
    color: var(--on-surface-variant);
    background: transparent;
    border: 1px solid var(--outline);
    border-radius: var(--radius-s);
    padding: 6px 10px;
}

.langbar__select:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

/* The bottom bar is fixed, so the picker would sit under it on the pages that
   have one. */
.bottomnav ~ .langbar,
body:has(.bottomnav) .langbar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }