html, body {
    font-family: 'Figtree', 'Segoe UI', sans-serif;
    background-color: #F6F2EB;
    /* Money, projections, rates, table cells align digit-for-digit (design-
       direction §3, "non-negotiable"). Applied at the root so every figure is
       covered; .ff-num / .ff-cell-right remain explicit hooks. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

main {
    padding: 0;
}

/* ---------------------------------------------------------------------------
   Warm Modern type voice. Fraunces (serif) carries identity on page titles and
   panel headers — "the chapter"; Figtree (sans) handles all dense data — "the
   substance". Serif never enters tables or controls (kills technical clarity).
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6,
.ff-panel-title {
    font-family: 'Fraunces', Georgia, serif;
    font-optical-sizing: auto;
    letter-spacing: -0.01em;
}

/* Money, projections, rates, table cells — align digit-for-digit. Mandatory
   for a finance app (design-direction §3). Opt-in via .ff-num plus the cells
   MudBlazor renders for tables. */
.ff-num,
.mud-table-cell .ff-cell-right,
.ff-table-cards .ff-cell-right {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Soften the MudBlazor list spacing for the dashboard panels. */
.mud-list-item {
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Calm-serious aesthetic — no playful highlights, restrained accents.
   Border-radius now set via MudTheme.LayoutProperties.DefaultBorderRadius. */

/* ---------------------------------------------------------------------------
   Motion. Restrained by design — this app is for couples making consequential
   financial/legal decisions. Most surfaces stay still; the few that animate use
   a single soft cubic-bezier (iOS-native, matches MudBlazor's drawer feel) at
   under 300ms. Anything more would feel out of register.
   --------------------------------------------------------------------------- */

@keyframes fadePaperIn {
    from { opacity: 0; transform: translateY(6px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Apply to wrappers / papers that appear via @if. Enter-only — exit is handled
   by the same @if removing the node, which is acceptable for this app's
   frequency profile (panels that swap, not panels that toggle rapidly). */
.fade-paper-in {
    animation: fadePaperIn 250ms cubic-bezier(0.32, 0.72, 0, 1) backwards;
}

/* Reserved for once-per-user-lifetime moments (e.g. the two-account explainer
   shown after partner-link). Slightly longer so the moment registers. */
.fade-paper-in--prominent {
    animation-duration: 350ms;
}

/* Single chevron that rotates 180° on expand — replaces ExpandMore/ExpandLess
   glyph swap on the inventory row toggles. Target the icon inside the
   MudIconButton (rendered as <svg>). */
.chevron-toggle svg {
    transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1);
}
.chevron-toggle.expanded svg {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------------
   Dashboard panel header — clickable row that toggles MudCollapse. Title +
   meta on the left, count chip + chevron on the right. Keyboard accessible
   via tabindex + Enter/Space (handled in the component).
   --------------------------------------------------------------------------- */
.ff-panel-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    margin: -4px 0;
    padding: 4px 0;
}
.ff-panel-toggle:hover { opacity: 0.85; }
.ff-panel-toggle:focus-visible {
    outline: 2px solid #1F4D45;
    outline-offset: 4px;
    border-radius: 4px;
}
.ff-panel-toggle-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.ff-panel-toggle-left { min-width: 0; }

/* ---------------------------------------------------------------------------
   Accessibility. Respect prefers-reduced-motion for everyone — including the
   MudBlazor defaults (drawer, dialog, snackbar, ripple) we don't author
   directly. Per WCAG 2.1 SC 2.3.3 and vestibular-safety guidance.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   App bar & nav rail (design-direction §6). Serif wordmark; quiet avatar+name
   user cluster replacing the chip+disabled-button pair; nav-rail serif section
   labels and an evergreen left-bar + tinted-fill active state.
   --------------------------------------------------------------------------- */
.ff-wordmark {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.ff-user-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 4px;
}
.ff-user-name {
    color: #2A2622;
    font-weight: 500;
}

/* Nav-group titles ("Decisions", "Profile") read as small serif section labels,
   not generic kit chrome. */
.mud-nav-group > .mud-nav-link .mud-nav-link-text {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

/* Active link: evergreen left-bar + faint tinted fill (replaces the flat
   Material active row). */
.mud-navmenu .mud-nav-link.active {
    border-left: 3px solid #1F4D45;
    background-color: rgba(31, 77, 69, 0.08);
    color: #1F4D45;
}
.mud-navmenu .mud-nav-link {
    border-left: 3px solid transparent;
    transition: background-color 150ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mud-navmenu .mud-nav-link:hover {
    background-color: rgba(31, 77, 69, 0.05);
}

/* ---------------------------------------------------------------------------
   Surface & material (design-direction §4). Borders before shadows: warm-stone
   hairlines carry hierarchy. Where elevation exists, tint it warm toward the
   parchment canvas instead of a generic black blur.
   --------------------------------------------------------------------------- */
.ff-hairline {
    border: 1px solid #E7E0D6;
    box-shadow: none !important;
}
.ff-hairline-bottom {
    border-bottom: 1px solid #E7E0D6;
    box-shadow: none !important;
}

/* Quiet hover-lift on genuinely interactive surfaces only (never static panels).
   ≤2px + warm-tinted shadow, per §5. */
.ff-interactive {
    transition: transform 150ms cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 150ms cubic-bezier(0.32, 0.72, 0, 1);
}
.ff-interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(42, 38, 34, 0.08);
}

/* Tactile press-compress on primary buttons — the only motion Warm Modern adds
   beyond the existing budget (§5). Contained buttons get the warm focus ring. */
.mud-button-filled:active {
    transform: scale(0.98);
}
.mud-button-root {
    transition: transform 80ms ease, background-color 150ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mud-button-root:focus-visible {
    outline: 2px solid #1F4D45;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Local-auth sign-in / register forms. Plain HTML inputs (not MudTextField) so
   the `name` attribute reliably round-trips through static-SSR form POST to
   /api/auth/signin and /api/auth/register.
   --------------------------------------------------------------------------- */
.auth-field { display: block; margin-bottom: 16px; }
.auth-label {
    display: block;
    font-size: 0.875rem;
    color: #6B6258;
    margin-bottom: 4px;
}
.auth-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #E7E0D6;
    border-radius: 8px;
    font: inherit;
    box-sizing: border-box;
}
.auth-input:focus {
    outline: none;
    border-color: #1F4D45;
    box-shadow: 0 0 0 1px #1F4D45;
}
.auth-submit {
    width: 100%;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    background: #1F4D45;
    color: #fff;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    margin-top: 8px;
    transition: background 150ms cubic-bezier(0.32, 0.72, 0, 1), transform 80ms ease;
}
.auth-submit:hover { background: #16382F; }
.auth-submit:active { transform: scale(0.98); }

/* ---------------------------------------------------------------------------
   Mobile layer. Two breakpoints align with MudBlazor defaults: sm=600 (phone)
   and md=960 (small tablet). Phone rules shrink container gutter + downscale
   headings; tablet-and-below rules enforce WCAG 2.5.5 44px touch targets.
   --------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .mud-container { padding-left: 12px !important; padding-right: 12px !important; }

    h4, .mud-typography-h4 { font-size: 1.5rem; line-height: 1.3; }
    h5, .mud-typography-h5 { font-size: 1.25rem; line-height: 1.35; }
    h6, .mud-typography-h6 { font-size: 1.1rem; line-height: 1.4; }

    /* Reclaim space on phone — pa-4 (24px) becomes pa-3 (12px) on .mud-paper.
       Markup keeps pa-4 so desktop is untouched. */
    .mud-paper.pa-4 { padding: 12px !important; }
}

@media (max-width: 960px) {
    .mud-button-root,
    .mud-icon-button { min-height: 44px; min-width: 44px; }

    .mud-nav-link,
    .mud-list-item { min-height: 48px; }
}

/* ---------------------------------------------------------------------------
   Stack utility: opt-in via Class="ff-stack-sm-column" on any MudStack Row=true
   that should flip to vertical on phones. Targets common page-header pattern of
   "title + N action buttons" that crams horizontally below sm.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .ff-stack-sm-column {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .ff-stack-sm-column > * { width: auto !important; }
}

/* Desktop styles for specific cells inside .ff-table-cards. These get reset
   by the @media (max-width:600px) block below when the table flips to cards. */
.ff-table-cards .ff-lens-dot { width: 18px; padding-right: 8px; padding-left: 0; }
.ff-table-cards .ff-cell-right { text-align: right; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Table → card-stack. Opt-in via .ff-table-cards on a parent of <table>. Each
   <td> needs data-label="…" to render as a label/value row on phones. Above
   sm, the table renders normally.
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* !important wins against MudBlazor's .mud-table-root / .mud-table-row /
       .mud-table-cell defaults which set display: table-*. Without it the
       cells stay table-cells and never card-stack. */
    .ff-table-cards table { display: block !important; width: 100% !important; }
    .ff-table-cards thead { display: none !important; }
    .ff-table-cards tbody { display: block !important; }
    .ff-table-cards tr { display: block !important; }

    .ff-table-cards tr {
        border: 1px solid #E7E0D6;
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 8px;
        background: #fff;
    }

    .ff-table-cards td {
        display: flex !important;
        justify-content: space-between;
        align-items: baseline;
        padding: 6px 0;
        border: 0;
        gap: 12px;
        min-width: 0 !important;
        width: auto !important;
        white-space: normal !important;
    }

    .ff-table-cards td::before {
        content: attr(data-label);
        font-weight: 500;
        color: rgba(0, 0, 0, 0.6);
        flex: 0 0 auto;
    }

    /* The right-hand value column wraps and aligns right for crisp reading. */
    .ff-table-cards td > * { text-align: right; }
}