/* FETCH RECONCILIATION | Local roles from FETCH src/css/index.css, 440×956 reference.
   Existing style.css owns Stack layout and responsive behavior. No product state here. */
@font-face {
    font-family: Circular;
    src: url('/assets/fonts/circular-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Circular;
    src: url('/assets/fonts/circular-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Circular;
    src: url('/assets/fonts/circular-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: Circular;
    src: url('/assets/fonts/circular-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --blue: #4BA8FC;
    --red: #EB5858;
    --secondary: #aaaeb2;
    --line: #292e30;
    --fetch-unit: clamp(.8px, .227273vw, 1px);
    --fetch-body: calc(18 * var(--fetch-unit));
    --fetch-description: calc(16 * var(--fetch-unit));
    --fetch-title: calc(20 * var(--fetch-unit));
    --fetch-sheet: calc(24 * var(--fetch-unit));
    --fetch-heading: calc(32 * var(--fetch-unit));
    --fetch-gutter: calc(22 * var(--fetch-unit));
    --fetch-control: calc(56 * var(--fetch-unit));
    --fetch-radius: calc(20 * var(--fetch-unit));
}

body, button, input, select, textarea {
    font-family: Circular, sans-serif;
    font-synthesis: none;
}

body, .budget-app, .desktop-window {
    background: #0c1010;
    color: #f5f5f7;
}

body {
    font-size: var(--fetch-body);
    line-height: 1.4;
}

.budget-app {
    padding-inline: max(var(--fetch-gutter), env(safe-area-inset-left));
    padding-top: max(calc(30 * var(--fetch-unit)), env(safe-area-inset-top));
}

#desktop-sidebar {
    background: #171d1f;
    border-color: var(--line);
    padding: var(--fetch-gutter);
}

.desktop-window, #desktop-detail {
    border-color: var(--line);
    box-shadow: none;
}

#month-toggle {
    color: #f5f5f7;
    font-size: var(--fetch-heading);
    font-weight: 700;
    letter-spacing: 0;
    gap: calc(8 * var(--fetch-unit));
}

.month-chevron {
    width: calc(20 * var(--fetch-unit));
    height: calc(20 * var(--fetch-unit));
    color: #aaaeb2;
}

.month-chevron:after {
    width: 100%;
    height: 100%;
    border: 0;
    background: currentColor;
    mask: url('/assets/icons/chevron-right.svg') center / 50% 75% no-repeat;
    transform: rotate(90deg);
    transition: transform .2s ease;
}

#month-toggle[aria-expanded="true"] .month-chevron:after {
    transform: rotate(-90deg);
}

.month-tile, .month-tile.active {
    border: 0;
    border-radius: var(--fetch-radius);
    box-shadow: none;
    background: var(--blue);
    color: white;
    min-height: var(--fetch-control);
    padding: calc(16 * var(--fetch-unit));
}

.more-button, .more-button.has-avatar {
    width: 44px;
    height: 44px;
    background: #171d1f;
    border: 0;
    color: #aaaeb2;
    font-size: 0;
    display: grid;
    place-items: center;
}

.more-button:not(.has-avatar):after {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url('/assets/icons/more.svg') center / contain no-repeat;
}

.balance {
    font-size: calc(44 * var(--fetch-unit));
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0;
    margin: calc(20 * var(--fetch-unit)) 0;
    overflow-wrap: anywhere;
}

.spent-label {
    font-size: var(--fetch-title);
    font-weight: 400;
    color: var(--secondary);
}

.progress, .split-progress {
    height: calc(12 * var(--fetch-unit));
    background: #292e30;
}

.split-progress .expense-segment {
    background: var(--blue);
}

.split-progress .income-segment {
    background: #12a889;
}

.balance-caption {
    color: var(--secondary);
    font-size: var(--fetch-description);
    gap: 12px;
    flex-wrap: wrap;
    margin-top: calc(12 * var(--fetch-unit));
}

.balance-caption strong {
    color: #f5f5f7;
    font-weight: 500;
}

#summary {
    margin-bottom: calc(24 * var(--fetch-unit));
}

.reminder-item {
    gap: calc(14 * var(--fetch-unit));
    min-height: calc(88 * var(--fetch-unit));
}

.reminder-item .item-open {
    padding-block: calc(16 * var(--fetch-unit));
    border-color: var(--line);
    gap: 12px;
}

.reminder-item .item-open strong {
    font-size: var(--fetch-title);
    font-weight: 500;
    color: #f5f5f7;
    line-height: 1.3;
}

.reminder-item .item-amount {
    color: var(--secondary);
    font-size: var(--fetch-description);
    font-weight: 400;
    line-height: 1.4;
}

.reminder-item time {
    font-variant-numeric: normal;
    font-size: var(--fetch-title);
    color: #aaaeb2;
    font-weight: 700;
}

.is-paid .item-open strong, .is-paid time {
    color: #969AAA;
}

.check {
    width: 28px;
    height: 28px;
    border: 2px solid #A1A4A7;
    font-size: 0;
    display: grid;
    place-items: center;
}

.check.paid {
    background: var(--blue);
    border: 0;
    color: white;
    font-size: 16px;
    line-height: 1;
}

.check.paid:after {
    content: none;
}

#fab, #desktop-add {
    background: var(--blue);
    color: white;
    box-shadow: 0 3px 8px #0002;
    font-size: 0;
    display: grid;
    place-items: center;
    padding: 0;
}

#fab:after, #desktop-add:after {
    content: '';
    width: 24px;
    height: 24px;
    background: currentColor;
    mask: url('/assets/icons/add.svg') center / contain no-repeat;
}

#fab {
    width: 60px;
    height: 60px;
}

input, textarea, select, #edit-scope {
    border: 1px solid var(--line);
    border-radius: calc(16 * var(--fetch-unit));
    background: #0c1010;
    color: #f5f5f7;
    font-size: var(--fetch-body);
    line-height: 1.4;
    min-height: var(--fetch-control);
    padding: calc(14 * var(--fetch-unit)) calc(18 * var(--fetch-unit));
}

input::placeholder, textarea::placeholder {
    color: #A1A4A7;
}

#desktop-search, #search-bar input {
    background: #171d1f url('/assets/icons/search.svg') 18px center / 20px no-repeat;
    padding-left: 48px;
    border: 0;
    border-radius: 999px;
    color: #f5f5f7;
    font-size: var(--fetch-description);
}

#desktop-search {
    min-height: 44px;
}

.primary, .danger, body.signed-out #signin, body.signed-out #signin-same-tab {
    min-height: var(--fetch-control);
    border: 0;
    border-radius: 999px;
    padding: calc(14 * var(--fetch-unit)) var(--fetch-gutter);
    background: var(--blue);
    color: white;
    font-size: var(--fetch-body);
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    box-shadow: 0 3px 8px #0002;
    transition: translate .2s ease, box-shadow .2s ease;
}

.primary:active, .danger:active, #signin:active, #fab:active, #desktop-add:active {
    translate: 0 1px;
    box-shadow: none;
}

button:disabled {
    opacity: .55;
}

.danger {
    background: #321b20;
    color: #EB5858;
    box-shadow: none;
}

.quiet, .save, #search-cancel, .repeats-row b {
    color: var(--blue);
    font-weight: 700;
    font-size: var(--fetch-body);
}

.dialog-head button {
    min-height: 44px;
}

.dialog-head h2 {
    font-size: var(--fetch-title);
    font-weight: 700;
}

/* Stack retains native dialog behavior; surfaces share FETCH's sheet language. */
dialog {
    color: #f5f5f7;
    background: #0c1010;
    border: 1px solid var(--line);
    border-radius: min(8vw, 2.4rem);
    padding: calc(26.4 * var(--fetch-unit));
    box-shadow: 0 16px 64px #0002;
}

dialog::backdrop {
    background: #0006;
    backdrop-filter: blur(3px);
}

#editor label {
    color: #aaaeb2;
    font-size: var(--fetch-description);
    font-weight: 500;
    margin-bottom: calc(24 * var(--fetch-unit));
}

#editor input:not([type=checkbox]):not([type=radio]), #editor textarea, #editor select {
    color: #f5f5f7;
    font-weight: 500;
}

.amount-input, .category-input {
    border: 1px solid var(--line);
    background: #0c1010;
    border-radius: calc(16 * var(--fetch-unit));
    color: #aaaeb2;
    min-height: var(--fetch-control);
}

.amount-input #amount, .category-input select {
    background: transparent;
    border: 0;
}

.segmented {
    background: #171d1f;
    border: 0;
    border-radius: 999px;
    padding: 4px;
    min-height: var(--fetch-control);
}

#editor .segmented label {
    margin: 0;
}

.segmented span {
    color: #aaaeb2;
    border-radius: 999px;
    font-weight: 700;
    padding: 12px;
}

.segmented input:checked + span {
    background: var(--blue);
    color: white;
    box-shadow: 0 3px 8px #0002;
}

.segmented input[value=income]:checked + span {
    background: #12a889;
}

.switch-row input[type=checkbox] {
    min-height: 0;
    background: #343839;
    border: 0;
    padding: 0;
}

.switch-row input[type=checkbox]:checked {
    background: var(--blue);
}

#editor .calendar-option {
    color: #f5f5f7;
    min-height: 44px;
}

#editor .calendar-option input {
    min-height: 0;
}

.cat-icon {
    background: #142a3b;
    color: var(--blue);
    box-shadow: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
}

.cat-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.detail-hero .cat-icon {
    width: 88px;
    height: 88px;
}

.detail-hero .cat-icon img {
    width: 44px;
    height: 44px;
}

.detail-hero h2, .detail-empty h2, .empty h3 {
    font-size: var(--fetch-sheet);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    color: #f5f5f7;
}

.detail-hero strong {
    font-size: var(--fetch-sheet);
}

.detail-row {
    background: #171d1f;
    border-color: var(--line);
    padding: 18px;
    font-size: var(--fetch-description);
    color: #aaaeb2;
}

.detail-row span {
    color: #f5f5f7;
}

.detail-row:has(+.detail-row) {
    border-radius: 0;
}

.detail-notes, .muted, .empty p, .detail-empty p {
    color: var(--secondary);
    font-size: var(--fetch-description);
    line-height: 1.4;
}

.empty-box {
    width: 132px;
    height: 140px;
}

#month-picker #month-options button, #month-picker #year-options button {
    color: #f5f5f7;
    font-weight: 700;
    letter-spacing: 0;
}

#month-picker #month-options button.selected, #month-picker #year-options button.selected {
    color: var(--blue);
}

.popover {
    background: #0c1010;
    border: 1px solid var(--line);
    border-radius: var(--fetch-radius);
    box-shadow: 0 8px 32px #0002;
    color: #f5f5f7;
}

.options button, #sync {
    border-color: var(--line);
    padding: 16px 18px;
    font-size: var(--fetch-body);
}

#sync {
    color: var(--secondary);
    font-size: var(--fetch-description);
}

.search-result {
    color: #f5f5f7;
    border-color: var(--line);
    gap: 14px;
    padding-block: 16px;
}

.search-result small {
    color: var(--secondary);
}

.error, #form-error {
    color: var(--red);
    font-style: normal;
    font-size: var(--fetch-description);
}

#calendar-sync-banner {
    border-radius: var(--fetch-radius);
    background: #302718;
    padding: var(--fetch-gutter);
}

#calendar-sync-banner p {
    color: #f0c77b;
    font-size: var(--fetch-description);
}

#toast {
    background: #13342d;
    color: #7ddbc5;
    border: 1px solid #12a889;
    border-radius: var(--fetch-radius);
    box-shadow: 0 3px 8px #0002;
    font-size: var(--fetch-description);
}

body.signed-out, body.signed-out #auth-banner {
    background: #0c1010;
    color: #f5f5f7;
}

.welcome-description {
    font-size: 44px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0;
}

body.signed-out #auth-banner > p:first-of-type {
    color: var(--secondary);
    font-size: 18px;
}

body.signed-out #auth-error, #auth-banner.signin-failed #auth-error {
    color: var(--red);
}

.welcome-powered {
    color: var(--secondary);
    font-size: 13px;
}

.fetch-wordmark {
    width: 64px;
    height: 24px;
    object-fit: contain;
}

html[data-keyboard-focus] :is(button,input,select,textarea,summary,a):focus-visible {
    outline-color: #aaaeb2;
}

@media (max-width: 600px) {
    #month-toggle {
        font-size: calc(28 * var(--fetch-unit));
    }

    dialog {
        max-height: calc(100dvh - 24px - env(safe-area-inset-top));
        width: calc(100% - 20px);
        padding: calc(22 * var(--fetch-unit));
    }
}

@media (min-width: 900px) {
    .budget-app {
        padding: 30px 30px 20px;
    }

    #desktop-sidebar {
        padding: 22px 16px;
    }
}

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

.dialog-head {
    background: #0c1010;
    border-color: var(--line);
}

.category-input:after {
    content: '';
    width: 16px;
    height: 20px;
    background: #aaaeb2;
    mask: url('/assets/icons/chevron-right.svg') center / 50% 75% no-repeat;
}

input[type=date]::-webkit-calendar-picker-indicator {
    background: url('/assets/icons/calendar.svg') center / contain no-repeat;
    width: 20px;
    height: 20px;
}

@media (min-width: 900px) {
    #fab {
        display: none;
    }
}

.back-icon {
    width: 16px;
    height: 20px;
    vertical-align: middle;
    margin-right: 6px;
}

#account-dialog [data-close]:before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
    background: currentColor;
    mask: url('/assets/icons/account.svg') center / contain no-repeat;
}

#account-dialog [data-close]:before {
    mask-image: url('/assets/icons/close.svg');
    width: 16px;
    height: 16px;
}

/* Same gradient-ring primitive and cadence as FETCH's fetch-spinwheel. */
body.auth-pending:before {
    content: '';
    position: fixed;
    inset: calc(50% - 13px) auto auto calc(50% - 13px);
    width: 26px;
    height: 26px;
    background: url('/assets/icons/spinner.svg') center / contain no-repeat;
    animation: stack-spinwheel .5s linear infinite;
}

@keyframes stack-spinwheel {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-pending:before {
        animation: none;
    }
}

/* Stack's established dark theme is authoritative; FETCH supplies component details. */
body, .desktop-window {
    background: #000;
}

.budget-app {
    background: radial-gradient(ellipse at 70% 25%, #0c1010 0%, #050707 38%, #000 80%);
}

.cat-icon img, .back-icon {
    filter: brightness(0) invert(1);
}

.fetch-wordmark {
    filter: brightness(0) invert(1);
}

input[type=date]::-webkit-calendar-picker-indicator {
    filter: brightness(0) invert(1);
}

/* Keep icon artwork centered independently of the legacy text node. */
.more-button, #desktop-add {
    position: relative;
}

.more-button:not(.has-avatar):after, #fab:after, #desktop-add:after {
    position: absolute;
    inset: 0;
    margin: auto;
}

.month-chevron {
    color: var(--blue);
}

.reminder-item:not(.is-paid) time.due-upcoming {
    color: #fff;
}

#more-menu > button {
    border: 0;
}

#more-menu > #sync {
    border-top: 1px solid var(--line);
}

#editor .dialog-head {
    background: transparent;
}

#editor .segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 4px;
}

#editor .segmented label {
    display: flex;
    min-width: 0;
}

#editor .segmented span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: calc(var(--fetch-control) - 8px);
    padding: 0 12px;
}

/* Preserve Stack's original welcome sign-in button treatment. */
body.signed-out #signin {
    background: #f5f5f7;
    color: #111;
    border-radius: 999px;
    padding: 15px 30px;
    width: auto;
    min-width: 220px;
    min-height: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    text-transform: none;
    box-shadow: none;
}

body.signed-out #auth-error {
    font-size: var(--fetch-description);
    max-width: 260px;
    width: 100%;
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#calculator { width: 38px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 12px; color: var(--secondary); }
#calculator:after { content: ''; width: 22px; height: 26px; background: currentColor; mask: url('/assets/icons/calculator.svg') center / contain no-repeat; }
#calculator[aria-pressed=true] { color: var(--blue); background: #142a3b; }
#calculator-total { position: fixed; z-index: 5; bottom: 0; left: 0; padding: 18px 24px max(24px, env(safe-area-inset-bottom)); background: #050707; border-radius: 0 18px 0 0; pointer-events: none; }
#calculator-total > span { font-size: 12px; color: var(--secondary); font-weight: 700; }
#calculator-total strong { font-size: 28px; font-weight: 700; }
#calculator-total small { font-size: 13px; color: var(--secondary); margin-left: 6px; }
@media (min-width: 900px) { #calculator-total { left: 254px; } }
@media (max-width: 380px) { .header-actions { gap: 2px; } #calculator { width: 30px; } }

/* A quiet calculator action on both layouts; the plus floats in the list panel. */
#calculator, #calculator[aria-pressed=true] {
    color: #fff;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: .8;
}
#calculator[aria-pressed=true] { opacity: 1; }
#desktop-add { display: none; }
@media (min-width: 900px) {
    #desktop-add {
        display: grid;
        position: absolute;
        width: 60px;
        height: 60px;
        bottom: 27px;
        right: calc(50% + 30px);
        z-index: 5;
        background: var(--blue);
        padding: 0;
    }
    .budget-column { padding-bottom: 88px; }
}

/* The calculator footer spans the viewport beneath floating add controls. */
#calculator-total {
    left: 0;
    right: 0;
    width: 100%;
    background: #000;
    border-radius: 0;
    z-index: 4;
}

#fab, #desktop-add {
    z-index: 6;
    box-shadow: 0 6px 20px #0009, 0 2px 6px #0006;
}

@media (min-width: 900px) {
    #calculator-total {
        padding-left: 284px;
    }
}

body.calculating .reminder-item time,
body.calculating .reminder-item:not(.is-paid) time.due-upcoming {
    color: var(--secondary);
}

body.calculating #fab,
body.calculating #desktop-add {
    display: none;
}

#calculator[aria-pressed=false] {
    opacity: .65;
}

/* Reserve a footer row so calculation totals never cover scrolling entries. */
body.calculating #calculator-total {
    position: static;
    width: 100%;
    background: transparent;
    padding: 18px 0 max(18px, env(safe-area-inset-bottom));
    pointer-events: auto;
}

@media (min-width: 900px) {
    body.calculating .budget-app {
        grid-template-rows: 54px auto minmax(0, 1fr) auto;
    }
    body.calculating #calculator-total {
        grid-column: 1 / -1;
        grid-row: 4;
    }
    body.calculating .budget-column {
        padding-bottom: 0;
    }
}

@media (max-width: 899px) {
    body.calculating .budget-app {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        padding-bottom: 0;
    }
    body.calculating .budget-header,
    body.calculating #calculator-total,
    body.calculating #calendar-sync-banner,
    body.calculating #search-bar {
        flex-shrink: 0;
    }
    body.calculating .budget-column {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
}

/* Desktop add returns to the header, immediately after the calculator. */
@media (min-width: 900px) {
    #desktop-add {
        position: relative;
        inset: auto;
        width: 43px;
        height: 43px;
    }
}

/* Desktop calculator belongs to the budget list rather than the global toolbar. */
@media (min-width: 900px) {
    .budget-column > #calculator {
        position: absolute;
        top: 20px;
        right: 6px;
        z-index: 2;
    }
    .budget-column .balance {
        padding-right: 50px;
    }
    .picking-month .budget-column > #calculator {
        display: none;
    }
}