/* _content/MoneyMirror/Components/Layout/MainLayout.razor.rz.scp.css */
/*
 * App shell.
 *
 * Phone: one column. The brand bar is sticky at the top, content scrolls
 * under it, and the tab bar is pinned to the bottom. To let those two be
 * placed independently, `.sidebar` is dissolved with `display: contents`
 * so the elements NavMenu renders become direct children of `.page`.
 * NavMenu.razor.css owns how they look in both layouts.
 *
 * Desktop (>= 48rem): `.sidebar` becomes a real box again and the page
 * turns into a two-column row with a sticky glass rail on the left.
 */

.page[b-6d6cutdjf4] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.sidebar[b-6d6cutdjf4] {
    display: contents;
}

main[b-6d6cutdjf4] {
    flex: 1;
    /* Without this, a page whose content has a wide intrinsic minimum
       width (e.g. Financials' summary grid/tables) refuses to shrink
       below that width by default, forcing .page wider than the viewport
       and squeezing the nav - "crushing" it (#196). */
    min-width: 0;
    padding-top: 0.75rem;
    padding-right: calc(1rem + var(--safe-right));
    padding-left: calc(1rem + var(--safe-left));
    /* Clear the fixed tab bar, and the home indicator underneath it. */
    padding-bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + 1.5rem);
}

/*
 * Blazor's unhandled-error toast is fixed to the bottom of the viewport,
 * which is exactly where the tab bar now lives. Lift it clear.
 */
#blazor-error-ui[b-6d6cutdjf4] {
    color-scheme: light only;
    position: fixed;
    bottom: calc(var(--tab-bar-height) + var(--safe-bottom));
    left: 0;
    z-index: 1000;
    display: none;
    box-sizing: border-box;
    width: 100%;
    padding: 0.6rem 1.25rem 0.7rem;
    background: var(--error-toast-bg);
    box-shadow: var(--shadow-toast);
}

#blazor-error-ui .dismiss[b-6d6cutdjf4] {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    cursor: pointer;
}

@media (min-width: 48rem) {
    .page[b-6d6cutdjf4] {
        flex-direction: row;
    }

    .sidebar[b-6d6cutdjf4] {
        display: block;
        position: sticky;
        top: 0;
        /* Hold the rail at its intended width however wide the page's
           content gets: main should scroll internally, not compress the
           nav (#196). */
        flex-shrink: 0;
        width: var(--nav-rail-width);
        height: 100dvh;
        border-right: 1px solid var(--glass-hairline);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-strong);
        -webkit-backdrop-filter: var(--glass-blur-strong);
    }

    main[b-6d6cutdjf4] {
        padding: 2rem 2.5rem 3rem;
    }

    #blazor-error-ui[b-6d6cutdjf4] {
        bottom: 0;
    }
}
/* _content/MoneyMirror/Components/Layout/NavMenu.razor.rz.scp.css */
/*
 * Navigation, in two shapes.
 *
 * Phone (default): a bottom tab bar, the way the App Store and every
 * other first-party iOS app does it. Frosted, pinned above the home
 * indicator, thumb-reachable.
 *
 * Desktop (>= 48rem): the same links become a vertical rail inside the
 * sidebar box that MainLayout.razor.css brings back at that width.
 *
 * The <a> is rendered by NavLink, so it never carries this component's
 * scope attribute and has to be reached through ::deep. The icon and
 * label spans are written in NavMenu.razor, so they do carry it and are
 * styled directly.
 */

/* ===================================================================
 * Brand bar
 * =================================================================== */

.top-row[b-36tc3gopd0] {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    min-height: calc(var(--header-height) + var(--safe-top));
    padding-top: var(--safe-top);
    padding-right: calc(1rem + var(--safe-right));
    padding-left: calc(1rem + var(--safe-left));
    border-bottom: 1px solid var(--glass-hairline);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
}

.navbar-brand[b-36tc3gopd0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--brand);
    /* Serif wordmark, with the usual fallbacks for machines that have no
       Times New Roman installed. */
    font-family: var(--font-display);
    font-size: 1.0625rem;
    text-decoration: none;
}

.brand-name[b-36tc3gopd0] {
    letter-spacing: -0.01em;
}

/* The browser-tab favicon, reused as the wordmark logo. Same mask-and-
   currentColor trick as the nav icons below, so it picks up the brand
   color instead of the navy the .svg file paints. The growth line stays
   knocked out, showing the glass behind it. */
.brand-logo[b-36tc3gopd0] {
    display: inline-block;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/* ===================================================================
 * Tab bar
 * =================================================================== */

.nav-scrollable[b-36tc3gopd0] {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    padding-right: var(--safe-right);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    border-top: 1px solid var(--glass-hairline);
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--shadow-bar);
}

.nav-list[b-36tc3gopd0] {
    display: flex;
    align-items: stretch;
    height: var(--tab-bar-height);
}

.nav-list[b-36tc3gopd0]  .nav-link {
    position: relative;
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.125rem;
    margin: 0.1875rem 0.125rem;
    padding: 0.3125rem 0.125rem 0;
    border-radius: var(--radius-sm);
    color: var(--nav-link);
    text-decoration: none;
    transition:
        color var(--dur-fast) var(--ease-standard),
        background-color var(--dur) var(--ease-spring);
}

/* The selected tab lifts into a glass capsule, with the brand's gold as
   the one bit of accent in an otherwise monochrome bar. */
.nav-list[b-36tc3gopd0]  .nav-link.active {
    color: var(--nav-link-active);
    background: var(--nav-surface-active);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.nav-list[b-36tc3gopd0]  .nav-link.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1.25rem;
    height: 2px;
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    background: var(--nav-indicator);
}

.nav-list[b-36tc3gopd0]  .nav-link:active {
    background: var(--nav-surface-pressed);
}

/* Hover states only where there is a cursor. On a touchscreen they stick
   after a tap and make the wrong tab look selected. */
@media (hover: hover) {
    .nav-list[b-36tc3gopd0]  .nav-link:hover {
        color: var(--nav-link-hover);
        background: var(--nav-surface-hover);
    }

    .nav-list[b-36tc3gopd0]  .nav-link.active:hover {
        background: var(--nav-surface-active-hover);
    }
}

.nav-icon[b-36tc3gopd0] {
    display: block;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    /* Icons are masks painted with currentColor, so they follow the link
       color rather than being hardcoded. */
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

/*
 * Every tab reserves two lines, whether it needs them or not, so the
 * icons all sit on the same baseline no matter how long a label is.
 */
.nav-label[b-36tc3gopd0] {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 2.4em;
    font-size: 0.5625rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* A five-tab row has no width for "Physical Assets" or "Human Capital", so
   the tab bar shows only the first word. The rail below restores the rest;
   the aria-label on the link carries the full name at either width. */
.nav-label-rest[b-36tc3gopd0] {
    display: none;
}

/* ===================================================================
 * Side rail
 * =================================================================== */

@media (min-width: 48rem) {
    .top-row[b-36tc3gopd0] {
        position: static;
        min-height: 0;
        padding: 1.5rem 1rem 1rem;
        border-bottom: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .navbar-brand[b-36tc3gopd0] {
        font-size: 1.1875rem;
    }

    .nav-scrollable[b-36tc3gopd0] {
        position: static;
        height: calc(100dvh - 4.5rem);
        padding: 0.25rem 0.75rem 1rem;
        overflow-y: auto;
        border-top: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
    }

    .nav-list[b-36tc3gopd0] {
        flex-direction: column;
        gap: 0.125rem;
        height: auto;
    }

    .nav-list[b-36tc3gopd0]  .nav-link {
        flex: none;
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.75rem;
        min-height: 2.75rem;
        margin: 0;
        padding: 0.5rem 0.75rem 0.5rem 0.875rem;
        font-size: 0.9375rem;
        font-weight: 500;
    }

    .nav-list[b-36tc3gopd0]  .nav-link.active {
        font-weight: 600;
    }

    /* The gold moves from a pip above the tab to a bar down its edge. */
    .nav-list[b-36tc3gopd0]  .nav-link.active::before {
        top: 50%;
        left: 0;
        width: 3px;
        height: 1.25rem;
        transform: translateY(-50%);
    }

    .nav-icon[b-36tc3gopd0] {
        width: 1.125rem;
        height: 1.125rem;
    }

    .nav-label[b-36tc3gopd0] {
        height: auto;
        font-size: inherit;
        font-weight: inherit;
        line-height: 1.3;
        text-align: left;
    }

    .nav-label-rest[b-36tc3gopd0] {
        display: inline;
    }
}

/* ===================================================================
 * Icon masks
 * ===================================================================
 * Bootstrap Icons, inlined as masks so they are painted with
 * currentColor and follow the link's state. The -webkit- form is for
 * Safari older than 15.4, which never learned the unprefixed one.
 */

/* The wordmark. */
.brand-logo[b-36tc3gopd0] {
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='131%20131%20418%20418'%3E%3Cdefs%3E%3Cpolyline%20id='growthLine'%20points='50,450%20200,400%20260,380%20300,410%20360,340%20420,360%20480,280'/%3E%3Cmask%20id='knockout'%3E%3Ccircle%20cx='340'%20cy='340'%20r='209'%20fill='%23ffffff'/%3E%3Cuse%20href='%23growthLine'%20fill='none'%20stroke='%23000000'%20stroke-width='26'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='475'%20cy='290'%20r='26'%20fill='%23000000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle%20cx='340'%20cy='340'%20r='209'%20fill='%23ffffff'%20mask='url%28%23knockout%29'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='131%20131%20418%20418'%3E%3Cdefs%3E%3Cpolyline%20id='growthLine'%20points='50,450%20200,400%20260,380%20300,410%20360,340%20420,360%20480,280'/%3E%3Cmask%20id='knockout'%3E%3Ccircle%20cx='340'%20cy='340'%20r='209'%20fill='%23ffffff'/%3E%3Cuse%20href='%23growthLine'%20fill='none'%20stroke='%23000000'%20stroke-width='26'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='475'%20cy='290'%20r='26'%20fill='%23000000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle%20cx='340'%20cy='340'%20r='209'%20fill='%23ffffff'%20mask='url%28%23knockout%29'/%3E%3C/svg%3E");
}

/* Dashboard */
.bi-house-door-fill-nav-menu[b-36tc3gopd0] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

/* Financial */
.bi-coin-fill-nav-menu[b-36tc3gopd0] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-coin' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 9.511c.076.954.83 1.697 2.182 1.785V12h.6v-.709c1.4-.098 2.218-.846 2.218-1.932 0-.987-.626-1.496-1.745-1.76l-.473-.112V5.57c.6.068.982.396 1.074.85h1.052c-.076-.919-.864-1.638-2.126-1.716V4h-.6v.719c-1.195.117-2.01.836-2.01 1.853 0 .9.606 1.472 1.613 1.707l.397.098v2.034c-.615-.093-1.022-.43-1.114-.9H5.5zm2.177-2.166c-.59-.137-.91-.416-.91-.836 0-.47.345-.822.915-.925v1.76h-.005zm.692 1.193c.717.166 1.048.435 1.048.91 0 .542-.412.914-1.135.982V8.518l.087.02z'/%3E%3Cpath d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-coin' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 9.511c.076.954.83 1.697 2.182 1.785V12h.6v-.709c1.4-.098 2.218-.846 2.218-1.932 0-.987-.626-1.496-1.745-1.76l-.473-.112V5.57c.6.068.982.396 1.074.85h1.052c-.076-.919-.864-1.638-2.126-1.716V4h-.6v.719c-1.195.117-2.01.836-2.01 1.853 0 .9.606 1.472 1.613 1.707l.397.098v2.034c-.615-.093-1.022-.43-1.114-.9H5.5zm2.177-2.166c-.59-.137-.91-.416-.91-.836 0-.47.345-.822.915-.925v1.76h-.005zm.692 1.193c.717.166 1.048.435 1.048.91 0 .542-.412.914-1.135.982V8.518l.087.02z'/%3E%3Cpath d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z'/%3E%3C/svg%3E");
}

/* Physical Assets */
.bi-plus-square-fill-nav-menu[b-36tc3gopd0] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

/* Inventory */
.bi-backpack-fill-nav-menu[b-36tc3gopd0] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-backpack-fill' viewBox='0 0 16 16'%3E%3Cpath d='M5 13v-3h4v.5a.5.5 0 0 0 1 0V10h1v3z'/%3E%3Cpath d='M6 2v.341C3.67 3.165 2 5.388 2 8v5.5A2.5 2.5 0 0 0 4.5 16h7a2.5 2.5 0 0 0 2.5-2.5V8a6 6 0 0 0-4-5.659V2a2 2 0 1 0-4 0m2-1a1 1 0 0 1 1 1v.083a6 6 0 0 0-2 0V2a1 1 0 0 1 1-1m0 3a4 4 0 0 1 3.96 3.43.5.5 0 1 1-.99.14 3 3 0 0 0-5.94 0 .5.5 0 1 1-.99-.14A4 4 0 0 1 8 4M4.5 9h7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-backpack-fill' viewBox='0 0 16 16'%3E%3Cpath d='M5 13v-3h4v.5a.5.5 0 0 0 1 0V10h1v3z'/%3E%3Cpath d='M6 2v.341C3.67 3.165 2 5.388 2 8v5.5A2.5 2.5 0 0 0 4.5 16h7a2.5 2.5 0 0 0 2.5-2.5V8a6 6 0 0 0-4-5.659V2a2 2 0 1 0-4 0m2-1a1 1 0 0 1 1 1v.083a6 6 0 0 0-2 0V2a1 1 0 0 1 1-1m0 3a4 4 0 0 1 3.96 3.43.5.5 0 1 1-.99.14 3 3 0 0 0-5.94 0 .5.5 0 1 1-.99-.14A4 4 0 0 1 8 4M4.5 9h7a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

/* Human Capital */
.bi-mortarboard-fill-nav-menu[b-36tc3gopd0] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-mortarboard-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-mortarboard-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917z'/%3E%3Cpath d='M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466z'/%3E%3C/svg%3E");
}

/* Market Potential */
.bi-bar-chart-line-fill-nav-menu[b-36tc3gopd0] {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bar-chart-line-fill' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bar-chart-line-fill' viewBox='0 0 16 16'%3E%3Cpath d='M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1z'/%3E%3C/svg%3E");
}
/* _content/MoneyMirror/Components/Pages/Financials/NetWorthCalculator.razor.rz.scp.css */
/*
 * Financials.
 *
 * Mobile first, and ordered the way you would read it on a phone: title,
 * then the headline number on a glass pane of its own, then the three
 * components that make it up, then the records themselves.
 *
 * The records are a <table> on a desktop and a stack of cards on a phone.
 * Same markup either way - the cells are re-placed with grid-template-
 * areas rather than duplicated - because a five-column table on a 390px
 * screen can only be read by dragging it sideways.
 */

.finance-page[b-fvhz8xf86q] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0.25rem 0 1rem;
    color: var(--text);
}

/* ===================================================================
 * Header
 * =================================================================== */

.finance-header[b-fvhz8xf86q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

.finance-header h1[b-fvhz8xf86q] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 2.5rem);
    font-weight: 400;
    line-height: 1.1;
}

.finance-subtitle[b-fvhz8xf86q] {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.finance-eyebrow[b-fvhz8xf86q] {
    color: var(--accent-text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

button[b-fvhz8xf86q] {
    cursor: pointer;
}

/* Full width and side by side, the way a phone expects its primary
   actions. They shrink back to their content on a desktop. */
.header-actions[b-fvhz8xf86q] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.header-actions button[b-fvhz8xf86q] {
    flex: 1;
}

/* ===================================================================
 * The headline number
 * =================================================================== */

.net-worth-summary[b-fvhz8xf86q] {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background-color: var(--glass-bg);
    /* A wash of the brand's gold in the top corner, so the most
       important pane on the page is also the warmest one. */
    background-image: radial-gradient(
        20rem 11rem at 88% -25%,
        color-mix(in srgb, var(--accent) 24%, transparent),
        transparent 70%
    );
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-3);
}

.headline-figure[b-fvhz8xf86q] {
    margin-bottom: 1.25rem;
}

.headline-figure dt[b-fvhz8xf86q] {
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.headline-amount[b-fvhz8xf86q] {
    display: block;
    margin-top: 0.25rem;
    color: var(--text);
    font-family: var(--font-numeric);
    font-size: clamp(2.5rem, 13vw, 3.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.headline-note[b-fvhz8xf86q] {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Three tiles that reflow to whatever the screen can hold. */
.breakdown-row[b-fvhz8xf86q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.breakdown-item[b-fvhz8xf86q] {
    min-width: 0;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--glass-hairline);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.breakdown-item dt[b-fvhz8xf86q] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.breakdown-item dd[b-fvhz8xf86q] {
    margin: 0.25rem 0 0;
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.breakdown-liability dd[b-fvhz8xf86q] {
    color: var(--negative-text);
}

/* ===================================================================
 * Market potential
 * ===================================================================
 * A quieter pane than the net worth one above it. That is the point:
 * this figure deliberately does not join the total, so it must not
 * compete with it for attention.
 */

.potential-summary[b-fvhz8xf86q] {
    margin-bottom: 1.25rem;
    padding: 1.125rem;
    border: 1px solid var(--glass-hairline);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-1);
}

.potential-head[b-fvhz8xf86q] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.potential-label[b-fvhz8xf86q] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.potential-head a[b-fvhz8xf86q] {
    color: var(--brand);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.potential-head a:hover[b-fvhz8xf86q] {
    text-decoration: underline;
}

/* Smaller than .headline-amount by design, and it wraps rather than
   shrinking: "$78,000 - $104,000" does not fit one line on a 390px
   screen at any size worth reading. */
.potential-amount[b-fvhz8xf86q] {
    display: block;
    margin-top: 0.35rem;
    color: var(--text);
    font-family: var(--font-numeric);
    font-size: clamp(1.5rem, 7vw, 1.875rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.potential-note[b-fvhz8xf86q] {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.potential-pending[b-fvhz8xf86q] {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ===================================================================
 * Segmented control
 * =================================================================== */

.records-toolbar[b-fvhz8xf86q] {
    margin-bottom: 0.875rem;
}

.record-tabs[b-fvhz8xf86q] {
    display: flex;
    gap: 0.1875rem;
    padding: 0.1875rem;
    border: 1px solid var(--glass-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
}

.record-tab[b-fvhz8xf86q] {
    flex: 1;
    min-width: 0;
    min-height: 2.25rem;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    transition:
        color var(--dur-fast) var(--ease-standard),
        background-color var(--dur) var(--ease-spring);
}

/* The selected segment is a raised white lozenge, the iOS pattern. */
.record-tab.selected[b-fvhz8xf86q] {
    color: var(--brand);
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.record-tab span[b-fvhz8xf86q] {
    margin-left: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* ===================================================================
 * Records
 * =================================================================== */

.records-card[b-fvhz8xf86q] {
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-2);
}

.records-heading[b-fvhz8xf86q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--glass-hairline);
}

.records-heading h2[b-fvhz8xf86q] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 400;
}

.records-heading p[b-fvhz8xf86q] {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.record-count[b-fvhz8xf86q] {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Left over from when the table scrolled sideways. Kept as a safety net
   for a narrow desktop window, where five columns can still outgrow the
   card. */
.records-table-wrap[b-fvhz8xf86q] {
    overflow-x: auto;
}

.records-table[b-fvhz8xf86q] {
    display: block;
    width: 100%;
    border-collapse: collapse;
}

/*
 * On a phone the table stops behaving like one. Every row becomes a
 * two-line card: name and amount on the first line, type, date and the
 * row's actions on the second. The header row has nothing to label once
 * the columns are gone, so it is hidden rather than read out.
 */
.records-table thead[b-fvhz8xf86q] {
    display: none;
}

.records-table tbody[b-fvhz8xf86q] {
    display: block;
}

.records-table tr[b-fvhz8xf86q] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "name name amount"
        "type date actions";
    align-items: center;
    gap: 0.35rem 0.5rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--glass-hairline);
}

.records-table tbody tr:first-child[b-fvhz8xf86q] {
    border-top: 0;
}

.records-table td[b-fvhz8xf86q] {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    font-size: 0.85rem;
}

.record-name-cell[b-fvhz8xf86q] {
    grid-area: name;
}

.record-name[b-fvhz8xf86q] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.record-name strong[b-fvhz8xf86q] {
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.record-amount[b-fvhz8xf86q] {
    grid-area: amount;
    justify-self: end;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.record-type[b-fvhz8xf86q] {
    grid-area: type;
}

.type-pill[b-fvhz8xf86q] {
    display: inline-flex;
    align-items: center;
    color: var(--positive-text);
    font-size: 0.75rem;
    font-weight: 500;
}

.type-pill > span[b-fvhz8xf86q] {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: var(--positive);
}

.liability-pill[b-fvhz8xf86q] {
    color: var(--negative-text);
}

.liability-pill > span[b-fvhz8xf86q] {
    background: var(--negative);
}

.record-date[b-fvhz8xf86q] {
    grid-area: date;
    color: var(--text-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.record-actions[b-fvhz8xf86q] {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    white-space: nowrap;
}

.record-actions button[b-fvhz8xf86q] {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--glass-hairline);
    border-radius: var(--radius-pill);
    color: var(--brand);
    background: var(--glass-bg-strong);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    transition:
        transform var(--dur-fast) var(--ease-spring),
        background-color var(--dur-fast) var(--ease-standard);
}

.record-actions button:active[b-fvhz8xf86q] {
    transform: scale(0.95);
}

.record-actions .delete-action[b-fvhz8xf86q] {
    margin-left: 0.35rem;
    color: var(--negative-text);
}

.empty-records[b-fvhz8xf86q] {
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.empty-icon[b-fvhz8xf86q] {
    display: grid;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--brand);
    background: var(--brand-surface);
    font-size: 1.5rem;
}

.empty-records h3[b-fvhz8xf86q] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 400;
}

.empty-records p[b-fvhz8xf86q] {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.sr-only[b-fvhz8xf86q] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ===================================================================
 * Add / edit sheet
 * ===================================================================
 * Rises from the bottom like an iOS sheet on a phone, slides in from the
 * right on a desktop. Bootstrap also ships a `.modal-backdrop`, so the
 * z-indexes here are set high enough to clear it, the tab bar and
 * Blazor's error toast, rather than relying on which stylesheet happens
 * to be ordered last.
 */

.modal-backdrop[b-fvhz8xf86q] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    /* Bootstrap sizes its own backdrop with 100vw/100vh, which overflows
       by the width of a desktop scrollbar. inset alone is enough. */
    width: auto;
    height: auto;
    background: var(--overlay);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: backdrop-fade-in-b-fvhz8xf86q var(--dur) var(--ease-standard);
}

.record-drawer[b-fvhz8xf86q] {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1201;
    max-height: 92dvh;
    padding: 0.625rem 1.25rem calc(1.5rem + var(--safe-bottom));
    overflow-y: auto;
    box-sizing: border-box;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--glass-bg-solid);
    box-shadow: var(--shadow-drawer);
    animation: sheet-rise-b-fvhz8xf86q var(--dur-slow) var(--ease-spring);
}

/* The handle an iOS sheet is dragged by. Decorative: the sheet is still
   dismissed with the close button or by tapping the backdrop. */
.drawer-grabber[b-fvhz8xf86q] {
    width: 2.25rem;
    height: 0.3125rem;
    margin: 0 auto 0.875rem;
    border-radius: var(--radius-pill);
    background: var(--border);
}

@keyframes sheet-rise-b-fvhz8xf86q {
    from {
        transform: translateY(100%);
    }
}

@keyframes sheet-slide-in-b-fvhz8xf86q {
    from {
        transform: translateX(100%);
    }
}

@keyframes backdrop-fade-in-b-fvhz8xf86q {
    from {
        opacity: 0;
    }
}

.drawer-header[b-fvhz8xf86q] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.drawer-header h2[b-fvhz8xf86q] {
    margin: 0.25rem 0 0;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: 400;
}

.close-drawer[b-fvhz8xf86q] {
    display: grid;
    flex: none;
    width: 1.875rem;
    height: 1.875rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--text-muted);
    background: var(--surface-muted);
    font-size: 1.25rem;
    line-height: 1;
}

.drawer-copy[b-fvhz8xf86q] {
    margin: 0.5rem 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* The controls inside a .form-field are rendered by Blazor's Input*
   components, so they never receive this component's scope attribute -
   ::deep is the only way a scoped rule can reach them. */
.record-drawer[b-fvhz8xf86q]  .record-form {
    display: grid;
    gap: 1rem;
}

.form-field label[b-fvhz8xf86q] {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
}

/* 1rem is load-bearing: Safari on iOS zooms the page in on a focused
   field whose text is smaller, and will not zoom back out. */
.form-field[b-fvhz8xf86q]  input,
.form-field[b-fvhz8xf86q]  select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--surface-muted);
    font: inherit;
    font-size: 1rem;
    transition:
        border-color var(--dur-fast) var(--ease-standard),
        background-color var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard);
}

.form-field[b-fvhz8xf86q]  input::placeholder {
    color: var(--text-muted);
}

.form-field[b-fvhz8xf86q]  input:hover,
.form-field[b-fvhz8xf86q]  select:hover {
    border-color: var(--brand);
}

/* Same focus ring the rest of the app uses (see app.css). */
.form-field[b-fvhz8xf86q]  input:focus,
.form-field[b-fvhz8xf86q]  select:focus {
    outline: none;
    border-color: var(--brand);
    background: var(--surface);
    box-shadow:
        0 0 0 0.1rem var(--focus-ring-inner),
        0 0 0 0.25rem var(--focus-ring-outer);
}

/* Blazor stamps `invalid` on a control that fails validation; keep the
   border in step with the outline app.css already draws, so the two do
   not disagree. */
.form-field[b-fvhz8xf86q]  input.invalid,
.form-field[b-fvhz8xf86q]  select.invalid {
    border-color: var(--input-invalid);
}

.form-field[b-fvhz8xf86q]  input:disabled,
.form-field[b-fvhz8xf86q]  select:disabled {
    color: var(--text-muted);
    background: var(--border-subtle);
    cursor: not-allowed;
}

/* Drop the OS dropdown arrow and draw our own, so the select matches the
   rest of the form instead of the platform. Must follow the .form-field
   rules above: the two selectors tie on specificity. */
.select-field[b-fvhz8xf86q] {
    position: relative;
}

.select-field[b-fvhz8xf86q]  select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
}

.select-field[b-fvhz8xf86q]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.85rem;
    width: 0.7rem;
    height: 0.7rem;
    transform: translateY(-50%);
    pointer-events: none;
    background-color: var(--text-muted);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.currency-field[b-fvhz8xf86q] {
    position: relative;
}

.currency-field > span[b-fvhz8xf86q] {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
}

.currency-field[b-fvhz8xf86q]  input {
    padding-left: 1.75rem;
}

/* The spinners fight the custom padding and add nothing to a dollar
   amount. */
.currency-field[b-fvhz8xf86q]  input::-webkit-outer-spin-button,
.currency-field[b-fvhz8xf86q]  input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.currency-field[b-fvhz8xf86q]  input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* Tone down the native calendar button so it reads as part of the field. */
.form-field[b-fvhz8xf86q]  input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
}

.form-field[b-fvhz8xf86q]  input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.form-field[b-fvhz8xf86q]  .validation-message {
    display: block;
    margin-top: 0.3rem;
    color: var(--negative-text);
    font-size: 0.75rem;
}

/* ValidationSummary renders its own <ul class="validation-errors">, which
   replaces the class we pass it - match both so the styling sticks. */
.record-drawer[b-fvhz8xf86q]  .form-summary,
.record-drawer[b-fvhz8xf86q]  .validation-errors {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--negative-text);
    font-size: 0.8rem;
}

.drawer-actions[b-fvhz8xf86q] {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-hairline);
}

/* Full width on a phone, right aligned on a desktop. */
.drawer-actions button[b-fvhz8xf86q] {
    flex: 1;
}

/* ===================================================================
 * Desktop
 * =================================================================== */

@media (min-width: 48rem) {
    .finance-header[b-fvhz8xf86q] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.75rem;
    }

    .finance-header h1[b-fvhz8xf86q] {
        font-size: clamp(2.25rem, 4vw, 3.25rem);
    }

    .header-actions[b-fvhz8xf86q] {
        width: auto;
    }

    .header-actions button[b-fvhz8xf86q] {
        flex: none;
    }

    .net-worth-summary[b-fvhz8xf86q] {
        margin-bottom: 1.75rem;
        padding: 1.75rem;
    }

    .headline-amount[b-fvhz8xf86q] {
        font-size: clamp(3rem, 5vw, 3.75rem);
    }

    .breakdown-row[b-fvhz8xf86q] {
        gap: 0.75rem;
    }

    .potential-summary[b-fvhz8xf86q] {
        margin-bottom: 1.75rem;
        padding: 1.5rem;
    }

    .potential-amount[b-fvhz8xf86q] {
        font-size: 2rem;
    }

    .record-tabs[b-fvhz8xf86q] {
        display: inline-flex;
    }

    .record-tab[b-fvhz8xf86q] {
        flex: none;
        padding: 0 1rem;
    }

    .records-heading[b-fvhz8xf86q] {
        padding: 1.125rem 1.25rem;
    }

    .records-heading h2[b-fvhz8xf86q] {
        font-size: 1.35rem;
    }

    /* Back to being a table. */
    .records-table[b-fvhz8xf86q] {
        display: table;
    }

    .records-table thead[b-fvhz8xf86q] {
        display: table-header-group;
    }

    .records-table tbody[b-fvhz8xf86q] {
        display: table-row-group;
    }

    .records-table tr[b-fvhz8xf86q] {
        display: table-row;
        padding: 0;
        border-top: 0;
    }

    .records-table th[b-fvhz8xf86q] {
        padding: 0.625rem 1.25rem;
        color: var(--text-muted);
        background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-align: left;
        text-transform: uppercase;
    }

    .records-table td[b-fvhz8xf86q] {
        display: table-cell;
        padding: 0.875rem 1.25rem;
        border-top: 1px solid var(--glass-hairline);
        vertical-align: middle;
    }

    .record-amount[b-fvhz8xf86q] {
        font-size: 0.9375rem;
    }

    .record-actions[b-fvhz8xf86q] {
        display: table-cell;
        text-align: right;
    }

    .record-drawer[b-fvhz8xf86q] {
        top: 0;
        left: auto;
        width: min(26rem, 100%);
        max-height: none;
        padding: 2rem;
        border-radius: 0;
        animation-name: sheet-slide-in-b-fvhz8xf86q;
    }

    .drawer-grabber[b-fvhz8xf86q] {
        display: none;
    }

    .drawer-header h2[b-fvhz8xf86q] {
        font-size: 2rem;
    }

    .drawer-actions[b-fvhz8xf86q] {
        justify-content: flex-end;
    }

    .drawer-actions button[b-fvhz8xf86q] {
        flex: none;
    }
}
/* _content/MoneyMirror/Features/Dashboard/Dashboard.razor.rz.scp.css */
/*
 * The landing page.
 *
 * A long scroll rather than a grid of cards, so it reads on a phone the
 * way a pitch reads: one idea per screen, each section announcing itself
 * with an eyebrow before it says anything. Mobile first, widened at the
 * shared 48rem breakpoint.
 *
 * Only the live band and the closing call to action are panes. Everything
 * between them sits directly on the ambient wash - stacking eight glass
 * cards down a page turns the blur into noise and flattens the hierarchy
 * the eyebrows are there to create.
 */

.landing[b-1jau8z8rsg] {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0.25rem 0 1.5rem;
    color: var(--text);
}

/* ===================================================================
 * Hero
 * =================================================================== */

.hero[b-1jau8z8rsg] {
    padding: 1.5rem 0 2rem;
}

.hero-eyebrow[b-1jau8z8rsg] {
    margin: 0 0 0.75rem;
    color: var(--accent-text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* The wordmark, at the largest size the page uses. Serif and light, the
   way the brand sets it everywhere else. */
.hero-title[b-1jau8z8rsg] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 14vw, 4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
}

.hero-lede[b-1jau8z8rsg] {
    margin: 1.25rem 0 0;
    max-width: 34rem;
    font-size: 1.125rem;
    line-height: 1.45;
    font-weight: 500;
}

.hero-sub[b-1jau8z8rsg] {
    margin: 0.875rem 0 0;
    max-width: 34rem;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.55;
}

/* Full width and stacked on a phone, the way a phone expects its primary
   actions; back to their own width once there is room for a row. */
.hero-actions[b-1jau8z8rsg] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1.5rem;
}

.hero-actions .primary-button[b-1jau8z8rsg],
.hero-actions .secondary-button[b-1jau8z8rsg] {
    width: 100%;
}

/* ===================================================================
 * Live band
 * ===================================================================
 * The one part of this page that is not copy. It reads the real
 * database, so a visitor's first impression is the app running rather
 * than a description of it.
 */

.live-band[b-1jau8z8rsg] {
    padding: 1.125rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-2);
}

.live-label[b-1jau8z8rsg] {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.live-figures[b-1jau8z8rsg] {
    display: grid;
    gap: 1.125rem;
    margin: 0;
}

.live-figure[b-1jau8z8rsg] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.live-figure dt[b-1jau8z8rsg] {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

.live-figure dd[b-1jau8z8rsg] {
    margin: 0;
    font-family: var(--font-numeric);
    font-size: clamp(1.75rem, 8vw, 2.125rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

/* A placeholder is not a figure. Drop it to body size so an empty state
   never out-shouts the real numbers beside it. */
.live-figure dd.live-pending[b-1jau8z8rsg] {
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0;
}

.live-note[b-1jau8z8rsg] {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* ===================================================================
 * Pitch sections
 * =================================================================== */

.pitch[b-1jau8z8rsg] {
    padding: 2.5rem 0 0;
}

.pitch-eyebrow[b-1jau8z8rsg] {
    margin: 0 0 0.5rem;
    color: var(--accent-text);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pitch h2[b-1jau8z8rsg] {
    margin: 0;
    max-width: 30rem;
    font-family: var(--font-display);
    font-size: clamp(1.625rem, 6.5vw, 2rem);
    font-weight: 400;
    line-height: 1.15;
}

.pitch-lede[b-1jau8z8rsg] {
    margin: 1rem 0 0;
    max-width: 36rem;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
}

.pitch code[b-1jau8z8rsg],
.model-line code[b-1jau8z8rsg] {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
    background: var(--brand-surface);
    color: var(--brand-strong);
    font-size: 0.875em;
    /* Long identifiers are the point here, so let them break rather than
       push the page sideways on a 390px screen. */
    overflow-wrap: anywhere;
}

/* ===================================================================
 * Claim list
 * ===================================================================
 * Numbered-feeling without numbers: a hairline rule down the left edge
 * carries the eye instead of a bullet.
 */

.claim-list[b-1jau8z8rsg] {
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.125rem;
}

.claim-list li[b-1jau8z8rsg] {
    padding-left: 0.875rem;
    border-left: 2px solid var(--glass-hairline);
    max-width: 36rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.claim-list strong[b-1jau8z8rsg] {
    display: block;
    color: var(--text);
    font-weight: 600;
}

/* ===================================================================
 * Formula
 * =================================================================== */

.formula[b-1jau8z8rsg] {
    margin: 1.25rem 0 0;
    padding: 1rem 1.125rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    /* The equation is one line and must not wrap mid-term; on a narrow
       phone it scrolls sideways within its own pane instead. */
    overflow-x: auto;
}

.formula code[b-1jau8z8rsg] {
    padding: 0;
    background: none;
    color: var(--brand-strong);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ===================================================================
 * Pillars
 * =================================================================== */

.pillar-grid[b-1jau8z8rsg] {
    display: grid;
    gap: 0.875rem;
    margin-top: 1.25rem;
}

.pillar[b-1jau8z8rsg] {
    padding: 1.125rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-2);
}

.pillar h3[b-1jau8z8rsg] {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pillar p[b-1jau8z8rsg] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.pillar-link[b-1jau8z8rsg] {
    display: inline-block;
    margin-top: 0.875rem;
    min-height: 2.75rem;
    /* A link, not a button, but still a touch target: the padding is what
       gets it to 44px without making it look like a control. */
    padding: 0.7rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}

.pillar-link:hover[b-1jau8z8rsg] {
    text-decoration: underline;
}

/* ===================================================================
 * Nemotron's five jobs
 * =================================================================== */

.job-list[b-1jau8z8rsg] {
    margin: 1.25rem 0 0;
    display: grid;
    gap: 0;
}

/* A grouped list, the iOS idiom: hairlines between rows, none above the
   first or below the last. */
.job[b-1jau8z8rsg] {
    padding: 0.875rem 0;
    border-top: 1px solid var(--glass-hairline);
}

.job:first-child[b-1jau8z8rsg] {
    border-top: none;
    padding-top: 0;
}

.job dt[b-1jau8z8rsg] {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.job dd[b-1jau8z8rsg] {
    margin: 0.2rem 0 0;
    max-width: 36rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.model-line[b-1jau8z8rsg] {
    margin: 1.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.6;
}

/* ===================================================================
 * Data sources
 * =================================================================== */

.source-grid[b-1jau8z8rsg] {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.source h3[b-1jau8z8rsg] {
    margin: 0 0 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.source p[b-1jau8z8rsg] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* ===================================================================
 * Closing
 * =================================================================== */

.closing[b-1jau8z8rsg] {
    margin-top: 2.5rem;
    padding: 1.75rem 1.125rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--shadow-2);
    text-align: center;
}

.closing h2[b-1jau8z8rsg] {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 6vw, 1.875rem);
    font-weight: 400;
    line-height: 1.15;
}

.closing p[b-1jau8z8rsg] {
    margin: 0.625rem auto 0;
    max-width: 26rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ===================================================================
 * Desktop
 * =================================================================== */

@media (min-width: 48rem) {
    .landing[b-1jau8z8rsg] {
        padding-bottom: 2.5rem;
    }

    .hero[b-1jau8z8rsg] {
        padding: 3rem 0 3.5rem;
    }

    .hero-lede[b-1jau8z8rsg] {
        font-size: 1.375rem;
    }

    .hero-sub[b-1jau8z8rsg] {
        font-size: 1.0625rem;
    }

    .hero-actions[b-1jau8z8rsg] {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 2rem;
    }

    .hero-actions .primary-button[b-1jau8z8rsg],
    .hero-actions .secondary-button[b-1jau8z8rsg] {
        width: auto;
    }

    .live-band[b-1jau8z8rsg] {
        padding: 1.5rem;
    }

    .live-figures[b-1jau8z8rsg] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .live-figure dd[b-1jau8z8rsg] {
        font-size: 2rem;
    }

    .pitch[b-1jau8z8rsg] {
        padding-top: 4rem;
    }

    .pitch h2[b-1jau8z8rsg] {
        max-width: 34rem;
    }

    .claim-list[b-1jau8z8rsg] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* Four claims here, not three: two columns divide evenly where three
       would leave the fourth stranded on a row of its own. */
    .honesty-block .claim-list[b-1jau8z8rsg] {
        grid-template-columns: repeat(2, 1fr);
    }

    .pillar-grid[b-1jau8z8rsg] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    .source-grid[b-1jau8z8rsg] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem 2rem;
    }

    .closing[b-1jau8z8rsg] {
        margin-top: 4rem;
        padding: 3rem 2rem;
    }

    .closing .hero-actions[b-1jau8z8rsg] {
        justify-content: center;
    }
}
/* _content/MoneyMirror/Features/PhysicalAssets/Inventory.razor.rz.scp.css */
/* "Pocket Ledger" mobile concept (see design/mobile-mockups/c-pocket-ledger.html)
   built for real here, recolored to the site's own palette rather than a
   distinct violet identity. Tokens are declared on this wrapper rather than
   :root - scoped .razor.css files must never redeclare :root, see theme.css
   - and inherit down into InventoryList.razor's markup through the normal
   CSS cascade regardless of each component's own scope attribute. The
   --pl-* names are kept (rather than renamed to the tokens they now equal)
   so the rest of this file and InventoryList.razor.css did not need every
   color property rewritten. Sora/Inter are loaded from App.razor's <head> -
   scoped CSS files cannot use @import. */
.ledger-page[b-5w2vwdmnop] {
    --pl-bg: transparent;
    --pl-card: var(--glass-bg);
    --pl-violet: var(--brand);
    --pl-violet-deep: var(--brand-strong);
    --pl-violet-tint: var(--brand-surface);
    --pl-ink: var(--text);
    --pl-muted: var(--text-muted);
    --pl-shadow: var(--shadow-2);

    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    background: var(--pl-bg);
    color: var(--pl-ink);
    font-family: "Inter", sans-serif;
}

.ledger-header[b-5w2vwdmnop] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.ledger-header h1[b-5w2vwdmnop] {
    margin: 0 0 0.35rem;
    color: var(--pl-ink);
    font-family: "Sora", sans-serif;
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    font-weight: 700;
}

.ledger-subtitle[b-5w2vwdmnop] {
    max-width: 32ch;
    margin: 0;
    color: var(--pl-muted);
    font-size: 0.85rem;
}

.ledger-cta[b-5w2vwdmnop] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: var(--pl-violet);
    color: #fff;
    font-family: "Sora", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--shadow-1);
}

.ledger-cta svg[b-5w2vwdmnop] {
    width: 15px;
    height: 15px;
}

.ledger-cta:hover[b-5w2vwdmnop] {
    background: var(--pl-violet-deep);
    color: #fff;
}

/* ===================================================================
 * Desktop
 * ===================================================================
 * Color already matches at every width - these are the shape changes
 * that make a page-header read the same as every other page's once
 * there is room for a row layout instead of a stack.
 */
@media (min-width: 48rem) {
    .ledger-page[b-5w2vwdmnop] {
        max-width: var(--content-max);
        padding: 0.25rem 0 1rem;
    }

    .ledger-header[b-5w2vwdmnop] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        margin-bottom: 1.75rem;
    }

    .ledger-header h1[b-5w2vwdmnop] {
        font-family: var(--font-display);
        font-size: clamp(2.25rem, 4vw, 3.25rem);
        font-weight: 400;
    }
}
/* _content/MoneyMirror/Features/PhysicalAssets/InventoryList.razor.rz.scp.css */
.ledger-loading[b-ep3mo8q9yj] {
    color: var(--pl-muted);
}

/* ---- Total value hero ---- */
.ledger-total-card[b-ep3mo8q9yj] {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 1.1rem 1.2rem 1rem;
    border: 1px solid var(--glass-border);
    border-radius: 1.4rem;
    background-color: var(--pl-card);
    background-image: radial-gradient(
        20rem 11rem at 88% -25%,
        color-mix(in srgb, var(--accent) 24%, transparent),
        transparent 70%
    );
    color: var(--pl-ink);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-3);
}

.ledger-total-label[b-ep3mo8q9yj] {
    margin: 0 0 0.25rem;
    color: var(--accent-text);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ledger-total-figure[b-ep3mo8q9yj] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-family: "Sora", sans-serif;
    font-size: 2rem;
    font-weight: 700;
}

.ledger-total-figure small[b-ep3mo8q9yj] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pl-muted);
}

.ledger-total-foot[b-ep3mo8q9yj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.6rem;
    color: var(--pl-muted);
    font-size: 0.7rem;
}

.ledger-total-pill[b-ep3mo8q9yj] {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-surface);
    color: var(--accent-text);
    font-weight: 600;
}

/* ---- Icon badge (shared by the empty state and every row) ---- */
.ledger-icon-badge[b-ep3mo8q9yj] {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 0.8rem;
    background: var(--pl-violet-tint);
    color: var(--pl-violet-deep);
}

.ledger-icon-badge svg[b-ep3mo8q9yj] {
    width: 19px;
    height: 19px;
}

.ledger-icon-badge-lg[b-ep3mo8q9yj] {
    width: 52px;
    height: 52px;
}

.ledger-icon-badge-lg svg[b-ep3mo8q9yj] {
    width: 26px;
    height: 26px;
}

/* ---- Empty state ---- */
.ledger-empty[b-ep3mo8q9yj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--pl-muted);
}

/* ---- Item list ---- */
.asset-list[b-ep3mo8q9yj] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.asset-row[b-ep3mo8q9yj] {
    overflow: hidden;
    border-radius: 1.1rem;
    background: var(--pl-card);
    box-shadow: var(--pl-shadow);
}

.asset-row-summary[b-ep3mo8q9yj] {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.asset-row-summary:hover[b-ep3mo8q9yj] {
    background: var(--pl-violet-tint);
}

.asset-row-main[b-ep3mo8q9yj] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.asset-row-name[b-ep3mo8q9yj] {
    overflow: hidden;
    font-family: "Sora", sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-row-meta[b-ep3mo8q9yj] {
    overflow: hidden;
    color: var(--pl-muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-row-value[b-ep3mo8q9yj] {
    flex: none;
    font-family: "Sora", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
}

.asset-row-caret[b-ep3mo8q9yj] {
    flex: none;
    width: 0.65rem;
    height: 0.65rem;
    margin-left: 0.15rem;
    background-color: var(--pl-muted);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: cover;
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}

.asset-row-summary[aria-expanded="true"] .asset-row-caret[b-ep3mo8q9yj] {
    transform: rotate(0deg);
}

.asset-row-detail[b-ep3mo8q9yj] {
    padding: 0 1rem 1.1rem;
    border-top: 1px solid var(--pl-violet-tint);
}

.asset-detail-image[b-ep3mo8q9yj] {
    display: block;
    max-width: 220px;
    margin: 0.9rem 0;
    border-radius: 0.9rem;
}

.asset-detail-facts[b-ep3mo8q9yj] {
    margin: 0.75rem 0;
}

.asset-detail-facts dt[b-ep3mo8q9yj] {
    color: var(--pl-muted);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.asset-detail-facts dd[b-ep3mo8q9yj] {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

/* Bootstrap's .badge defaults to white-space:nowrap, which overflows this
   narrower card - the source label is often a full sentence, not a tag. */
.asset-row-detail .badge[b-ep3mo8q9yj] {
    display: inline-block;
    white-space: normal;
    text-align: left;
    vertical-align: top;
}

.ledger-detail-actions[b-ep3mo8q9yj] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

.ledger-subheading[b-ep3mo8q9yj] {
    margin: 1rem 0 0.5rem;
    font-family: "Sora", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
}

.asset-edit-form[b-ep3mo8q9yj] {
    display: grid;
    gap: 0.5rem;
    padding: 0.85rem;
}

.asset-row-actions[b-ep3mo8q9yj] {
    display: flex;
    gap: 0.5rem;
}

/* ---- Add item ---- */
.ledger-add-card[b-ep3mo8q9yj] {
    padding: 1.1rem;
    border-radius: 1.1rem;
    background: var(--pl-card);
    box-shadow: var(--pl-shadow);
}

.ledger-hint[b-ep3mo8q9yj] {
    margin: 0 0 0.75rem;
    color: var(--pl-muted);
    font-size: 0.78rem;
}

.ledger-add-grid[b-ep3mo8q9yj] {
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 26rem) {
    .ledger-add-grid[b-ep3mo8q9yj] {
        grid-template-columns: 1.4fr 1fr 1fr auto;
        align-items: center;
    }
}

/* ===================================================================
 * Desktop
 * ===================================================================
 * Color already matches the rest of the app at every width now - what
 * is left is shape. A stack of floating cards is a mobile idiom, so
 * here the list becomes the one glass pane with hairline rows every
 * other list already uses (see NetWorthCalculator's .records-card).
 */
@media (min-width: 48rem) {
    .asset-list[b-ep3mo8q9yj] {
        gap: 0;
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-lg);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        box-shadow: var(--shadow-2);
    }

    .asset-row[b-ep3mo8q9yj] {
        border-radius: 0;
        background: none;
        box-shadow: none;
        border-top: 1px solid var(--glass-hairline);
    }

    .asset-row:first-child[b-ep3mo8q9yj] {
        border-top: 0;
    }

    .asset-row-detail[b-ep3mo8q9yj] {
        border-top-color: var(--glass-hairline);
    }

    .ledger-add-card[b-ep3mo8q9yj] {
        border: 1px solid var(--glass-border);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
    }
}
/* _content/MoneyMirror/Features/PhysicalAssets/LiveCameraScanner.razor.rz.scp.css */
.camera-scanner[b-eyez19nf5g] {
    position: relative;
    width: 100%;
    margin-bottom: 1.5rem;
}

.viewfinder-stage[b-eyez19nf5g] {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    background-color: #0b0f19;
    border-radius: var(--radius-lg);
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overscroll-behavior: none;
    box-shadow: var(--shadow-3);
    cursor: crosshair;
}

.camera-video[b-eyez19nf5g],
.freeze-canvas[b-eyez19nf5g] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.freeze-canvas[b-eyez19nf5g] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.contour-overlay[b-eyez19nf5g] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.glowing-contour[b-eyez19nf5g] {
    fill: color-mix(in srgb, var(--accent) 25%, transparent);
    stroke: var(--accent);
    stroke-width: 0.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 85%, transparent))
        drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 45%, transparent));
    animation: contour-pulse-b-eyez19nf5g 2s ease-in-out infinite alternate;
}

@keyframes contour-pulse-b-eyez19nf5g {
    0% {
        fill: color-mix(in srgb, var(--accent) 20%, transparent);
        stroke: var(--accent);
        filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent));
    }
    100% {
        fill: color-mix(in srgb, var(--accent) 35%, transparent);
        stroke: color-mix(in srgb, var(--accent) 80%, white);
        filter: drop-shadow(0 0 8px var(--accent))
            drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 60%, transparent));
    }
}

.prompt-marker[b-eyez19nf5g] {
    stroke-width: 0.4;
    transition: transform 0.15s ease-out;
}

.prompt-marker.positive[b-eyez19nf5g] {
    fill: var(--positive);
    stroke: #ffffff;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--positive) 90%, transparent));
}

.prompt-marker.negative[b-eyez19nf5g] {
    fill: var(--negative);
    stroke: #ffffff;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--negative) 90%, transparent));
}

.viewfinder-hint[b-eyez19nf5g] {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #f8fafc;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    pointer-events: none;
    white-space: nowrap;
}

.viewfinder-placeholder[b-eyez19nf5g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #94a3b8;
    padding: 2rem;
    text-align: center;
}

/* Sits on the dark viewfinder stage, so it borrows the placeholder's colour
   and steps back from it rather than choosing one of its own. */
.permission-help[b-eyez19nf5g] {
    max-width: 24rem;
    font-size: 0.875rem;
    line-height: 1.5;
    opacity: 0.85;
}

.permission-help code[b-eyez19nf5g] {
    font-size: 0.9em;
}

/* Recovery steps live inside the denial alert, which is a light surface - these
   inherit its colour, not the stage's. */
.permission-steps[b-eyez19nf5g] {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.permission-steps li + li[b-eyez19nf5g] {
    margin-top: 0.25rem;
}

.action-bar[b-eyez19nf5g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}

.mode-toggle[b-eyez19nf5g] {
    display: inline-flex;
    gap: 0.1875rem;
    padding: 0.1875rem;
    border: 1px solid var(--glass-hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
}

.mode-btn[b-eyez19nf5g] {
    min-height: 2.25rem;
    padding: 0.25rem 0.85rem;
    border: none;
    border-radius: var(--radius-pill);
    background-color: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        color var(--dur-fast) var(--ease-standard),
        background-color var(--dur) var(--ease-spring);
}

.mode-btn.active.positive[b-eyez19nf5g] {
    background-color: var(--positive);
    color: var(--text-inverse);
    box-shadow: var(--shadow-1);
}

.mode-btn.active.negative[b-eyez19nf5g] {
    background-color: var(--negative);
    color: var(--text-inverse);
    box-shadow: var(--shadow-1);
}
/* _content/MoneyMirror/Features/PhysicalAssets/VideoScanPicker.razor.rz.scp.css */
.video-preview[b-thl69q1zoc] {
    display: block;
    width: 100%;
    max-height: 280px;
    margin-top: 1rem;
    border-radius: var(--radius-md);
    background: #111;
}

.frame-stage[b-thl69q1zoc] {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.frame-stage img[b-thl69q1zoc] {
    display: block;
    max-width: 100%;
    max-height: 560px;
    border-radius: var(--radius-md);
}
.mask-overlay[b-thl69q1zoc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.item-polygon[b-thl69q1zoc] {
    pointer-events: auto;
    cursor: pointer;
    fill: color-mix(in srgb, var(--accent) 20%, transparent);
    stroke: var(--accent);
    stroke-width: 0.5;
    transition:
        fill 0.15s,
        stroke 0.15s;
}

.item-polygon:hover[b-thl69q1zoc] {
    fill: color-mix(in srgb, var(--accent) 40%, transparent);
}

.item-polygon.selected[b-thl69q1zoc] {
    fill: color-mix(in srgb, var(--positive) 35%, transparent);
    stroke: var(--positive);
    stroke-width: 0.7;
}

.item-polygon.selected:hover[b-thl69q1zoc] {
    fill: color-mix(in srgb, var(--positive) 50%, transparent);
}

.item-region[b-thl69q1zoc] {
    position: absolute;
    border: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 0;
    cursor: pointer;
    z-index: 2;
}

.item-region.selected[b-thl69q1zoc] {
    border-color: var(--positive);
    background: color-mix(in srgb, var(--positive) 25%, transparent);
}

.item-region span[b-thl69q1zoc] {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--brand-strong);
    color: var(--text-inverse);
    padding: 2px 5px;
    font-size: 0.8rem;
    max-width: 100%;
    overflow: hidden;
}

.item-region:focus-visible[b-thl69q1zoc] {
    outline: 3px solid white;
    outline-offset: 3px;
}