/*
    Transaction popup (txp-): the mobile v4 TransactionPopup on the web. Built on the shared tokens and primitives in
    transaction-popups.css (load that first); every color is a --tx-* token, so light and dark follow the site's
    data-bs-theme. The header's color comes from the logo (PopupHeaderTheme): the component writes --txp-header-light,
    --txp-header-dark and the close icon's colors on .txp-root; until they are known the header is the page color.
    Mobile sizes map 1:1 to pixels.
*/

:root {
    --txp-avatar-0: #3B82F6;
    --txp-avatar-1: #6366F1;
    --txp-avatar-2: #06B6D4;
    --txp-avatar-3: #10B981;
    --txp-avatar-4: #F59E0B;
    --txp-avatar-5: #EF4444;
    --txp-avatar-6: #8B5CF6;
    --txp-avatar-7: #EC4899;
    --txp-avatar-8: #0EA5E9;
    --txp-avatar-9: #84CC16;
    --txp-avatar-ink: #FFFFFF;
    --txp-avatar-shade: #000000;
    --txp-avatar-gloss: rgba(255, 255, 255, .25);
    --txp-avatar-ring: rgba(255, 255, 255, .15);
    --txp-avatar-letter-shadow: rgba(0, 0, 0, .22);
}

/* ------------------------------------------------------------------ Dialog, scroll area and header */

.e-dialog.txp-dialog .e-dlg-content {
    padding: 0;
}

/* Opened from a slide-up sheet (the Accounts account sheet): the sheet steps under the popup layer (.dbs-recessed). When
   the window has room for both (680px sheet + 24px gap + 600px popup), the sheet slides left and the popup sits beside
   it on the right, topmost, with no dimming over the sheet; a click on the sheet still closes the popup first. */
@media (min-width: 1360px) {
    body:has(.e-dialog.txp-dialog) .dbs-sheet.dbs-recessed {
        left: calc(50% - 312px);
    }

    body:has(.dbs-sheet.dbs-recessed) .e-dialog.txp-dialog {
        translate: 352px 0;
    }

    body:has(.dbs-sheet.dbs-recessed) .e-dlg-container:has(.e-dialog.txp-dialog) .e-dlg-overlay {
        background-color: transparent;
    }
}

.txp-root {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--tx-page);
}

.txp-busy {
    z-index: 60;
}

.txp-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.txp-hero {
    position: relative;
    min-height: 100%;
}

/* The header: one solid fill of the logo's color, behind the body sheet. */
.txp-band {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 110px;
    background: var(--txp-header-light, var(--tx-page));
    transition: background-color .3s ease;
}

[data-bs-theme="dark"] .txp-band {
    background: var(--txp-header-dark, var(--tx-page));
}

/* The body sheet: the page color with the couple glows (you top-left, your partner top-right); its rounded corner frames the logo. */
.txp-sheet {
    position: absolute;
    top: 86px;
    left: 0;
    right: 0;
    height: 680px;
    border-top-left-radius: 24px;
    background-color: var(--tx-page);
    background-image: var(--tx-glow-user), var(--tx-glow-partner);
}

.txp-close {
    position: absolute;
    top: 20px;
    right: 18px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 26px;
    background: transparent;
    color: var(--txp-close-light, var(--tx-text));
    filter: drop-shadow(0 1px 4px var(--txp-close-halo-light, transparent));
    cursor: pointer;
}

[data-bs-theme="dark"] .txp-close {
    color: var(--txp-close-dark, var(--tx-text));
    filter: drop-shadow(0 1px 4px var(--txp-close-halo-dark, transparent));
}

.txp-close-glyph {
    width: 35px;
    height: 35px;
    fill: currentColor;
}

.txp-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.txp-head-space {
    height: 44px;
}

/* The logo: an 80px circle on the page color, centered on the sheet's top edge. */
.txp-logo {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    margin-left: 20px;
    overflow: hidden;
    border: 2px solid var(--tx-page);
    border-radius: 50%;
    background: var(--tx-page);
}

.txp-logo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--tx-page);
}

/* The letter avatar (no logo): the mobile generated avatar, a glossy disc in the letter's palette color. */
.txp-avatar {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle 38px at 50% 31%, var(--txp-avatar-gloss), transparent),
        linear-gradient(180deg,
            color-mix(in srgb, var(--txp-avatar, var(--txp-avatar-0)) 78%, var(--txp-avatar-ink)) 0%,
            var(--txp-avatar, var(--txp-avatar-0)) 55%,
            color-mix(in srgb, var(--txp-avatar, var(--txp-avatar-0)) 86%, var(--txp-avatar-shade)) 100%);
    box-shadow: inset 0 0 0 1px var(--txp-avatar-ring);
    font-family: var(--tx-font-text);
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    color: var(--txp-avatar-ink);
    text-shadow: 0 1px 2px var(--txp-avatar-letter-shadow);
}

.txp-avatar-small {
    font-size: 26px;
}

.txp-avatar-p-0 { --txp-avatar: var(--txp-avatar-0); }
.txp-avatar-p-1 { --txp-avatar: var(--txp-avatar-1); }
.txp-avatar-p-2 { --txp-avatar: var(--txp-avatar-2); }
.txp-avatar-p-3 { --txp-avatar: var(--txp-avatar-3); }
.txp-avatar-p-4 { --txp-avatar: var(--txp-avatar-4); }
.txp-avatar-p-5 { --txp-avatar: var(--txp-avatar-5); }
.txp-avatar-p-6 { --txp-avatar: var(--txp-avatar-6); }
.txp-avatar-p-7 { --txp-avatar: var(--txp-avatar-7); }
.txp-avatar-p-8 { --txp-avatar: var(--txp-avatar-8); }
.txp-avatar-p-9 { --txp-avatar: var(--txp-avatar-9); }

/* The header text beside the logo: the name (shown here, renamed in Details), then the category and the date. */
.txp-titles {
    min-height: 80px;
    margin: -20px 24px 0 112px;
    text-align: right;
}

.txp-titles.txp-titles-compact {
    min-height: 70px; /* The transaction popup only: 10px less empty space under the category before the summary card. */
}

.txp-title {
    margin: 10px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tx-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--tx-text);
}

.txp-subtitle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    min-width: 0;
    font-size: 14px;
    color: var(--tx-text);
}

.txp-subtitle-category {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.txp-subtitle-divider {
    flex: 0 0 auto;
    width: 2px;
    height: 20px;
    background: var(--tx-text);
}

.txp-subtitle-date {
    flex: 0 0 auto;
    white-space: nowrap;
}

.txp-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 5px 10px 24px;
}

/* ------------------------------------------------------------------ Summary card */

.txp-summary {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    background: var(--tx-surface);
    border-radius: 20px;
}

.txp-account {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}

.txp-institution {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--tx-hero-tile);
    border-radius: 14px;
}

.txp-institution-img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: contain;
}

.txp-account-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.txp-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--tx-text);
}

/* The amount over its Expense / Income switch, right-aligned in the account row (4px apart, the mobile Spacing="4"). */
.txp-amount-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 0;
}

.txp-amount {
    display: grid;
    grid-template-columns: auto auto 22px;
    align-items: center;
    justify-content: end;
    color: var(--txp-amount, var(--tx-amount-zero));
}

/* The amount's color is its direction, the transaction lists' red and green (DashboardNegativeColor / DashboardPositiveColor). */
.txp-amount-out {
    --txp-amount: var(--tx-negative);
}

.txp-amount-in {
    --txp-amount: var(--tx-positive);
}

.txp-amount-zero {
    --txp-amount: var(--tx-amount-zero);
}

/* Money moving between the viewer's own accounts (a transfer, a card payment, a loan payment arriving on the loan) is
   neither red nor green: the mobile TransactionNeutralAmountColor. The flow strip under it says why. */
.txp-amount-neutral {
    --txp-amount: var(--tx-neutral);
}

.txp-amount-currency {
    font-weight: 600;
    font-size: 22px;
    line-height: 38px;
}

.txp-amount-input {
    height: 38px;
    min-width: 52px;
    max-width: 190px;
    padding: 0 3px;
    border: 0;
    border-radius: 8px;
    outline: 0;
    background: transparent;
    color: inherit;
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 22px;
    text-align: right;
}

.txp-amount-input:focus {
    background: var(--tx-page);
}

.txp-amount-input[readonly] {
    cursor: default;
}

.txp-amount-pencil {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    width: 22px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    color: var(--tx-muted);
    opacity: .45;
    cursor: pointer;
}

/* The Expense / Income / Other switch (the mobile compact, dense, Fill SegmentedMenu on a TxPopupHeroTileColor track),
   full width under the account and amount: the selected glyph is red for Expense, green for Income, and the type's hue for
   the third segment (transfers and card payments blue, refunds aqua, loan payments amber-bronze, as the flow strip). */
.txp-type {
    position: relative;
}

/* While the menu is open its switch stays above the click-away layer, so Expense or Income still takes one click. */
.txp-type.is-open > .tx-seg {
    z-index: 32;
}

.tx-seg.txp-direction {
    --txp-type-hue: var(--tx-flow-transfer-text);
    background: var(--tx-hero-tile);
}

.tx-seg.txp-direction.txp-direction-credit {
    --txp-type-hue: var(--tx-flow-credit-text);
}

.tx-seg.txp-direction.txp-direction-loan {
    --txp-type-hue: var(--tx-flow-loan-text);
}

.tx-seg.tx-seg-compact.txp-direction .tx-seg-item {
    height: 32px;
    gap: 6px;
    padding: 0 6px;
    font-size: 12.5px;
}

.tx-seg.tx-seg-compact.txp-direction .tx-seg-item .tx-glyph:not(.tx-seg-item-trailing) {
    font-size: 11.5px;
}

.tx-seg.txp-direction .tx-seg-item:nth-of-type(1).tx-seg-selected .tx-glyph {
    color: var(--tx-negative);
}

.tx-seg.txp-direction .tx-seg-item:nth-of-type(2).tx-seg-selected .tx-glyph {
    color: var(--tx-positive);
}

.tx-seg.txp-direction .tx-seg-item:nth-of-type(3).tx-seg-selected .tx-glyph:not(.tx-seg-item-trailing) {
    color: var(--txp-type-hue);
}

/* Income on a card or a loan: dimmed, with a tooltip saying why (money in there is a refund or credit). */
.tx-seg.txp-direction:not(.tx-seg-is-disabled) .tx-seg-item:disabled {
    cursor: not-allowed;
    opacity: .4;
}

/* The third segment while its menu is open reads as pressed, even when another segment holds the pill. */
.tx-seg.txp-direction.is-open .tx-seg-item:nth-of-type(3) {
    color: var(--tx-seg-selected-text);
}

/* The type menu (the mobile flowChoicesPanel): drops from under the switch, on the same track over the summary surface,
   so it reads as part of the menu. The current type sits on the menu's pill. Each row: the type's glyph on its tint,
   "Card payment / Not income", and the category it sets (or, dimmed, why it can't be picked here). */
.txp-type-scrim {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: transparent;
}

.txp-type-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 31;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: min(400px, 100%);
    padding: 6px 6px 8px;
    border: 1px solid var(--tx-card-border);
    border-radius: 16px;
    background: linear-gradient(var(--tx-hero-tile), var(--tx-hero-tile)), var(--tx-surface);
    box-shadow: 0 14px 36px var(--tx-seg-pill-shadow), 0 2px 8px var(--tx-seg-pill-shadow);
    outline: 0;
    animation: txp-type-drop .17s cubic-bezier(.2, .8, .3, 1);
}

@keyframes txp-type-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.txp-type-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 4px 8px;
}

.txp-type-help {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tx-primary);
    font-family: var(--tx-font);
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
}

.txp-type-help .tx-glyph {
    font-size: 10.5px;
}

.txp-type-help:hover,
.txp-type-help:focus-visible {
    background: var(--tx-seg-track);
    outline: 0;
}

.txp-type-row {
    --txp-type-row-text: var(--tx-flow-transfer-text);
    --txp-type-row-bg: var(--tx-flow-transfer-bg);
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 11px;
    width: 100%;
    min-height: 52px;
    padding: 8px 12px 8px 8px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    text-align: left;
    color: inherit;
    font-family: var(--tx-font);
    cursor: pointer;
    transition: background-color .15s ease;
}

.txp-type-row-credit {
    --txp-type-row-text: var(--tx-flow-credit-text);
    --txp-type-row-bg: var(--tx-flow-credit-bg);
}

.txp-type-row-loan {
    --txp-type-row-text: var(--tx-flow-loan-text);
    --txp-type-row-bg: var(--tx-flow-loan-bg);
}

.txp-type-row:hover:not([aria-disabled="true"]),
.txp-type-row:focus-visible {
    background: var(--tx-seg-track);
    outline: 0;
}

.txp-type-row.is-current,
.txp-type-row.is-current:hover {
    border-color: var(--tx-seg-pill-border);
    background: var(--tx-seg-pill);
    box-shadow: 0 2px 8px var(--tx-seg-pill-shadow);
}

.txp-type-row[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
}

.txp-type-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--txp-type-row-bg);
}

.txp-type-chip .tx-glyph {
    font-size: 13px;
    color: var(--txp-type-row-text);
}

.txp-type-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.txp-type-head {
    display: flex;
    align-items: baseline;
    min-width: 0;
    white-space: nowrap;
}

.txp-type-title {
    flex: none;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--tx-text);
}

.txp-type-verdict {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    color: var(--tx-muted);
}

.txp-type-detail {
    font-family: var(--tx-font-text);
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--tx-muted);
}

.txp-type-check {
    font-size: 12px;
    color: var(--txp-type-row-text);
}

.txp-type-foot {
    margin: 0;
    padding: 6px 8px 0;
    font-family: var(--tx-font-text);
    font-size: 11px;
    color: var(--tx-muted);
}

@media (max-width: 520px) {
    .txp-type-menu {
        width: 100%;
    }
}

/* A phone-width switch keeps the third segment's type name whole: its leading glyph steps aside (the menu rows keep theirs). */
@media (max-width: 420px) {
    .tx-seg.txp-direction .tx-seg-item:nth-of-type(3) .tx-glyph:not(.tx-seg-item-trailing) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .txp-type-menu {
        animation: none;
    }
}

/* What this is (the mobile borderFlow): a tinted r14 row in the kind's hue, a 34px glyph chip on the popup surface,
   "Card payment / Not spending" over the explanation, and a help glyph. Transfers and card payments are blue, income green,
   refunds aqua, loan payments amber-bronze (the list badges' TxFlow* keys). */
.txp-flow {
    --txp-flow-text: var(--tx-flow-transfer-text);
    --txp-flow-bg: var(--tx-flow-transfer-bg);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 11px;
    width: 100%;
    padding: 10px 12px 10px 10px;
    border: 0;
    border-radius: 14px;
    background: var(--txp-flow-bg);
    text-align: left;
    color: inherit;
    font-family: var(--tx-font);
    cursor: pointer;
}

.txp-flow:focus-visible {
    outline: 2px solid var(--txp-flow-text);
    outline-offset: 2px;
}

.txp-flow-income {
    --txp-flow-text: var(--tx-flow-income-text);
    --txp-flow-bg: var(--tx-flow-income-bg);
}

.txp-flow-credit {
    --txp-flow-text: var(--tx-flow-credit-text);
    --txp-flow-bg: var(--tx-flow-credit-bg);
}

.txp-flow-loan {
    --txp-flow-text: var(--tx-flow-loan-text);
    --txp-flow-bg: var(--tx-flow-loan-bg);
}

.txp-flow-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--tx-surface);
}

.txp-flow-glyph {
    font-size: 14px;
    color: var(--txp-flow-text);
}

.txp-flow-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.txp-flow-head {
    display: flex;
    align-items: baseline;
    min-width: 0;
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    white-space: nowrap;
}

.txp-flow-title {
    flex: none;
    color: var(--txp-flow-text);
}

.txp-flow-dot {
    flex: none;
    padding: 0 .3em;
    color: var(--tx-muted);
}

.txp-flow-verdict {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--tx-text);
}

.txp-flow-detail {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--tx-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.txp-flow-help {
    font-size: 12px;
    color: var(--tx-muted);
}

/* The partner's transaction: "Susie's transaction" in the partner's amber. */
.txp-owner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--tx-owner-partner-tint);
    text-align: left;
    color: inherit;
    cursor: pointer;
}

.txp-owner-glyph {
    font-size: 13px;
    color: var(--tx-partner);
}

.txp-owner-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.txp-owner-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 13px;
    color: var(--tx-text);
}

.txp-owner-detail {
    font-size: 11px;
    line-height: 1.35;
    color: var(--tx-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.txp-owner-help {
    font-size: 12px;
    color: var(--tx-muted);
}

/* The highlight tiles: equal columns; an empty slot gives its column back. */
.txp-tiles {
    display: grid;
    grid-template-columns: repeat(var(--txp-tile-count, 3), minmax(0, 1fr));
    margin: 0 -4px;
}

.txp-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    min-height: 76px;
    position: relative;
    margin: 0 4px;
    padding: 10px 11px;
    border: 0;
    border-radius: 14px;
    /* Lit from the top-left (mobile TxSummaryTile): fades toward the summary card; the hairline is the .tx-lit ring
       (transaction-popups.css, Lit rings). */
    background: var(--tx-tile-fill);
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.txp-tile:hover {
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06);
}

.txp-tile:active {
    transform: scale(.985);
}

.txp-tile-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.txp-tile-glyph {
    font-size: 11px;
}

.txp-tile-split {
    width: 14px;
    height: 14px;
}

.txp-glyph-positive { color: var(--tx-positive); }
.txp-glyph-caution { color: var(--tx-caution); }
.txp-glyph-accent { color: var(--tx-seg-selected-glyph); }
.txp-glyph-home { color: var(--tx-home-icon); }
.txp-glyph-partner { color: var(--tx-partner); }
.txp-glyph-reports { color: var(--tx-reports-icon); }

.txp-tile-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 14px;
    color: var(--tx-text);
}

.txp-tile-detail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--tx-font-text);
    font-size: 11px;
    color: var(--tx-muted);
}

/* ------------------------------------------------------------------ Tab menu and panel */

/*
   The tab dock (mobile TransactionPopup txTabMenu): the popup's primary navigation, so it does not sit on a card like
   the sections around it. It runs edge to edge (the negative margin cancels .txp-body's 10px side margin; the 10px
   padding puts the track back on the cards' edges) straight on the popup surface: no band, wash or hairlines, and no
   padding underneath, so the tab panel sits one .txp-body gap (10px) below the menu. Inside, an inset track holds taller 48px tabs; the selected pill
   glows in the accent and carries a small blurred bar (the section menus' cloud, drawn small), which slides with it. Every
   accent value follows the accent preference (--ci-accent-shift).
*/
.txp-dock {
    margin: 6px -10px 0;
    padding: 10px 10px 0;
}

.txp-dock .tx-seg.txp-tabs {
    padding: 5px;
    border-radius: 18px;
    background: var(--tx-dock-track);
    box-shadow: inset 0 0 0 1px var(--tx-dock-track-border);
}

.txp-dock .tx-seg.txp-tabs .tx-seg-pill {
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc((100% - 10px) / var(--tx-seg-count, 3));
    overflow: hidden;
    border-radius: 13px;
    box-shadow: 0 3px 14px var(--tx-pill-glow);
}

/* The blurred bar: a small cloud (haze, a lighter lobe left, a deeper lobe right, a faint sheen) where a crisp bar would
   sit, clipped by the pill. */
.txp-dock .tx-seg.txp-tabs .tx-seg-pill::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 1px;
    width: 56px;
    height: 16px;
    transform: translateX(-50%);
    background:
        radial-gradient(ellipse 30% 17% at 50% 34%, var(--tx-bar-glow-sheen) 0%, transparent 100%),
        radial-gradient(ellipse 32% 40% at 33% 48%, var(--tx-bar-glow-lead) 0%, transparent 100%),
        radial-gradient(ellipse 32% 40% at 67% 56%, var(--tx-bar-glow-trail) 0%, transparent 100%),
        radial-gradient(ellipse 50% 50% at 50% 54%, var(--tx-bar-glow-core) 0%, transparent 100%);
    filter: blur(1.5px);
    pointer-events: none;
}

.txp-dock .tx-seg.txp-tabs .tx-seg-item {
    height: 48px;
    gap: 8px;
    font-size: 14px;
}

.txp-dock .tx-seg.txp-tabs .tx-seg-item .tx-glyph {
    font-size: 15px;
}

.txp-dock .tx-seg.txp-tabs .tx-seg-item .tx-icon-split {
    width: 18px;
    height: 18px;
}

.txp-tab-panel {
    margin-top: 0;
    min-width: 0;
}

.txp-action-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.txp-muted-11 {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--tx-muted);
}

.txp-accent {
    color: var(--tx-primary);
}

/* ------------------------------------------------------------------ Transaction tab */

.txp-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 0 20px;
}

.txp-section-hero {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 20px;
}

.txp-glance-type {
    font-size: 14px;
}

.txp-details-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.txp-note-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.txp-category-picker {
    flex: 1 1 auto;
    min-width: 0;
}

.txp-keep {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 12px;
}

.txp-keep-glyph {
    font-size: 15px;
    color: var(--tx-primary);
}

.txp-keep-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.txp-help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    font-size: 16px;
    color: var(--tx-primary);
    cursor: pointer;
}

.txp-about {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.txp-about-small {
    font-size: 12px;
}

.txp-about-link {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.txp-website {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tx-primary);
}

.txp-location {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.txp-location-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    text-decoration: none;
    color: var(--tx-primary);
}

.txp-location-glyph {
    font-size: 14px;
}

.txp-location-text {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.txp-map {
    height: 200px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--tx-wrapper);
}

.txp-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.txp-delete {
    min-height: 56px;
}

/* ------------------------------------------------------------------ Recurring tab */

.txp-recurring {
    padding-top: 15px;
}

.txp-recurring-info {
    margin: 10px;
    font-size: 14px;
    color: var(--tx-text);
}

/* ------------------------------------------------------------------ History tab */

.txp-history {
    display: flex;
    flex-direction: column;
    min-height: 520px;
    padding: 14px 10px 24px;
}

.txp-share {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.txp-badge-partner {
    color: var(--tx-partner);
}

.txp-share-split {
    width: 15px;
    height: 15px;
}

.txp-how {
    align-self: flex-start;
}

.txp-history-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.txp-history-card {
    padding: 16px;
    background: var(--tx-surface);
    border-radius: 20px;
}

.txp-history-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px;
    text-align: center;
}

.txp-state-glyph {
    width: 28px;
    height: 28px;
    color: var(--tx-primary);
}

.txp-state-title {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--tx-text);
}

.txp-history-state[role="alert"] .txp-state-title {
    font-size: 15px;
}

.txp-state-detail {
    margin: 0;
    font-size: 12px;
    color: var(--tx-muted);
}

/* Auto Split card */
.txp-auto {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.txp-auto-head {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}

.txp-auto-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--tx-tile-bg);
    font-size: 20px;
    color: var(--tx-primary);
}

.txp-auto-title-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.txp-auto-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: var(--tx-text);
}

.txp-auto-check {
    font-size: 12px;
    color: var(--tx-green);
}

.txp-auto-divider {
    height: 1px;
    background: var(--tx-border);
}

.txp-auto-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
}

.txp-auto-fact {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.txp-auto-fact-end {
    align-items: flex-end;
    text-align: right;
}

.txp-auto-caption {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--tx-font-text);
    font-size: 10px;
    color: var(--tx-muted);
}

.txp-auto-glyph {
    font-size: 11px;
    color: var(--tx-primary);
}

.txp-auto-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-weight: 600;
    font-size: 13px;
    color: var(--tx-text);
}

.txp-auto-value.txp-accent {
    color: var(--tx-primary);
}

.txp-auto-shares {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    margin-top: 2px;
}

.txp-auto-share {
    padding: 7px 10px;
    border-radius: 12px;
    background: var(--tx-tile-bg);
    font-weight: 600;
    font-size: 11px;
}

.txp-share-user {
    color: var(--tx-user);
}

.txp-share-partner {
    color: var(--tx-partner);
    text-align: right;
}

/* Split card */
.txp-split {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
}

.txp-split-logo {
    position: relative;
    width: 58px;
    height: 58px;
    overflow: hidden;
    border: 3px solid var(--tx-page);
    border-radius: 50%;
    background: var(--tx-page);
}

.txp-split-logo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--tx-page);
}

.txp-split-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.txp-split-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 8px;
}

.txp-split-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.txp-split-name {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    font-size: 16px;
    color: var(--tx-text);
}

.txp-split-amounts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: 12px;
    margin-top: 14px;
}

.txp-split-amount {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.txp-split-amount-end {
    align-items: flex-end;
}

.txp-split-caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-family: var(--tx-font-text);
    font-size: 10px;
    color: var(--tx-muted);
}

.txp-split-value {
    font-weight: 600;
    font-size: 16px;
    color: var(--tx-text);
}

.txp-split-value.txp-accent {
    color: var(--tx-primary);
}

/* Split activity */
.txp-activity {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.txp-activity-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
}

.txp-activity-title {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    color: var(--tx-text);
}

.txp-count-chip {
    padding: 5px 10px;
    border-radius: 14px;
    background: var(--tx-tile-bg);
    font-weight: 600;
    font-size: 12px;
    white-space: nowrap;
    color: var(--tx-primary);
}

.txp-count-chip-plain {
    border-radius: 12px;
    color: var(--tx-text);
}

.txp-activity-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.txp-activity-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    background: var(--tx-surface);
}

/* ------------------------------------------------------------------ Skeletons (the mobile SfShimmer: bones and a wave) */

.txp-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px 0 20px;
}

.txp-bone {
    position: relative;
    display: block;
    flex: 0 0 auto;
    max-width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: var(--tx-skeleton-bone);
}

.txp-bone::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, var(--tx-skeleton-wave) 50%, transparent 100%);
    animation: txp-wave .9s linear infinite;
}

@keyframes txp-wave {
    to {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .txp-bone::after {
        animation: none;
    }
}

.txp-bone-tile {
    height: 54px;
    border-radius: 14px;
}

.txp-bone-round {
    border-radius: 50%;
}

.txp-bone-status {
    height: 72px;
    border-radius: 14px;
}

.txp-skel-glance {
    min-height: 170px;
}

.txp-skel-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 399px;
}

.txp-skel-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 118px;
}

.txp-skel-about {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 123px;
}

.txp-skel-box {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--tx-tile-border);
    border-radius: 12px;
    background: var(--tx-input-bg);
}

.txp-skel-box-tall {
    align-items: flex-start;
    min-height: 68px;
    padding-top: 13px;
}

.txp-skel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 17px;
}

.txp-history-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.txp-skel-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 14px;
    min-height: 119px;
    padding: 16px;
    border-radius: 20px;
    background: var(--tx-surface);
}

.txp-skel-card-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.txp-skel-card-columns {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.txp-skel-activity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 11px 14px;
    border-radius: 14px;
    background: var(--tx-surface);
}

.txp-recurring-skeleton {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.txp-skel-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.txp-skel-stack-tight {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.txp-skel-chips {
    display: flex;
    gap: 8px;
}

.txp-skel-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.txp-skel-tiles.txp-skel-tiles-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.txp-skel-menu {
    padding: 4px;
    border-radius: 16px;
    background: var(--tx-seg-track);
}

.txp-skel-insight {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
}

/* ------------------------------------------------------------------ Small screens (the dialog fills the screen) */

@media (max-width: 420px) {
    .txp-titles {
        margin-left: 108px;
        margin-right: 16px;
    }

    .txp-tile {
        padding: 10px 9px;
    }
}