/* TellMyWallet product design contract.
   One visual system across dashboard, forms, data views and native web shell. */

:root,
[data-theme="dark"] {
    --tmw-accent: #39f2a2;
    --tmw-canvas: #050708;
    --tmw-surface: #101720;
    --tmw-surface-raised: #151e28;
    --tmw-control: #070a0e;
    --tmw-line: rgba(255, 255, 255, 0.09);
    --tmw-radius-control: 12px;
    --tmw-radius-card: 18px;
    --tmw-radius-sheet: 20px;
    --tmw-shadow-raised: 0 18px 48px rgba(0, 0, 0, 0.34);
}

[data-theme="light"] {
    --tmw-accent: #24272b;
    --tmw-surface: #ffffff;
    --tmw-surface-raised: #ffffff;
    --tmw-control: #f4f5f2;
    --tmw-line: rgba(10, 15, 20, 0.10);
    --tmw-shadow-raised: 0 14px 32px rgba(20, 24, 28, 0.08);
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --card-radius: 18px;
}

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
}

/* Capture progress explains the current operation instead of rotating unrelated tips. */
.transaction-capture-panel .expense-ai-voice-hint {
    color: var(--text-2);
}

.transaction-capture-panel > .action-busy-overlay--contained {
    background: var(--bg-2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: none;
}

.transaction-capture-panel .action-busy-message {
    box-sizing: border-box;
    max-width: 34rem;
    margin: 0;
    padding: 1rem;
    color: var(--text-1);
    font-size: 1rem;
    line-height: 1.6;
    text-align: center;
    overflow-wrap: anywhere;
}

h1, h2, h3, h4,
.ed-form-title,
.ed-page-title,
.ed-section-title {
    font-family: var(--font);
    letter-spacing: -0.035em;
}

/* Surfaces use the same depth and geometry on every money workflow. */
.ed-card,
.ed-card-ai,
.ed-card-ai--glow,
.ed-card-ai--static,
.ui-form-card,
.ui-data-view,
.coach-metric,
.coach-insight {
    border-radius: var(--tmw-radius-card);
    border-color: var(--tmw-line);
    background: var(--tmw-surface);
    box-shadow: none;
}

.ed-card:hover,
.coach-metric:hover,
.ui-form-card:hover {
    box-shadow: none;
}

.ui-form-card {
    background-image: none;
}

.family-card,
.income-page .family-card,
.owned-assets__summary,
.owned-assets__form,
.owned-assets__sources,
.owned-assets__card,
.wallet-home__month-flow,
.wallet-home__physical-assets,
.wallet-home__balance-grid,
.wallet-capture,
.wallet-home__secondary {
    border-color: var(--tmw-line);
    border-radius: var(--tmw-radius-card);
    background: var(--tmw-surface);
    box-shadow: none;
}

/* Inputs and actions share one comfortable touch geometry. */
.ed-input,
.ui-select,
.ui-textarea,
.ed-btn,
.ed-btn-outline,
.ed-btn-ghost,
.ui-segmented,
.ui-segmented__btn,
.ui-chip {
    border-radius: var(--tmw-radius-control);
}

.ed-input {
    min-height: 46px;
    padding: 12px 14px;
    background: var(--tmw-control);
    border-color: var(--tmw-line);
    box-shadow: none;
}

.ed-input:focus {
    border-color: color-mix(in srgb, var(--accent) 66%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.ed-btn,
.bg-gradient-brand,
.bg-gradient-brand-h {
    background: var(--accent);
    background-image: none;
    box-shadow: none;
}

.ed-btn:hover {
    transform: none;
    background: var(--accent-hover);
    box-shadow: none;
}

.ed-btn-outline,
.ed-btn-ghost {
    box-shadow: none;
}

.tmw-disclosure {
    border: 1px solid var(--tmw-line);
    border-radius: var(--tmw-radius-control);
    background: color-mix(in srgb, var(--tmw-surface-raised) 68%, transparent);
    overflow: hidden;
}

.tmw-disclosure > summary {
    min-height: 58px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--text-1);
    cursor: pointer;
    list-style: none;
}

.tmw-disclosure > summary::-webkit-details-marker { display: none; }
.tmw-disclosure > summary span:first-child { display: grid; gap: 3px; }
.tmw-disclosure > summary strong { font-size: 13px; }
.tmw-disclosure > summary small { color: var(--text-3); font-size: 11px; line-height: 1.35; }
.tmw-disclosure > summary span:last-child { color: var(--accent); font-size: 20px; transition: transform var(--duration) var(--ease); }
.tmw-disclosure[open] > summary span:last-child { transform: rotate(45deg); }
.tmw-disclosure__body { display: grid; gap: 12px; padding: 14px; border-top: 1px solid var(--tmw-line); }

.transaction-entry-form { display: grid; gap: 10px; }
.transaction-entry-form--income .income-capture { padding: 12px; border-radius: var(--tmw-radius-control); background: color-mix(in srgb, var(--accent) 7%, var(--tmw-surface)); }
.transaction-entry-form--income .income-form-card { margin: 0; padding: 12px 14px; }
.transaction-entry-form--income .income-cat-scroll { margin: 0 0 10px; }
.transaction-entry-form--income .income-primary-fields { display: grid; gap: 6px; }
.transaction-entry-form--income .income-save-btn { margin-top: 2px; min-height: 48px; }

.theme-toggle,
.theme-toggle-btn,
.home-launcher-icon,
.home-launcher-icon-wrap,
.pm-sheet,
.pm-modal {
    border-radius: var(--tmw-radius-control);
}

.text-gradient-brand {
    background: none;
    color: var(--accent);
    -webkit-text-fill-color: currentColor;
}

/* Language selection — same product, same structure on web and native. */
.language-screen {
    min-height: 100dvh;
    width: min(100%, 480px);
    margin: 0 auto;
    padding: calc(48px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: var(--text-0);
}

.language-screen__brand {
    text-align: left;
}

.language-screen__brand .brand-logo {
    margin: 0 0 12px;
}

.language-screen__brand p {
    max-width: 34ch;
    color: var(--text-3);
    font-size: 14px;
    line-height: 1.55;
}

.language-screen__panel {
    align-self: center;
}

.language-screen__eyebrow {
    margin: 0 0 9px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.language-screen__panel h1 {
    margin: 0 0 24px;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.05;
}

.language-screen__choices {
    display: grid;
    gap: 8px;
}

.language-screen__choices button {
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 8px;
    color: var(--text-1);
    text-align: left;
    font: 600 14px/1 var(--font);
    border: 1px solid var(--tmw-line);
    border-radius: var(--tmw-radius-control);
    background: var(--tmw-surface);
}

.language-screen__choices button:hover,
.language-screen__choices button:focus-visible {
    border-color: var(--accent-border);
    outline: none;
}

.language-screen__choices strong {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--on-accent);
    font-size: 11px;
    border-radius: 3px;
    background: var(--accent);
}

/* Light mode uses ink, not neon, as its interaction colour. */
[data-theme="light"] .guest-auth__sent-title,
[data-theme="light"] .ed-form-link button,
[data-theme="light"] .ed-form-link a {
    color: var(--tmw-accent) !important;
}


[data-theme="light"] .brand-logo--mark {
    color: #ffffff;
    background: var(--tmw-accent);
}

[data-theme="light"] .pwa-install-tag,
[data-theme="light"] .pwa-install-badge,
[data-theme="light"] .home-launcher-icon,
[data-theme="light"] .home-launcher-icon-wrap.fu-app-icon,
[data-theme="light"] .profile-avatar-fallback {
    color: var(--tmw-accent);
}

[data-theme="light"] .home-launcher-icon,
[data-theme="light"] .home-launcher-icon-wrap.fu-app-icon,
[data-theme="light"] .profile-avatar-fallback {
    background: #f1f2f3;
    border-color: var(--tmw-line);
    box-shadow: none;
}

.language-screen__choices i {
    color: var(--text-4);
    font-style: normal;
}

.language-screen__version {
    color: var(--text-4);
    font-size: 10px;
}

.app-build-mark {
    position: fixed;
    left: calc(8px + env(safe-area-inset-left, 0px));
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    color: var(--text-3, #888);
    font: 500 10px/1.2 ui-monospace, SFMono-Regular, monospace;
    letter-spacing: .02em;
    opacity: .4;
    pointer-events: none;
    user-select: none;
}

/* Existing semantic "purple" roles inherit the product signal, not AI decoration. */
.intro-tag--purple,
.coach-metric--purple .coach-metric-value,
.provider-icon,
.provider-key-label {
    color: var(--accent) !important;
}

.ed-card-ai,
.ed-card-ai--glow,
.coach-metric--purple,
.provider-card,
.ai-workspace {
    background-image: none !important;
    border-color: var(--tmw-line) !important;
    box-shadow: none !important;
}

@media (max-width: 520px) {
    :root,
    [data-theme="dark"],
    [data-theme="light"] {
        --page-pad: 14px;
        --page-pad-top: 8px;
        --section-gap: 18px;
        --block-gap: 12px;
        --card-pad: 15px;
        --card-gap: 12px;
    }

    .ed-page { gap: 12px; }
    .ed-hero { margin-bottom: 2px; }
    .ed-hero .coach-title { font-size: clamp(27px, 8vw, 34px); }
    .ed-hero .coach-sub { margin-top: 6px; font-size: 13px; line-height: 1.45; }
    .family-card,
    .income-page .family-card { padding: 14px; }

    .language-screen {
        padding-top: calc(34px + env(safe-area-inset-top, 0px));
    }

    .language-screen__panel h1 {
        font-size: clamp(32px, 8.8vw, 36px);
        line-height: 1.04;
        letter-spacing: -0.045em;
    }

    .language-screen__brand p,
    .guest-auth__tagline {
        font-size: 13px;
        line-height: 1.55;
    }

    .legal-doc-title,
    .ed-page-title,
    .ed-form-title {
        letter-spacing: -0.04em;
    }

    .legal-doc-p {
        font-size: 13px;
        line-height: 1.68;
    }

    .legal-doc-h2 {
        font-size: 15px;
        letter-spacing: -0.02em;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* A forecast lives beside entry, but must never look like an already-booked transaction. */
.cashflow-plan-composer {
    margin: 18px 0 4px;
    border: 1px solid var(--tmw-line);
    border-radius: var(--tmw-radius-sheet);
    background: var(--tmw-surface-raised);
    overflow: hidden;
}

.cashflow-plan-composer__toggle {
    width: 100%;
    min-height: 64px;
    padding: 12px 16px;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    text-align: left;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.cashflow-plan-composer__toggle span:first-child { display: grid; gap: 3px; }
.cashflow-plan-composer__toggle strong { font-size: 14px; }
.cashflow-plan-composer__toggle small { opacity: .65; line-height: 1.35; }
.cashflow-plan-composer__toggle span:last-child { font-size: 22px; line-height: 1; }
.cashflow-plan-composer__body { border-top: 1px solid var(--tmw-line); padding: 16px; display: grid; gap: 14px; }
.cashflow-plan-composer__body > .family-hint { margin: 0; }
.cashflow-plan-composer__field { display: grid; gap: 7px; font-size: 13px; }
.cashflow-plan-composer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cashflow-plan-composer__date-row { display: flex; gap: 8px; margin: 8px 0; }
.cashflow-plan-composer__date-row .ed-input { min-width: 0; flex: 1; }
.cashflow-plan-composer__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cashflow-plan-composer__actions .ed-action-btn { min-height: 42px; }
.cashflow-plan-composer__preview, .cashflow-plan-composer__plans { padding-top: 12px; border-top: 1px solid var(--tmw-line); }
.cashflow-plan-composer__preview ol { margin: 10px 0; padding-left: 22px; }
.cashflow-plan-composer__preview li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.cashflow-plan-composer__preview small { opacity: .68; }
.cashflow-plan-composer__plans { display: grid; gap: 10px; }
.cashflow-plan-composer__plan { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--tmw-line); font-size: 12px; }
.cashflow-plan-composer__plan > span:first-child { flex: 1 1 180px; }

.cashflow-matcher {
    padding: 14px;
    border: 1px solid var(--tmw-line);
    border-radius: var(--tmw-radius-card);
    background: var(--tmw-surface);
    display: grid;
    gap: 14px;
}
.cashflow-matcher__head p { margin: 4px 0 0; }
.cashflow-matcher__window { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; }
.cashflow-matcher__window label { flex: 1 1 135px; min-width: 0; display: grid; gap: 5px; font-size: 12px; }
.cashflow-matcher__window .ed-action-btn { min-height: 42px; }
.cashflow-matcher__periods { display: grid; gap: 8px; }
.cashflow-matcher__period {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    padding: 10px 0; border-top: 1px solid var(--tmw-line);
}
.cashflow-matcher__period > div { display: grid; gap: 3px; min-width: 0; }
.cashflow-matcher__period span, .cashflow-matcher__period small { font-size: 12px; }
.cashflow-matcher__warning { color: #db7979; }
.cashflow-matcher__chooser { border-top: 1px solid var(--tmw-line); padding-top: 12px; display: grid; gap: 10px; }
.cashflow-matcher__candidate { display: flex; gap: 10px; align-items: start; padding: 10px;
    border: 1px solid var(--tmw-line); border-radius: var(--tmw-radius-control); cursor: pointer; font-size: 12px; }
.cashflow-matcher__candidate input, .cashflow-matcher__confirm input { flex: none; margin-top: 2px; }
.cashflow-matcher__confirm { display: flex; align-items: start; gap: 8px; font-size: 12px; line-height: 1.45; }
.cashflow-matcher__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cashflow-matcher__actions .ed-action-btn { min-height: 42px; }
.cashflow-matcher__amount-editor { grid-column: 1 / -1; display: grid; gap: 8px; padding: 10px;
    border: 1px solid var(--tmw-line); border-radius: 12px; }
.cashflow-matcher__amount-editor small { font-size: 12px; }

@media (max-width: 520px) {
    .cashflow-plan-composer__grid { grid-template-columns: 1fr; }
    .cashflow-plan-composer__actions .ed-action-btn { flex: 1 1 120px; }
    .cashflow-matcher__window .ed-action-btn, .cashflow-matcher__actions .ed-action-btn { flex: 1 1 100%; }
}

/* Shared, compact entry forms: primary fields first, optional details on demand. */
.unified-form {
    display: flex; flex-direction: column; gap: 14px;
    min-width: 0; padding: 16px; border-radius: 18px;
    background: var(--bg-1); border: 1px solid var(--border);
}
.unified-form .ui-form-card__body,
.unified-form .payment-entry__fields,
.form-details__body { display:flex; flex-direction:column; gap:14px; min-width:0; }
.unified-form .ed-input-group,
.unified-form .ui-form-field,
.unified-form .ui-money,
.unified-form .ed-actions { margin:0; min-width:0; }
.unified-form label { font-size:14px; line-height:1.4; }
.unified-form input,.unified-form select,.unified-form textarea { max-width:100%; min-width:0; box-sizing:border-box; }
.unified-form .ed-input { width:100%; min-height:44px; }
.unified-form h2,.unified-form h3 { margin:0; }
.form-details { border-top:1px solid var(--border); padding-top:10px; min-width:0; }
.form-details > summary { cursor:pointer; color:var(--text-2); font-size:14px; padding:8px 0; min-height:44px; box-sizing:border-box; }
.form-details__body { padding-top:8px; }
.unified-form .expense-ai { margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
.unified-form .expense-ai > .field-with-help { display:none; }
.unified-form .expense-ai-voice { padding:8px 0; }
.unified-form .expense-ai-mic { width:52px; height:52px; }
.unified-form .expense-ai-voice-hint { font-size:12px; margin:8px 0 0; }
.payment-entry__body.unified-form { border:0; border-radius:0; }
.unified-form--nested { border:0; padding:12px 0; border-radius:0; }
.form-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:520px) {
 .unified-form .owned-assets__row,.unified-form .cashflow-plan-composer__grid { grid-template-columns:minmax(0,1fr); }
}

.unified-form .payment-entry__fields { margin:0; padding:0; border:0; min-inline-size:0; }
.unified-form > .ui-form-card__body { padding:0; }

/* Quiet navigation and a single help visual language; retain large touch targets. */
.app-header-brand { display:flex; align-items:center; min-width:0; min-height:44px; padding:0 4px; border:0; background:transparent; color:var(--text-0); cursor:pointer; }
.app-header-brand .brand-logo { font-size:17px; white-space:nowrap; }
.app-header-brand .brand-logo__symbol { width:23px; height:23px; }
.app-header .app-header-actions { margin-left:auto; gap:2px; }
.app-header .app-header-menu { background:transparent; border-color:transparent; box-shadow:none; }
.helptip .helptip-trigger,.app-header .page-help-trigger {
 display:inline-flex; align-items:center; justify-content:center;
 width:44px; height:44px; min-width:44px; min-height:44px;
 padding:0; border:0; border-radius:12px; background:transparent;
 box-shadow:none; color:var(--text-3);
}
.helptip .helptip-trigger-icon,.app-header .page-help-trigger-icon { width:18px; height:18px; }
.helptip-trigger:hover,.page-help-trigger:hover { color:var(--text-1); background:var(--bg-2); }
.helptip-trigger:focus-visible,.page-help-trigger:focus-visible,.app-header-brand:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.app-sidebar--mobile-drawer .mobile-drawer-nav__quick { padding:10px 0 16px; border:0; background:transparent; box-shadow:none; }
.app-sidebar--mobile-drawer .mobile-drawer-nav__quick-action { border-radius:12px; min-height:46px; font-weight:600; }
.app-sidebar--mobile-drawer .mobile-drawer-nav__section { font-size:10px; letter-spacing:.09em; color:var(--text-3); margin:14px 10px 6px; }
.app-sidebar--mobile-drawer .mobile-drawer-nav__group { border:0; border-top:1px solid var(--border-subtle); border-radius:0; background:transparent; margin-top:10px; padding-top:6px; }
.app-sidebar--mobile-drawer .mobile-drawer-nav__group summary { padding:10px; min-height:44px; border:0; font-weight:600; font-size:13px; }
.app-sidebar--mobile-drawer .mobile-drawer-nav__group-icon,
.app-sidebar--mobile-drawer .mobile-drawer-nav__row-icon { background:transparent; border-radius:0; width:24px; height:24px; color:var(--text-3); }
.app-sidebar--mobile-drawer .mobile-drawer-nav__row { min-height:44px; padding:8px 12px; border-radius:10px; gap:12px; font-size:14px; }
.app-sidebar--mobile-drawer .mobile-drawer-nav__row.active { background:var(--accent-dim); color:var(--text-0); }
.app-sidebar--mobile-drawer .mobile-drawer-nav__row.active .mobile-drawer-nav__row-icon { color:var(--accent); background:transparent; }
.app-sidebar--mobile-drawer .app-sidebar-dock-btn.danger { width:auto; min-height:44px; padding:8px 12px; background:transparent; border:0; }
@media (max-width:380px) {
 .app-header-brand .brand-logo { font-size:15px; }
 .app-header-brand .brand-logo__symbol { width:20px;height:20px; }
 .app-header .app-header-link { font-size:12px;padding:0 5px; }
}

.receipt-photo-picker { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; color: var(--text-2); cursor: pointer; }
.receipt-photo-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.receipt-photo-picker:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* Compact dashboard: separate cashflow and personal asset estimates. */
.wallet-home { gap: 10px; }
.wallet-home__summary { padding: 18px 20px; }
.wallet-home__net { font-size: clamp(30px, 8vw, 38px); }
.wallet-home__lifetime { margin-top: 8px; gap: 6px 16px; }
.wallet-home__compact-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wallet-home__compact-stats > :only-child { grid-column: 1 / -1; }
.wallet-home__asset-summary, .wallet-home__compact-stats .wallet-home__month-flow {
    display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0;
    padding: 12px; border: 1px solid var(--border); border-radius: 14px;
    background: var(--bg-1); color: var(--text-1); text-decoration: none;
}
.wallet-home__asset-summary > span { font-size: 11px; font-weight: 600; display: flex; justify-content: space-between; gap: 4px; }
.wallet-home__asset-summary strong, .wallet-home__compact-stats .wallet-home__month-flow strong { font-size: clamp(17px, 5vw, 22px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.wallet-home__asset-summary small { font-size: 10px; color: var(--text-2); }
.wallet-home__asset-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wallet-home__compact-stats .wallet-home__eyebrow { letter-spacing: .02em; font-size: 10px; }