/* =========================================================
   FOLLOWMYTRAVELS — DAILY EXPENSES
   ========================================================= */


/* =========================================================
   MAIN SECTION
   ========================================================= */

.day-expenses {
    position: relative;

    margin-top: 18px;
    padding: 29px;

    overflow: visible;

    border-radius: var(--radius-large);

    background: var(--color-surface);

    box-shadow:
        0 8px 24px
        rgba(43, 45, 66, .025);
}


/* =========================================================
   SECTION HEADER
   ========================================================= */

.day-expenses__header {
    padding-bottom: 21px;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 8%,
            transparent
        );

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 28px;
}


.day-expenses__header h2 {
    margin: 5px 0 0;

    color: var(--text-primary);

    font-size: 28px;
    font-weight: 800;

    letter-spacing: -1px;
}


.day-expenses__header p {
    max-width: 520px;

    margin: 8px 0 0;

    color: var(--text-secondary);

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   TOTAL SUMMARY
   ========================================================= */

.day-expenses__summary {
    min-width: 155px;

    padding: 16px 18px;

    border-radius: var(--radius-medium);

    background: var(--color-white);

    text-align: right;

    box-shadow:
        0 5px 18px
        rgba(43, 45, 66, .035);
}


.day-expenses__summary > span {
    display: block;

    color: var(--text-secondary);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.2px;
}


.day-expenses__summary strong {
    display: block;

    margin-top: 5px;

    color: var(--text-primary);

    font-family: var(--font-editorial);

    font-size: 27px;
    font-weight: 600;
}


.day-expenses__summary small {
    display: block;

    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 10px;
}


/* =========================================================
   CATEGORY TOTALS
   ========================================================= */

.day-expenses__breakdown {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}


.day-expenses__breakdown-item {
    min-height: 38px;

    padding:
        5px
        11px
        5px
        6px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 7%,
            transparent
        );

    border-radius: 999px;

    background: var(--color-white);

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 700;
}


.day-expenses__breakdown-item strong {
    margin-left: 3px;

    color: var(--text-primary);

    font-size: 11px;
    font-weight: 800;
}


.day-expenses__breakdown-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--color-aqua) 45%,
            var(--color-white)
        );

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.day-expenses__breakdown-icon svg {
    width: 14px;
    height: 14px;
}


/* =========================================================
   EXPENSE GRID
   ========================================================= */

.day-expenses__grid {
    position: relative;

    margin-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}


/* =========================================================
   ADD EXPENSE CARD
   ========================================================= */

.expense-add-card {
    position: relative;

    min-height: 150px;

    padding: 22px;

    border:
        1px dashed
        color-mix(
            in srgb,
            var(--color-dark) 18%,
            transparent
        );

    border-radius: 18px;

    background:
        color-mix(
            in srgb,
            var(--color-white) 75%,
            var(--color-aqua)
        );

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 16px;

    color: var(--text-primary);

    font-family: var(--font-primary);

    text-align: left;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.expense-add-card:hover {
    transform: translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--color-dark) 30%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--color-white) 63%,
            var(--color-aqua)
        );

    box-shadow: var(--shadow-soft);
}


.expense-add-card.is-active {
    border-color:
        color-mix(
            in srgb,
            var(--color-dark) 30%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--color-white) 58%,
            var(--color-aqua)
        );
}


.expense-add-card__plus {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    border-radius: 50%;

    background: var(--color-yellow);

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text-primary);

    font-size: 25px;
    font-weight: 700;

    box-shadow:
        0 0 0 9px
        rgba(255, 255, 255, .42);
}


.expense-add-card__copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


.expense-add-card__copy strong {
    color: var(--text-primary);

    font-size: 17px;
    font-weight: 800;
}


.expense-add-card__copy small {
    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 500;

    line-height: 1.45;
}


.expense-add-card__arrow {
    color: var(--text-primary);

    font-size: 14px;
    font-weight: 800;
}


/* =========================================================
   PAGE BACKDROP
   Created by expenses.js
   ========================================================= */

.expense-popover-backdrop {
    position: fixed;

    inset: 0;

    z-index: 9998;

    background:
        rgba(33, 38, 58, .16);

    backdrop-filter:
        blur(7px)
        saturate(90%);

    -webkit-backdrop-filter:
        blur(7px)
        saturate(90%);

    opacity: 0;

    transition:
        opacity .2s ease;

    cursor: default;
}


.expense-popover-backdrop.is-visible {
    opacity: 1;
}


/* =========================================================
   LOCK BACKGROUND PAGE
   ========================================================= */

body.expense-popover-open {
    overflow: hidden;
}


/* =========================================================
   FLOATING EXPENSE CARD
   ========================================================= */

.expense-entry-card {
    position: fixed;

    top: 50%;
    left: 50%;

    z-index: 9999;

    width:
        min(
            980px,
            calc(100vw - 80px)
        );

    padding: 25px 27px 24px;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255, 255, 255, .72);

    border-radius: 24px;

    background:
        color-mix(
            in srgb,
            var(--color-white) 91%,
            transparent
        );

    backdrop-filter:
        blur(24px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(135%);

    transform:
        translate(-50%, -50%)
        scale(.965);

    opacity: 0;

    box-shadow:
        0 32px 90px
        rgba(29, 34, 53, .22),
        0 8px 30px
        rgba(29, 34, 53, .10),
        inset 0 1px 0
        rgba(255, 255, 255, .85);

    transition:
        opacity .2s ease,
        transform .22s
        cubic-bezier(
            .2,
            .75,
            .25,
            1
        );
}


.expense-entry-card.is-visible {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


.expense-entry-card[hidden] {
    display: none;
}


/* subtle premium highlight */

.expense-entry-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 28px;
    right: 28px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .95),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   POPOVER HEADER
   ========================================================= */

.expense-entry-card__heading {
    padding-bottom: 17px;

    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 8%,
            transparent
        );

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 22px;
}


.expense-entry-card
.travelday-eyebrow {
    font-size: 10px;

    letter-spacing: 1.5px;
}


.expense-entry-card__heading h3 {
    margin: 5px 0 0;

    color: var(--text-primary);

    font-size: 25px;
    font-weight: 800;

    line-height: 1.15;

    letter-spacing: -.8px;
}


.expense-entry-card__heading p {
    margin: 7px 0 0;

    color: var(--text-secondary);

    font-size: 12px;

    line-height: 1.5;
}


.expense-entry-card__close {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    padding: 0;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 7%,
            transparent
        );

    border-radius: 50%;

    background:
        rgba(240, 247, 248, .8);

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--text-primary);

    font-family: var(--font-primary);

    font-size: 22px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.expense-entry-card__close:hover {
    transform: rotate(4deg) scale(1.06);

    background:
        var(--color-white);

    box-shadow:
        0 5px 15px
        rgba(43, 45, 66, .08);
}


/* =========================================================
   FORM
   ========================================================= */

.expense-form {
    margin-top: 18px;
}


.expense-form__errors {
    margin-bottom: 16px;

    padding: 11px 13px;

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            #e74c3c 8%,
            var(--color-white)
        );

    color: #9e3025;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.5;
}


.expense-form__errors ul,
.expense-field-error ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.expense-form__label-row {
    margin-bottom: 9px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.expense-form__label-row label,
.expense-form__field > span,
.expense-form__mini-title {
    color: var(--text-primary);

    font-size: 12px;
    font-weight: 800;

    line-height: 1.4;
}


.expense-form__label-row label span,
.expense-form__field > span em,
.expense-form__mini-title em {
    margin-left: 3px;

    color: var(--text-secondary);

    font-size: 10px;

    font-style: normal;
    font-weight: 500;
}


.expense-category-clear {
    padding: 4px 0;

    border: 0;

    background: transparent;

    color: var(--text-secondary);

    font-family: var(--font-primary);

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        color .18s ease;
}


.expense-category-clear:hover {
    color: var(--text-primary);
}


/* =========================================================
   CATEGORIES
   ========================================================= */

.expense-category-grid {
    display: grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    gap: 8px;
}


.expense-category-option {
    position: relative;

    min-height: 80px;

    padding: 9px 7px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 8%,
            transparent
        );

    border-radius: 14px;

    background:
        rgba(239, 247, 248, .76);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    color: var(--text-secondary);

    font-size: 9.5px;
    font-weight: 700;

    line-height: 1.25;

    text-align: center;

    cursor: pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.expense-category-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.expense-category-option:hover {
    transform: translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--color-dark) 18%,
            transparent
        );
}


.expense-category-option.is-selected {
    transform: translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--color-aqua) 75%,
            var(--color-dark)
        );

    background:
        color-mix(
            in srgb,
            var(--color-aqua) 33%,
            var(--color-white)
        );

    color: var(--text-primary);

    box-shadow:
        0 7px 17px
        rgba(43, 45, 66, .055);
}


.expense-category-option__icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .9);

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 3px 10px
        rgba(43, 45, 66, .035);
}


.expense-category-option__icon svg {
    width: 17px;
    height: 17px;
}


/* =========================================================
   MAIN FIELDS
   ========================================================= */

.expense-form__row {
    margin-top: 15px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        190px;

    gap: 13px;
}


.expense-form__field {
    display: block;

    margin-top: 13px;
}


.expense-form__row
.expense-form__field {
    margin-top: 0;
}


.expense-control {
    width: 100%;

    min-height: 47px;

    margin-top: 7px;

    padding: 0 14px;

    box-sizing: border-box;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 11%,
            transparent
        );

    border-radius: 11px;

    background:
        rgba(248, 251, 251, .9);

    color: var(--text-primary);

    font-family: var(--font-primary);

    font-size: 13px;
    font-weight: 500;

    outline: none;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.expense-control::placeholder {
    color:
        color-mix(
            in srgb,
            var(--text-secondary) 70%,
            transparent
        );
}


.expense-control:hover {
    border-color:
        color-mix(
            in srgb,
            var(--color-dark) 18%,
            transparent
        );
}


.expense-control:focus {
    border-color:
        color-mix(
            in srgb,
            var(--color-aqua) 70%,
            var(--color-dark)
        );

    background: var(--color-white);

    box-shadow:
        0 0 0 4px
        color-mix(
            in srgb,
            var(--color-aqua) 22%,
            transparent
        );
}


.expense-control--textarea {
    min-height: 82px;

    padding-top: 12px;
    padding-bottom: 12px;

    line-height: 1.5;

    resize: vertical;
}


.expense-field-error {
    display: block;

    margin-top: 6px;

    color: #a5382d;

    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   AMOUNT
   ========================================================= */

.expense-amount-control {
    position: relative;

    display: block;
}


.expense-amount-control b {
    position: absolute;

    left: 14px;
    top: 50%;

    z-index: 2;

    transform: translateY(-50%);

    color: var(--text-primary);

    font-family: var(--font-editorial);

    font-size: 17px;
    font-weight: 600;

    pointer-events: none;
}


.expense-amount-control
.expense-control {
    padding-left: 33px;
}


/* =========================================================
   PHOTO + RATING
   ========================================================= */

.expense-form__extras {
    margin-top: 15px;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.expense-photo-field,
.expense-rating-field {
    min-width: 0;

    padding: 16px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 5%,
            transparent
        );

    border-radius: 15px;

    background:
        rgba(237, 246, 247, .78);
}


.expense-photo-field p,
.expense-rating-field > p {
    margin: 5px 0 0;

    color: var(--text-secondary);

    font-size: 10px;

    line-height: 1.45;
}


/* =========================================================
   PHOTO
   ========================================================= */

.expense-photo-field__input {
    margin-top: 10px;
}


.expense-control--file {
    min-height: auto;

    margin: 0;

    padding: 8px;

    background:
        rgba(255, 255, 255, .9);

    font-size: 10px;
}


.expense-control--file::file-selector-button {
    margin-right: 9px;

    padding: 8px 12px;

    border: 0;
    border-radius: 8px;

    background: var(--color-dark);

    color: var(--text-light);

    font-family: var(--font-primary);

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}


.expense-photo-field__input > span {
    display: block;

    margin-top: 7px;

    color: var(--text-secondary);

    font-size: 10px;

    line-height: 1.4;

    word-break: break-word;
}


/* =========================================================
   RATING
   ========================================================= */

.expense-rating-stars {
    margin-top: 10px;

    display: flex;

    gap: 7px;
}


.expense-rating-star {
    position: relative;

    width: 43px;
    height: 43px;

    flex: 0 0 43px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 9%,
            transparent
        );

    border-radius: 11px;

    background:
        rgba(255, 255, 255, .92);

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        color-mix(
            in srgb,
            var(--color-dark) 18%,
            var(--color-white)
        );

    cursor: pointer;

    transition:
        transform .18s ease,
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}


.expense-rating-star input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.expense-rating-star span {
    font-size: 22px;

    line-height: 1;
}


.expense-rating-star:hover,
.expense-rating-star.is-selected {
    transform: translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--color-yellow) 70%,
            var(--color-dark)
        );

    background: var(--color-yellow);

    color: var(--text-primary);

    box-shadow:
        0 6px 15px
        rgba(43, 45, 66, .07);
}


.expense-rating-meaning {
    margin-top: 8px;

    color: var(--text-primary);

    font-size: 10.5px;
    font-weight: 800;

    line-height: 1.4;
}


.expense-rating-scale {
    margin-top: 7px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    color: var(--text-secondary);

    font-size: 9px;

    line-height: 1.35;
}


.expense-rating-scale b {
    color: var(--text-primary);

    font-weight: 800;
}


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.expense-form__actions {
    margin-top: 16px;

    padding-top: 15px;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 8%,
            transparent
        );

    display: flex;
    justify-content: flex-end;

    gap: 9px;
}


.expense-form__cancel,
.expense-form__submit {
    min-height: 42px;

    padding: 0 16px;

    border-radius: 10px;

    font-family: var(--font-primary);

    font-size: 11px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.expense-form__cancel {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 11%,
            transparent
        );

    background:
        rgba(255, 255, 255, .8);

    color: var(--text-primary);
}


.expense-form__submit {
    border: 0;

    background: var(--color-dark);

    color: var(--text-light);
}


.expense-form__cancel:hover,
.expense-form__submit:hover {
    transform: translateY(-1px);
}


.expense-form__submit:hover {
    box-shadow:
        0 8px 20px
        rgba(43, 45, 66, .15);
}


/* =========================================================
   SAVED EXPENSE CARD
   ========================================================= */

.expense-card {
    min-width: 0;

    padding: 19px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 8%,
            transparent
        );

    border-radius: 18px;

    background: var(--color-white);

    box-shadow:
        0 7px 20px
        rgba(43, 45, 66, .025);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.expense-card:hover {
    transform: translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--color-dark) 14%,
            transparent
        );

    box-shadow:
        0 12px 28px
        rgba(43, 45, 66, .055);
}


.expense-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;
}


.expense-card__category {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;

    color: var(--text-secondary);

    font-size: 10px;
    font-weight: 750;
}


.expense-card__category-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--color-aqua) 42%,
            var(--color-white)
        );

    display: flex;
    align-items: center;
    justify-content: center;
}


.expense-card__category-icon svg {
    width: 16px;
    height: 16px;
}


.expense-card__amount {
    color: var(--text-primary);

    font-family: var(--font-editorial);

    font-size: 23px;
    font-weight: 600;

    white-space: nowrap;
}


.expense-card__body {
    margin-top: 17px;

    padding-top: 16px;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 7%,
            transparent
        );
}


.expense-card__body--with-photo {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        100px;

    gap: 15px;
}


.expense-card h3 {
    margin: 0;

    color: var(--text-primary);

    font-size: 16px;
    font-weight: 800;

    letter-spacing: -.3px;
}


.expense-card p {
    margin: 8px 0 0;

    color: var(--text-secondary);

    font-size: 11px;

    line-height: 1.6;
}


.expense-card__rating {
    margin-top: 13px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 9px;
}


.expense-card__rating > span {
    display: flex;

    gap: 2px;
}


.expense-card__rating b {
    color:
        color-mix(
            in srgb,
            var(--color-dark) 18%,
            var(--color-white)
        );

    font-size: 15px;

    line-height: 1;
}


.expense-card__rating b.is-active {
    color: var(--color-yellow);
}


.expense-card__rating small {
    color: var(--text-secondary);

    font-size: 9px;
    font-weight: 700;
}


.expense-card__photo {
    width: 100px;
    height: 100px;

    border-radius: 13px;

    overflow: hidden;

    background: var(--color-surface);

    transition:
        transform .2s ease;
}


.expense-card__photo:hover {
    transform: scale(1.025);
}


.expense-card__photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* =========================================================
   LOWER HEIGHT DESKTOPS
   Only here allow emergency internal scrolling.
   Normal desktop screens have no inner scrollbar.
   ========================================================= */

@media (max-height: 760px) and (min-width: 701px) {

    .expense-entry-card {
        max-height:
            calc(100dvh - 34px);

        overflow-y: auto;

        overscroll-behavior: contain;

        scrollbar-width: thin;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .expense-entry-card {
        width:
            min(
                920px,
                calc(100vw - 44px)
            );
    }


    .expense-category-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }


    .expense-category-option {
        min-height: 75px;
    }


    .expense-form__extras {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   MOBILE / SMALL TABLET
   ========================================================= */

@media (max-width: 700px) {

    .day-expenses {
        padding: 20px;

        border-radius: 22px;
    }


    .day-expenses__header {
        flex-direction: column;

        gap: 16px;
    }


    .day-expenses__header h2 {
        font-size: 25px;
    }


    .day-expenses__summary {
        width: 100%;
        min-width: 0;

        box-sizing: border-box;

        text-align: left;
    }


    .day-expenses__grid {
        grid-template-columns: 1fr;
    }


    .expense-add-card {
        min-height: 130px;
    }


    .expense-entry-card {
        width:
            calc(100vw - 24px);

        max-height:
            calc(100dvh - 24px);

        padding: 21px;

        border-radius: 20px;

        overflow-y: auto;

        overscroll-behavior: contain;

        scrollbar-width: thin;
    }


    .expense-entry-card__heading h3 {
        font-size: 23px;
    }


    .expense-category-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }


    .expense-category-option {
        min-height: 80px;
    }


    .expense-form__row {
        grid-template-columns: 1fr;
    }


    .expense-form__extras {
        grid-template-columns: 1fr;
    }


    .expense-card__body--with-photo {
        grid-template-columns:
            minmax(0, 1fr)
            88px;
    }


    .expense-card__photo {
        width: 88px;
        height: 88px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 460px) {

    .day-expenses {
        padding: 17px;
    }


    .expense-add-card {
        min-height: 120px;

        padding: 18px;

        grid-template-columns:
            auto
            minmax(0, 1fr);
    }


    .expense-add-card__arrow {
        display: none;
    }


    .expense-add-card__plus {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        font-size: 22px;
    }


    .expense-entry-card {
        width:
            calc(100vw - 16px);

        max-height:
            calc(100dvh - 16px);

        padding: 18px;

        border-radius: 18px;
    }


    .expense-entry-card__heading {
        gap: 12px;
    }


    .expense-entry-card__heading h3 {
        font-size: 21px;
    }


    .expense-category-grid {
        gap: 7px;
    }


    .expense-form__actions {
        display: grid;

        grid-template-columns:
            1fr
            1fr;
    }


    .expense-form__cancel,
    .expense-form__submit {
        width: 100%;
    }


    .expense-card__title-row {
        gap: 8px;
    }


    .expense-card__sharing {
        gap: 4px;
    }


    .expense-share-chip {
        min-height: 22px;

        padding: 0 7px;

        font-size: 7px;
    }

}



/* =========================================================
   EXPENSE EDIT / DAY PICKER
   ========================================================= */

.expense-day-field {
    margin-bottom: 16px;
    padding: 13px 14px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 7%,
            transparent
        );

    border-radius: 14px;

    background:
        color-mix(
            in srgb,
            var(--color-aqua) 13%,
            var(--color-white)
        );

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(230px, .72fr);

    align-items: center;

    gap: 18px;
}


.expense-day-field__copy small {
    display: block;

    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 10px;

    line-height: 1.45;
}


.expense-day-field__select .expense-control {
    margin-top: 0;

    background: var(--color-white);

    font-weight: 700;
}


/* =========================================================
   EDIT BUTTON
   ========================================================= */

.expense-card__top-right {
    display: flex;
    align-items: center;

    gap: 11px;
}


.expense-card__edit {
    min-height: 30px;

    padding: 0 10px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 9%,
            transparent
        );

    border-radius: 999px;

    background: var(--color-surface);

    color: var(--text-secondary);

    font-family: var(--font-primary);

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;

    transition:
        .18s ease;
}


.expense-card__edit:hover {
    transform: translateY(-1px);

    background:
        color-mix(
            in srgb,
            var(--color-aqua) 25%,
            var(--color-white)
        );

    color: var(--text-primary);
}


/* =========================================================
   DELETE
   ========================================================= */

.expense-form__actions-spacer {
    flex: 1 1 auto;
}


.expense-form__delete {
    min-height: 42px;

    padding: 0 14px;

    border:
        1px solid
        rgba(177, 60, 52, .17);

    border-radius: 10px;

    background:
        rgba(177, 60, 52, .055);

    color: #9d3c35;

    font-family: var(--font-primary);

    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}


.expense-form__delete[hidden] {
    display: none;
}


.expense-delete-confirmation {
    margin-top: 14px;
    padding: 14px 15px;

    border:
        1px solid
        rgba(177, 60, 52, .14);

    border-radius: 13px;

    background:
        rgba(177, 60, 52, .055);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


.expense-delete-confirmation[hidden] {
    display: none;
}


.expense-delete-confirmation strong {
    display: block;

    color: var(--text-primary);

    font-size: 11px;
    font-weight: 800;
}


.expense-delete-confirmation p {
    margin: 4px 0 0;

    color: var(--text-secondary);

    font-size: 9.5px;

    line-height: 1.45;
}


.expense-delete-confirmation__actions {
    display: flex;
    align-items: center;

    gap: 8px;
}


.expense-delete-confirmation__actions form {
    margin: 0;
}


.expense-delete-confirmation__cancel,
.expense-delete-confirmation__submit {
    min-height: 38px;

    padding: 0 12px;

    border-radius: 9px;

    font-family: var(--font-primary);

    font-size: 9px;
    font-weight: 800;

    cursor: pointer;
}


.expense-delete-confirmation__cancel {
    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 9%,
            transparent
        );

    background: var(--color-white);

    color: var(--text-primary);
}


.expense-delete-confirmation__submit {
    border: 0;

    background: #9d3c35;

    color: #fff;
}


@media (max-width: 700px) {

    .expense-day-field {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .expense-delete-confirmation {
        align-items: flex-start;
        flex-direction: column;
    }

}



/* =========================================================
   EXPENSE VISIBILITY
   ========================================================= */

.expense-sharing-panel {
    margin-top: 15px;
    padding: 16px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 5%,
            transparent
        );

    border-radius: 15px;

    background:
        rgba(237, 246, 247, .78);
}


.expense-sharing-panel__heading p {
    margin: 5px 0 0;

    color: var(--text-secondary);

    font-size: 10px;
    line-height: 1.5;
}


.expense-sharing-options {
    margin-top: 11px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 9px;
}


.expense-sharing-option {
    min-height: 70px;

    padding: 12px 13px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-dark) 7%,
            transparent
        );

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .9);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    cursor: pointer;
}


.expense-sharing-option.is-disabled {
    opacity: .52;

    cursor: default;
}


.expense-sharing-option__copy {
    min-width: 0;
}


.expense-sharing-option__copy strong,
.expense-sharing-option__copy small {
    display: block;
}


.expense-sharing-option__copy strong {
    color: var(--text-primary);

    font-size: 11px;
    font-weight: 800;
}


.expense-sharing-option__copy small {
    margin-top: 3px;

    color: var(--text-secondary);

    font-size: 9px;
    line-height: 1.4;
}


.expense-sharing-switch {
    position: relative;

    width: 46px;
    height: 27px;

    flex: 0 0 46px;
}


.expense-sharing-switch-input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.expense-sharing-switch > i {
    position: absolute;

    inset: 0;

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--color-dark) 14%,
            var(--color-white)
        );

    transition:
        background .18s ease;
}


.expense-sharing-switch > i::after {
    content: "";

    position: absolute;

    top: 4px;
    left: 4px;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: var(--color-white);

    box-shadow:
        0 3px 8px
        rgba(43, 45, 66, .15);

    transition:
        transform .18s ease;
}


.expense-sharing-switch-input:checked + i {
    background: var(--color-dark);
}


.expense-sharing-switch-input:checked + i::after {
    transform: translateX(19px);
}


.expense-privacy-note {
    grid-column: 1 / -1;

    padding: 11px 13px;

    border-radius: 12px;

    background:
        color-mix(
            in srgb,
            var(--color-yellow) 22%,
            var(--color-white)
        );

    color: var(--text-secondary);

    font-size: 10px;
    line-height: 1.45;
}


.expense-privacy-note strong {
    margin-right: 4px;

    color: var(--text-primary);
}


@media (max-width: 760px) {

    .expense-sharing-options {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   COMPACT EXPENSE POPOVER
   Desktop layout must fit inside the viewport
   ========================================================= */

@media (min-width: 701px) {

    .expense-entry-card {
        width:
            min(
                1040px,
                calc(100vw - 60px)
            );

        padding: 18px 22px 17px;

        border-radius: 22px;
    }


    /* ---------- Header ---------- */

    .expense-entry-card__heading {
        padding-bottom: 11px;

        gap: 18px;
    }


    .expense-entry-card__heading h3 {
        margin-top: 3px;

        font-size: 22px;
        line-height: 1.1;
    }


    .expense-entry-card__heading p {
        margin-top: 4px;

        font-size: 10.5px;
        line-height: 1.4;
    }


    .expense-entry-card__close {
        width: 34px;
        height: 34px;

        flex-basis: 34px;

        font-size: 19px;
    }


    /* ---------- Form ---------- */

    .expense-form {
        margin-top: 11px;
    }


    /* ---------- Journey day ---------- */

    .expense-day-field {
        margin-bottom: 10px;

        padding: 9px 12px;

        border-radius: 12px;

        gap: 14px;
    }


    .expense-day-field__copy small {
        margin-top: 2px;

        font-size: 9px;
        line-height: 1.35;
    }


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

    .expense-form__label-row {
        margin-bottom: 6px;
    }


    .expense-category-grid {
        gap: 7px;
    }


    .expense-category-option {
        min-height: 61px;

        padding: 6px;

        gap: 4px;

        border-radius: 12px;

        font-size: 8.5px;
    }


    .expense-category-option__icon {
        width: 28px;
        height: 28px;

        flex-basis: 28px;
    }


    .expense-category-option__icon svg {
        width: 15px;
        height: 15px;
    }


    /* ---------- Name + amount ---------- */

    .expense-form__row {
        margin-top: 9px;

        gap: 12px;
    }


    .expense-control {
        min-height: 40px;

        margin-top: 5px;

        padding-left: 12px;
        padding-right: 12px;

        border-radius: 10px;
    }


    .expense-amount-control .expense-control {
        padding-left: 31px;
    }


    /* =====================================================
       DESCRIPTION + PRIVACY
       ===================================================== */

    .expense-form__detail-grid {
        margin-top: 9px;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap: 12px;

        align-items: stretch;
    }


    .expense-form__detail-grid
    .expense-form__field {
        margin-top: 0;

        display: flex;
        flex-direction: column;
    }


    .expense-form__description-field
    .expense-control--textarea {
        min-height: 104px;
        height: 100%;

        flex: 1 1 auto;

        resize: none;
    }


    /* ---------- Expense visibility ---------- */

    .expense-form__detail-grid
    .expense-sharing-panel {
        margin-top: 0;

        padding: 11px 12px;

        border-radius: 13px;
    }


    .expense-sharing-panel__heading p {
        margin-top: 3px;

        font-size: 9px;
        line-height: 1.35;
    }


    .expense-sharing-options {
        margin-top: 7px;

        gap: 7px;
    }


    .expense-sharing-option {
        min-height: 54px;

        padding: 8px 9px;

        border-radius: 10px;

        gap: 8px;
    }


    .expense-sharing-option__copy strong {
        font-size: 10px;
    }


    .expense-sharing-option__copy small {
        margin-top: 2px;

        font-size: 8px;
        line-height: 1.3;
    }


    .expense-sharing-switch {
        width: 40px;
        height: 24px;

        flex-basis: 40px;
    }


    .expense-sharing-switch > i::after {
        top: 3px;
        left: 3px;

        width: 18px;
        height: 18px;
    }


    .expense-sharing-switch-input:checked + i::after {
        transform: translateX(16px);
    }


    /* =====================================================
       PHOTO + RATING
       ===================================================== */

    .expense-form__extras {
        margin-top: 9px;

        gap: 10px;
    }


    .expense-photo-field,
    .expense-rating-field {
        padding: 11px 12px;

        border-radius: 13px;
    }


    .expense-photo-field p,
    .expense-rating-field > p {
        margin-top: 3px;

        font-size: 9px;
        line-height: 1.35;
    }


    .expense-photo-field__input {
        margin-top: 7px;
    }


    .expense-control--file {
        padding: 5px;

        font-size: 9px;
    }


    .expense-control--file::file-selector-button {
        margin-right: 7px;

        padding: 6px 10px;

        font-size: 9px;
    }


    .expense-photo-field__input > span {
        margin-top: 4px;

        font-size: 9px;
    }


    /* ---------- Rating ---------- */

    .expense-rating-stars {
        margin-top: 6px;

        gap: 6px;
    }


    .expense-rating-star {
        width: 34px;
        height: 34px;

        flex-basis: 34px;

        border-radius: 9px;
    }


    .expense-rating-star span {
        font-size: 18px;
    }


    .expense-rating-meaning {
        margin-top: 4px;

        font-size: 9.5px;
    }


    .expense-rating-scale {
        margin-top: 4px;

        display: grid;

        grid-template-columns:
            repeat(3, max-content);

        gap: 12px;

        font-size: 8px;
    }


    /* =====================================================
       ACTIONS
       ===================================================== */

    .expense-form__actions {
        margin-top: 10px;

        padding-top: 9px;

        gap: 8px;
    }


    .expense-form__delete,
    .expense-form__cancel,
    .expense-form__submit {
        min-height: 36px;

        padding-left: 13px;
        padding-right: 13px;
    }

}



/* =========================================================
   EXPENSE CARD — SHARING
   ========================================================= */

.expense-card__title-row {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}


.expense-card__title-row h3 {
    min-width: 0;

    flex: 1 1 auto;
}


.expense-card__sharing {
    margin: 0;

    flex: 0 0 auto;

    display: flex;
    align-items: center;

    flex-wrap: nowrap;

    gap: 5px;
}


.expense-share-chip {
    min-height: 24px;

    padding: 0 8px;

    border: 1px solid transparent;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    font: inherit;

    font-size: 8px;
    font-weight: 800;

    line-height: 1;

    white-space: nowrap;

    cursor: pointer;

    transition:
        transform .15s ease,
        background .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}


.expense-share-chip i {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: currentColor;
}


/* ON = GREEN */

.expense-share-chip.is-on {
    color: #176c55;

    background:
        color-mix(
            in srgb,
            var(--color-mint) 32%,
            var(--color-white)
        );

    border-color:
        color-mix(
            in srgb,
            var(--color-mint) 65%,
            transparent
        );
}


/* OFF = RED */

.expense-share-chip.is-off {
    color: #a94545;

    background: #fff4f4;

    border-color:
        rgba(169, 69, 69, .16);
}


/* NO AUDIENCE AVAILABLE */

.expense-share-chip.is-private {
    color: var(--text-secondary);

    background: var(--color-surface);

    border-color:
        color-mix(
            in srgb,
            var(--color-dark) 8%,
            transparent
        );

    cursor: default;
}


button.expense-share-chip:hover {
    transform: translateY(-1px);
}


button.expense-share-chip:disabled {
    opacity: .55;

    cursor: wait;

    transform: none;
}