:root{
/* Neutral page chrome (less beige, slightly cool gray) */
--bg:#E6E7EA;
--card:#E6E7EA;
/* Calendar day strip + in-month day cells (below global nav) */
--cal-surface:#F9FAFB;
--text:#111827;
--muted:#4b5563;
/* Palette */
/* Forest green accent (replaces light blue theme accent) */
--accent:#0B3D2E;
/* Prominent outline for primary surface cards (auth, wizard, panels). */
--card-border-accent: 2px solid #0B4F3A;
--danger:#a73744; /* darker maroon-leaning red */
--ok:#005a4a; /* green from palette */
--border: rgba(0,0,0,0.10);
/* Text fields: a touch darker than --border for readability on card surfaces */
--input-border: rgba(0,0,0,0.16);
/* Shared button radius (use across the site) */
--btn-radius: 14px;
/* Sticky strips sit below the primary nav (tabs); keep in sync with .top-nav height */
--app-top-nav-offset: 76px;
}
*{ box-sizing:border-box; }
html{
/* Matches footer/nav so no neutral strip shows past the full-bleed green bar */
background: var(--accent);
}
body{
margin:0;
min-height: 100vh;
min-height: 100dvh;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
background: var(--bg);
color: var(--text);
overflow-x: hidden;
}
/* Login page */
body.login-page .container{
max-width: 1920px;
}
body.login-page:not(.signup-page):not(.invite-page) .container{
display: flex;
flex-direction: column;
min-height: 100dvh;
}
body.signup-page .card{
background: var(--cal-surface);
}
/* Login page: match calendar white surface + dark green outline */
body.login-page .auth-section.card{
background: var(--cal-surface);
border: 1px solid rgba(11, 61, 46, 0.12);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 14px 36px rgba(11, 61, 46, 0.08);
}
body.login-page:not(.signup-page):not(.invite-page) #loginSection.auth-section.card{
border-color: rgba(11, 61, 46, 0.12);
border-radius: 18px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 2px 6px rgba(11, 61, 46, 0.04),
0 14px 32px rgba(11, 61, 46, 0.08),
0 28px 60px rgba(15, 23, 42, 0.07);
}
/* Login: two-column split — brand left, form right; confident scale, intentional columns. */
body.login-page:not(.signup-page):not(.invite-page) .container > .grid.login-page__grid{
flex: 1 1 auto;
min-height: 0;
width: min(1120px, 92%);
margin-left: auto;
margin-right: auto;
margin-top: clamp(2px, 1.2vh, 14px);
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
padding: clamp(14px, 2.8vh, 32px) clamp(14px, 2.4vw, 24px) clamp(6px, 1vh, 10px);
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__split{
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
gap: clamp(20px, 3vw, 40px);
align-items: start;
width: min(100%, 960px);
margin-left: auto;
margin-right: auto;
padding-top: clamp(6px, 1.5vh, 16px);
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand{
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0.4rem;
max-width: 26rem;
min-width: 0;
min-height: 0;
padding: clamp(2px, 0.8vh, 10px) clamp(0.25rem, 1.5vw, 1rem) 0 0;
align-self: start;
transform: none;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand-ambient{
display: none;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand-head,
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand-sub{
position: relative;
z-index: 1;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand-head{
margin: 0;
font-size: clamp(1.62rem, 2.75vw, 2.22rem);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.032em;
color: color-mix(in srgb, var(--accent) 94%, #000);
max-width: 18ch;
text-wrap: balance;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand-sub{
margin: 0;
font-size: clamp(1rem, 1.5vw, 1.12rem);
font-weight: 480;
line-height: 1.52;
color: rgba(51, 65, 85, 0.78);
max-width: 30ch;
text-wrap: pretty;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__form-col{
display: flex;
justify-content: center;
align-items: flex-start;
min-width: 0;
padding-top: clamp(2px, 0.8vh, 10px);
align-self: start;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__form-col #loginSection{
width: 100%;
max-width: 440px;
margin-left: 0;
}
@media (max-width: 820px){
body.login-page:not(.signup-page):not(.invite-page) .container > .grid.login-page__grid{
padding: clamp(8px, 2vh, 16px) clamp(12px, 3vw, 20px) clamp(8px, 2vh, 16px);
width: min(560px, 94%);
justify-content: flex-start;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__split{
grid-template-columns: 1fr;
gap: 16px;
align-items: stretch;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__form-col{
order: -1;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__form-col #loginSection{
max-width: none;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand{
max-width: none;
min-height: 0;
padding: 0 0 0.25rem;
align-items: center;
text-align: center;
transform: none;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand-ambient{
display: none;
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand-head{
max-width: 20ch;
font-size: clamp(1.38rem, 5.2vw, 1.72rem);
}
body.login-page:not(.signup-page):not(.invite-page) .login-page__brand-sub{
max-width: 32ch;
font-size: clamp(0.94rem, 3.5vw, 1.05rem);
}
body.login-page:not(.signup-page):not(.invite-page) #loginSection > .auth-section__head{
padding: 16px 18px 10px;
}
body.login-page:not(.signup-page):not(.invite-page) #loginSectionBody.auth-section__body{
padding: 14px 18px 18px;
}
body.login-page:not(.signup-page) .login-page__reassure-text{
max-width: 17.5rem;
gap: 0.28rem 0.72rem;
}
body.login-page:not(.signup-page) .login-page__signup-prompt{
text-align: center;
}
}
body.login-page.signup-page:not(.account-setup-page):not(.invite-page) .container > .grid{
margin-top: max(18px, calc(36px - 10vh));
}
/* Account setup: ultra-soft elevation (wizard shell + in-flow card tiles) */
body.account-setup-page{
--as-wizard-column: min(640px, 94%);
--as-card-pad-x: 32px;
--as-card-pad-y: 19px;
--as-shell-min-height: 440px;
--as-shell-actions-minh: 58px;
--as-helper-size: 0.8125rem;
--as-helper-line: 1.35;
--as-helper-color: rgba(100, 116, 139, 0.78);
--as-label-primary-color: rgba(51, 65, 85, 0.9);
--as-label-secondary-color: rgba(100, 116, 139, 0.82);
--as-ultra-soft-card-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
0 10px 32px rgba(15, 23, 42, 0.07),
0 32px 72px rgba(11, 61, 46, 0.055);
--as-ultra-soft-tile-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 5px 18px rgba(0, 0, 0, 0.042);
/* Slightly warmer neutral than global --bg while staying quiet */
background:
radial-gradient(120% 70% at 50% -8%, rgba(11, 61, 46, 0.055), transparent 58%),
linear-gradient(180deg, #e9eae6 0%, #e7e8e8 52%, #e4e6e9 100%);
}
/* Account setup: allow full-width stacked cards */
body.account-setup-page .container{
max-width: 1920px;
min-height: 100dvh;
display: flex;
flex-direction: column;
}
body.account-setup-page .container > .grid{
width: var(--as-wizard-column);
max-width: 640px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-left: auto;
margin-right: auto;
margin-top: clamp(-56px, calc(4vh - 52px), -40px);
margin-bottom: 0;
padding: clamp(4px, 0.8vh, 10px) 0 14px;
}
body.account-setup-page .container > .grid:has(#accountSetupWizard[data-step="4"]){
width: min(580px, 92vw);
max-width: 580px;
padding: clamp(10px, 2.5vh, 22px) 0 clamp(28px, 5vh, 48px);
margin-top: 0;
margin-bottom: 0;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
body.account-setup-page:has(#accountSetupWizard[data-step="4"]){
background:
radial-gradient(ellipse 88% 52% at 50% 22%, rgba(255, 255, 255, 0.55) 0%, transparent 58%),
radial-gradient(120% 70% at 50% -8%, rgba(11, 61, 46, 0.06), transparent 58%),
linear-gradient(180deg, #e8e9e5 0%, #e6e7e7 48%, #e2e4e8 100%);
}
body.account-setup-page:has(#accountSetupWizard[data-step="4"]) .container{
min-height: 100dvh;
min-height: 100svh;
justify-content: flex-start;
padding-top: clamp(6px, 1.2vh, 14px);
}
body.account-setup-page:has(#accountSetupWizard[data-step="4"]) .account-setup-wizard{
margin-top: clamp(4px, 1vh, 12px);
margin-bottom: 0;
flex-shrink: 0;
max-width: 580px;
}
body.account-setup-page .container > .grid:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active){
width: min(760px, 92vw);
max-width: 760px;
margin-top: clamp(-28px, calc(2vh - 18px), 8px);
padding-top: clamp(8px, 1.5vh, 18px);
padding-bottom: clamp(24px, 4vh, 40px);
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-wizard{
max-width: 760px;
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-wizard__eyebrow{
font-size: clamp(1.34rem, 2.4vw, 1.58rem);
white-space: normal;
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-wizard__subeyebrow{
margin-bottom: clamp(0.65rem, 1.2vw, 0.85rem);
font-size: clamp(0.9rem, 1.35vw, 1rem);
line-height: 1.45;
max-width: 44ch;
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-wizard__reassurance:not([hidden]){
margin-top: calc(var(--as-wizard-title-subtitle-gap) * 0.72);
}
body.account-setup-page .container > .grid:has(#accountSetupWizardPanel2[data-step3-phase="form"].account-setup-wizard__panel--active),
body.account-setup-page:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .container > .grid:has(#accountSetupWizard){
width: min(560px, 90vw);
max-width: 560px;
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-wizard,
body.account-setup-page:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-wizard{
max-width: 560px;
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="form"]),
body.account-setup-page:has(#accountSetupWizardPanel3[data-expense-phase="form"]){
--as-card-pad-x: 32px;
}
/* Transaction form: balanced hero → card rhythm */
body.account-setup-page .container > .grid:has(#accountSetupWizardPanel2[data-step3-phase="form"].account-setup-wizard__panel--active),
body.account-setup-page:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .container > .grid:has(#accountSetupWizard){
margin-top: clamp(10px, 1.6vh, 18px);
padding-top: 0;
padding-bottom: clamp(40px, 6vh, 64px);
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-wizard,
body.account-setup-page:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-wizard{
margin-top: clamp(4px, 0.8vh, 10px);
margin-bottom: 6px;
}
body.account-setup-page input[type="number"]::-webkit-outer-spin-button,
body.account-setup-page input[type="number"]::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
body.account-setup-page input[type="number"]{
-moz-appearance: textfield;
appearance: textfield;
}
body.account-setup-page .top-nav{
flex-shrink: 0;
padding: 5px 0 3px;
}
body.account-setup-page:has(#accountSetupWizard[data-step="4"]) .top-nav{
padding: 3px 0 2px;
}
body.account-setup-page:has(#accountSetupWizard[data-step="4"]) .top-nav .app-title--logo .app-logo{
height: 38px;
transform: translateY(1px);
}
body.account-setup-page:has(#accountSetupWizard[data-step="4"]) .top-nav .app-title--logo > a{
padding: 2px 10px 2px 5px;
}
/* Onboarding: hide competing footer + repeated trust strip — wizard is the focal point */
body.account-setup-page .onboarding-footer,
body.account-setup-page .account-setup-trust-strip,
body.account-setup-page .account-setup-trust-strip-spacer{
display: none !important;
}
/* Onboarding/auth nav: compact wordmark — no pill badge */
/* Dark nav: compact wordmark + icon (no capsule) */
body.login-page.signup-page .top-nav .app-title--logo > a,
body.account-setup-page .top-nav .app-title--logo > a,
body.invite-page .top-nav .app-title--logo > a,
body.plans-page .top-nav .app-title--logo > a,
body.admin-page .top-nav .app-title--logo > a,
body[data-bw-view] .top-nav .app-title--logo > a,
body.landing-page .top-nav .app-title--logo > a{
padding: 4px 12px 4px 6px;
background: transparent;
border: none;
box-shadow: none;
}
body.login-page.signup-page .top-nav .app-title--logo .app-logo,
body.account-setup-page .top-nav .app-title--logo .app-logo,
body.invite-page .top-nav .app-title--logo .app-logo,
body.plans-page .top-nav .app-title--logo .app-logo,
body.admin-page .top-nav .app-title--logo .app-logo,
body[data-bw-view] .top-nav .app-title--logo .app-logo,
body.landing-page .top-nav .app-title--logo .app-logo{
width: auto;
max-width: min(300px, 62vw);
height: 44px;
}
body.account-setup-page .top-nav .app-title--logo .app-logo{
transform: translateY(2px);
}
/* Login only: align logo to far-left like the app. */
body.login-page:not(.signup-page):not(.invite-page) .top-nav{
padding: 5px 0 4px;
flex-shrink: 0;
}
body.login-page:not(.signup-page):not(.invite-page) .top-nav__inner.top-nav__inner--simple{
box-sizing: border-box;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
padding: 0 12px 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: center;
justify-items: stretch;
gap: 0;
position: relative;
}
body.login-page:not(.signup-page):not(.invite-page) .top-nav__inner--simple .top-nav__title{
justify-content: flex-start;
width: auto;
max-width: 100%;
min-width: 0;
padding-left: 6px;
}
body.login-page:not(.signup-page):not(.invite-page) .top-nav__inner--simple .app-title{
text-align: left;
}
body.login-page:not(.signup-page):not(.invite-page) .top-nav .app-title--logo > a{
padding: 4px 12px 4px 6px;
background: transparent;
border: none;
box-shadow: none;
}
body.login-page:not(.signup-page):not(.invite-page) .top-nav .app-title--logo .app-logo{
display: block;
width: auto;
max-width: min(300px, 62vw);
height: 44px;
object-fit: contain;
object-position: 0 50%;
}
/* Invite page: keep title where it is, push Home to the far right */
body.invite-page .top-nav .top-nav__inner.top-nav__inner--simple{
grid-template-columns: 1fr auto;
justify-items: start;
}
body.invite-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__actions{
justify-self: end;
gap: 8px;
}
/* Plans / admin / signup page header: title left, action right */
body.plans-page .top-nav .top-nav__inner.top-nav__inner--simple,
body.admin-page .top-nav .top-nav__inner.top-nav__inner--simple,
body.signup-page .top-nav .top-nav__inner.top-nav__inner--simple{
grid-template-columns: 1fr auto;
justify-items: start;
}
body.plans-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__actions,
body.admin-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__actions,
body.signup-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__actions{
justify-self: end;
gap: 8px;
}
body.plans-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__title,
body.admin-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__title,
body.signup-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__title{
justify-content: flex-start;
width: auto;
padding-left: 10px;
}
body.plans-page .top-nav .top-nav__inner.top-nav__inner--simple .app-title,
body.admin-page .top-nav .top-nav__inner.top-nav__inner--simple .app-title,
body.signup-page .top-nav .top-nav__inner.top-nav__inner--simple .app-title{
text-align: left;
}
/* Landing: first column shrink-wraps the wordmark so it sits flush-left (not in a wide 1fr track). */
body.landing-page .top-nav .top-nav__inner.top-nav__inner--simple{
grid-template-columns: auto 1fr;
justify-items: start;
}
body.landing-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__actions{
justify-self: end;
gap: 8px;
}
body.landing-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__title{
justify-content: flex-start;
width: auto;
min-width: 0;
padding-left: 8px;
}
body.landing-page .top-nav .top-nav__inner.top-nav__inner--simple .app-title{
text-align: left;
}
body.landing-page .top-nav__actions a.top-nav__logout{
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
body.landing-page{
overflow-x: hidden;
color: rgba(15, 23, 42, 0.98);
/* Single source of truth for the entire page's horizontal alignment.
Hero, insight, demo, calendar peek, below-preview, emotional band,
and the footer inner all share this width so left/right edges line
up on every section instead of drifting between layouts. */
--landing-content-max: min(76rem, calc(100vw - 2rem));
/* Vertical rhythm: tightened again — the previous gap left noticeable
"white islands" between sections. The page should feel architected,
not assembled. */
--landing-section-gap: clamp(1.12rem, 2.31vw, 1.94rem);
--landing-section-gap-tight: clamp(0.62rem, 1.49vw, 0.95rem);
--landing-rail: var(--landing-content-max);
--landing-below-max: var(--landing-content-max);
}
body.landing-page .landing-main{
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
/* Slight top breathing room below the nav; bottom is modest so the
footer feels intentionally connected to the content above it. */
padding: clamp(0.85rem, 1.6vw, 1.35rem) 0 clamp(0.75rem, 1.5vw, 1.1rem);
/* Calm, premium canvas (less "blocks on a page") */
background:
radial-gradient(900px 260px at 50% 0%, rgba(4, 120, 87, 0.085) 0%, rgba(4, 120, 87, 0) 72%),
linear-gradient(180deg, rgba(248, 250, 249, 0.92) 0%, rgba(255, 255, 255, 0) 42%);
}
/* Centered column: hero → insight → preview → calendar → lower bands */
body.landing-page .landing-shell{
width: 100%;
max-width: var(--landing-content-max);
margin-left: auto;
margin-right: auto;
padding-left: max(0.85rem, env(safe-area-inset-left));
padding-right: max(0.85rem, env(safe-area-inset-right));
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--landing-section-gap);
}
/* Subtle rhythm bands so major blocks read as one scroll, not stacked islands */
body.landing-page .landing-shell > .landing-features{
display: flex;
flex-direction: column;
gap: clamp(0.92rem, 1.98vw, 1.45rem);
width: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
body.landing-page .landing-features > .landing-cal-peek--primary{
margin: 0;
}
body.landing-page .landing-features > .landing-preview--secondary,
body.landing-page .landing-features > .landing-future{
margin: 0;
}
body.landing-page .landing-features > .landing-reports,
body.landing-page .landing-shell > .landing-reports{
margin: 0;
}
body.landing-page .landing-shell > .landing-preview,
body.landing-page .landing-features .landing-preview{
padding: 0;
margin: 0;
width: auto;
border-radius: 0;
background: transparent;
border: none;
box-sizing: border-box;
}
body.landing-page .landing-shell > .landing-below-preview{
background: transparent;
margin-top: calc(var(--landing-section-gap-tight) - var(--landing-section-gap));
}
body.landing-page .landing-hero{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
text-align: center;
align-self: stretch;
overflow: hidden;
}
body.landing-page .landing-hero__ambient{
position: absolute;
inset: -8% -12% auto -12%;
height: min(380px, 78%);
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse 70% 58% at 50% 22%, rgba(4, 120, 87, 0.1) 0%, transparent 72%),
radial-gradient(ellipse 48% 42% at 50% 8%, rgba(11, 61, 46, 0.04) 0%, transparent 70%);
opacity: 0.95;
}
body.landing-page .landing-hero__stack,
body.landing-page .landing-hero__inner,
body.landing-page .landing-hero-forecast{
position: relative;
z-index: 1;
}
body.landing-page .landing-hero__stack,
body.landing-page .landing-hero__inner{
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: min(58rem, 100%);
margin: 0 auto;
padding: clamp(0.2rem, 0.8vw, 0.55rem) 0 0;
gap: clamp(0.32rem, 0.75vw, 0.52rem);
box-sizing: border-box;
}
body.landing-page .landing-hero__copy{
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-self: center;
max-width: min(40rem, 100%);
width: 100%;
margin: 0;
}
body.landing-page .landing-hero__viz{
min-width: 0;
width: 100%;
justify-self: stretch;
}
@media (max-width: 820px){
body.landing-page .landing-hero__inner{
grid-template-columns: 1fr;
gap: 1.1rem;
}
body.landing-page .landing-hero__viz{
justify-self: center;
max-width: 360px;
}
}
body.landing-page .landing-hero-viz{
border-radius: 16px;
border: 1px solid rgba(11, 61, 46, 0.1);
background:
linear-gradient(168deg, #ffffff 0%, #fafbfa 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.94) inset,
0 1px 2px rgba(11, 61, 46, 0.032),
0 14px 32px -20px rgba(11, 61, 46, 0.12),
0 26px 48px -34px rgba(11, 61, 46, 0.09);
padding: 14px 14px 11px;
box-sizing: border-box;
}
body.landing-page .landing-hero-viz__hdr{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
margin-bottom: 7px;
padding: 0 2px;
}
body.landing-page .landing-hero-viz__title{
display: block;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.72);
line-height: 1.2;
}
body.landing-page .landing-hero-viz__sub{
display: block;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.3;
color: rgba(71, 85, 105, 0.68);
}
body.landing-page .landing-hero-viz__week{
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 5px;
}
body.landing-page .landing-hero-viz__cell{
border-radius: 9px;
border: 1px solid rgba(17, 24, 39, 0.07);
background: rgba(255, 255, 255, 0.9);
padding: 6px 4px 7px;
text-align: center;
min-width: 0;
}
body.landing-page .landing-hero-viz__cell--watch{
border-color: rgba(180, 83, 9, 0.35);
background: rgba(254, 243, 199, 0.35);
}
body.landing-page .landing-hero-viz__d{
display: block;
font-size: 10.5px;
font-weight: 700;
color: rgba(55, 65, 75, 0.7);
line-height: 1.2;
}
body.landing-page .landing-hero-viz__cell--watch .landing-hero-viz__d{
color: rgba(146, 64, 14, 0.92);
}
body.landing-page .landing-hero-viz__b{
display: block;
margin-top: 3px;
font-size: 11.5px;
font-weight: 800;
font-variant-numeric: tabular-nums;
color: rgba(11, 61, 46, 0.94);
letter-spacing: -0.02em;
line-height: 1.15;
}
body.landing-page .landing-hero-viz__cell--watch .landing-hero-viz__b{
color: rgba(146, 64, 14, 0.95);
}
body.landing-page .landing-hero-viz__timeline{
position: relative;
display: flex;
flex-direction: column;
gap: 0;
}
body.landing-page .landing-hero-viz__nearBand{
width: 100%;
max-width: 100%;
}
body.landing-page .landing-hero-viz__nearBand .landing-hero-viz__week{
width: 100%;
}
body.landing-page .landing-hero-viz__chartBlock{
margin-top: 6px;
}
body.landing-page .landing-hero-viz__chartWrap{
position: relative;
margin-top: 0;
width: 100%;
}
body.landing-page .landing-hero-viz__timeline .landing-hero-viz__spark{
margin-top: 0;
}
body.landing-page .landing-hero-viz__spark{
display: block;
width: 100%;
height: 52px;
margin-top: 0;
border-radius: 10px;
background: rgba(4, 120, 87, 0.045);
box-shadow: inset 0 0 0 1px rgba(11, 61, 46, 0.06);
}
body.landing-page .landing-hero-viz__horizon{
margin: 3px 0 0;
padding: 0 6px 0 0;
font-size: 0.6rem;
line-height: 1.25;
font-weight: 500;
letter-spacing: 0.012em;
color: rgba(100, 116, 139, 0.58);
text-align: right;
}
body.landing-page .landing-hero-viz__sparkFuture,
body.landing-page .landing-hero-viz__sparkDot,
body.landing-page .landing-hero-viz__sparkArrow{
opacity: 1;
}
body.landing-page .landing-hero-viz__foot{
margin: 6px 0 0;
padding: 0 2px;
font-size: 0.64rem;
line-height: 1.32;
font-weight: 550;
color: rgba(55, 65, 81, 0.82);
text-align: center;
}
body.landing-page .landing-hero__text{
--hero-text-scale: 0.95;
margin: 0 0 0.38rem;
max-width: 100%;
width: 100%;
font-size: calc(clamp(1.55rem, 2.85vw, 2.65rem) * var(--hero-text-scale));
line-height: 1.05;
font-weight: 800;
color: rgba(15, 23, 42, 1);
letter-spacing: -0.028em;
text-align: center;
text-wrap: balance;
white-space: normal;
}
body.landing-page .landing-hero__sub{
margin: 0;
max-width: min(36rem, 100%);
width: 100%;
padding: 0;
box-sizing: border-box;
font-size: clamp(1rem, 1.85vw, 1.32rem);
line-height: 1.36;
font-weight: 500;
color: rgba(71, 85, 105, 0.88);
text-align: center;
white-space: normal;
text-wrap: balance;
}
body.landing-page .landing-hero__cta{
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0 1.45rem;
min-height: 44px;
font-weight: 750;
font-size: 0.98rem;
letter-spacing: 0.012em;
color: #fff;
background: var(--accent);
text-decoration: none;
border-radius: 11px;
border: 1px solid color-mix(in srgb, var(--accent) 82%, #000 18%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 5px 16px rgba(11, 61, 46, 0.2);
transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.2s ease;
}
body.landing-page .landing-hero__ctaGroup{
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin: 0.42rem 0 0;
width: 100%;
max-width: none;
}
body.landing-page .landing-hero__cta:hover{
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.14) inset,
0 8px 22px rgba(11, 61, 46, 0.22);
filter: brightness(1.04);
}
body.landing-page .landing-hero__cta:active{
filter: brightness(0.96);
}
body.landing-page .landing-hero__cta:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 10px;
}
/* Landing: product preview (simple demo — one idea, low noise) */
body.landing-page .landing-preview{
width: 100%;
max-width: none;
margin: 0;
align-self: stretch;
display: block;
padding: 0;
}
body.landing-page .landing-preview__demo{
width: 100%;
display: flex;
flex-direction: column;
gap: 0.68rem;
padding: 0.84rem 0.94rem 0.82rem;
border-radius: 16px;
border: 1px solid rgba(11, 61, 46, 0.1);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(252, 253, 252, 0.97) 100%);
box-sizing: border-box;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 14px 40px -18px rgba(11, 61, 46, 0.18);
transition: box-shadow 0.28s ease, border-color 0.28s ease;
}
body.landing-page .landing-preview__demo:hover{
border-color: rgba(11, 61, 46, 0.13);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 18px 48px -18px rgba(11, 61, 46, 0.22);
}
body.landing-page .landing-preview__tagline{
margin: 0;
max-width: 30rem;
font-size: clamp(0.94rem, 1.82vw, 1.04rem);
font-weight: 700;
line-height: 1.32;
letter-spacing: -0.014em;
color: rgba(11, 61, 46, 0.96);
}
body.landing-page .landing-preview__transfer{
margin: 0;
padding: 0;
border: none;
background: transparent;
}
body.landing-page .landing-preview__transferBand{
padding: 0.64rem 0.82rem 0.7rem;
border-radius: 13px;
border: none;
background:
radial-gradient(460px 180px at 18% 0%, rgba(4, 120, 87, 0.12) 0%, rgba(4, 120, 87, 0) 72%),
linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(236, 253, 245, 0.55) 100%);
box-shadow: inset 0 0 0 1px rgba(11, 61, 46, 0.1);
max-width: none;
}
body.landing-page .landing-preview__transferLine{
margin: 0 0 0.14rem;
font-size: 0.84rem;
font-weight: 600;
letter-spacing: 0;
color: rgba(55, 65, 81, 0.8);
}
body.landing-page .landing-preview__transferAmt{
margin: 0;
/* Tamed: the page should communicate "safe-to-move guidance", not a
headline savings number. Keep the range on one line; smaller and
tighter than before so supporting copy reads alongside the amount
instead of being drowned out by it. */
font-size: clamp(1.42rem, 2.35vw, 1.72rem);
font-weight: 650;
line-height: 0.98;
letter-spacing: -0.012em;
color: rgba(11, 61, 46, 0.86);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
body.landing-page .landing-preview__transferFoot{
margin: 0.28rem 0 0;
max-width: 22rem;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.42;
color: rgba(30, 41, 55, 0.96);
}
body.landing-page .landing-preview__trust{
display: inline-flex;
align-items: center;
gap: 0.42rem;
margin: 0.3rem 0 0;
font-size: 0.8rem;
font-weight: 600;
color: rgba(30, 58, 45, 0.8);
}
body.landing-page .landing-preview__trustIcon{
width: 1.2rem;
height: 1.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(4, 120, 87, 0.12);
color: rgba(4, 120, 87, 0.92);
font-size: 0.85rem;
font-weight: 800;
line-height: 1;
}
body.landing-page .landing-preview__trustText{
line-height: 1.3;
color: rgba(31, 41, 55, 0.82);
}
body.landing-page .landing-preview__main{
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.34fr);
gap: 0.62rem 0.88rem;
align-items: start;
width: 100%;
max-width: none;
margin: 0;
}
body.landing-page .landing-preview__leftCol{
display: flex;
flex-direction: column;
gap: 0.52rem;
width: 100%;
min-width: 0;
}
body.landing-page .landing-preview__billsHead{
margin: 0 0 0.42rem;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: rgba(15, 23, 42, 0.92);
}
body.landing-page .landing-preview__billList{
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.38rem;
}
body.landing-page .landing-preview__billList li{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.65rem;
margin: 0;
padding: 0;
border: none;
background: transparent;
font-size: 0.84rem;
font-weight: 500;
color: rgba(15, 23, 42, 0.92);
}
body.landing-page .landing-preview__billList li span:last-child{
flex-shrink: 0;
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
color: rgba(71, 85, 105, 0.78);
}
body.landing-page .landing-preview__chart{
margin: 0;
align-self: stretch;
padding: 0.28rem 0.44rem 0.18rem;
border-radius: 12px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(252, 253, 252, 0.86) 100%);
border: 1px solid rgba(11, 61, 46, 0.1);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
body.landing-page .landing-preview__chartSvg{
display: block;
width: 100%;
height: auto;
min-height: 83px;
max-height: 111px;
}
body.landing-page .landing-preview__markerDot{
stroke: rgba(255, 255, 255, 0.9);
stroke-width: 0.8;
}
body.landing-page .landing-preview__markerDot--in{
fill: rgba(4, 120, 87, 0.68);
}
body.landing-page .landing-preview__markerDot--out{
fill: rgba(167, 55, 68, 0.62);
}
body.landing-page .landing-preview__markerLabel{
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 6px;
font-weight: 600;
letter-spacing: 0.01em;
}
body.landing-page .landing-preview__markerLabel--in{
fill: rgba(4, 120, 87, 0.88);
}
body.landing-page .landing-preview__markerLabel--out{
fill: rgba(167, 55, 68, 0.88);
}
body.landing-page .landing-preview__markerLabel--start,
body.landing-page .landing-preview__minBalanceLabel{
font-weight: 500;
fill: rgba(100, 116, 139, 0.68);
}
body.landing-page .landing-preview__minBalanceLabel{
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 6px;
letter-spacing: 0.006em;
}
body.landing-page .landing-preview__curve{
stroke: rgba(11, 61, 46, 0.68);
stroke-opacity: 1;
}
@media (max-width: 700px){
body.landing-page .landing-preview__main{
grid-template-columns: 1fr;
}
}
body.landing-page .landing-insight{
width: 100%;
margin: 0;
align-self: stretch;
padding: 0;
box-sizing: border-box;
border-radius: 0;
background: transparent;
border: none;
}
body.landing-page .landing-insight__card{
margin: 0;
display: flex;
align-items: stretch;
gap: 0;
padding: 0;
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(180, 83, 9, 0.13);
background: linear-gradient(180deg, rgba(255, 252, 247, 0.96) 0%, rgba(252, 249, 244, 0.94) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.65) inset,
0 3px 10px rgba(120, 90, 55, 0.06);
min-height: 0;
}
body.landing-page .landing-insight__iconCol{
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 0.38rem 0.55rem;
background: linear-gradient(180deg, rgba(180, 83, 9, 0.07) 0%, rgba(154, 73, 13, 0.05) 100%);
border-right: 1px solid rgba(146, 72, 18, 0.1);
}
body.landing-page .landing-insight__main{
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
justify-content: center;
padding: 0.42rem 0.88rem 0.45rem;
}
body.landing-page .landing-insight__label{
margin: 0;
font-size: 0.6rem;
font-weight: 650;
letter-spacing: 0.055em;
text-transform: uppercase;
color: rgba(100, 72, 42, 0.78);
}
body.landing-page .landing-insight__icon{
flex: 0 0 auto;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
color: rgba(110, 78, 45, 0.82);
background: rgba(255, 253, 250, 0.72);
border: 1px solid rgba(180, 83, 9, 0.18);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}
body.landing-page .landing-insight__icon svg{
display: block;
width: 16px;
height: 16px;
}
body.landing-page .landing-insight__copy{
margin: 0;
flex: 1 1 auto;
min-width: 0;
max-width: none;
font-size: clamp(0.84rem, 1.55vw, 0.93rem);
font-weight: 500;
line-height: 1.38;
letter-spacing: -0.008em;
color: rgba(51, 65, 85, 0.9);
}
/* Hero: centered copy → forecast demo */
body.landing-page .landing-hero__demo-caption{
margin: 0 0 -0.06rem;
max-width: min(34rem, 100%);
padding: 0 0.25rem;
font-size: clamp(0.82rem, 1.35vw, 0.94rem);
line-height: 1.45;
font-weight: 500;
color: rgba(100, 116, 139, 0.82);
text-align: center;
text-wrap: balance;
}
body.landing-page .landing-hero__demo-caption-title{
font-weight: 650;
color: rgba(51, 65, 85, 0.88);
}
body.landing-page .landing-hero-forecast{
width: 100%;
max-width: min(28rem, 100%);
margin: 1.75ch auto 0;
box-sizing: border-box;
}
body.landing-page .landing-hero-forecast__demo{
width: 100%;
min-width: 0;
}
body.landing-page .landing-hero-cal.landing-hero-viz{
width: 100%;
text-align: left;
padding: 14px 18px 13px;
}
body.landing-page .landing-hero-cal .landing-hero-viz__hdr{
margin-bottom: 0.38rem;
gap: 0.14rem;
}
body.landing-page .landing-hero-cal .landing-hero-viz__week{
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
margin-bottom: 4px;
padding: 0 0.2rem;
box-sizing: border-box;
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell{
width: auto;
max-width: none;
justify-self: stretch;
padding: 7px 9px 8px;
min-height: 3.5rem;
border-color: rgba(17, 24, 39, 0.07);
background: rgba(255, 255, 255, 0.76);
}
body.landing-page .landing-hero-cal .landing-hero-viz__d{
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
line-height: 1.2;
color: rgba(71, 85, 105, 0.62);
}
body.landing-page .landing-hero-cal .landing-hero-viz__b{
margin-top: 3px;
font-size: 13px;
font-weight: 700;
color: rgba(11, 61, 46, 0.58);
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--bill{
border-color: rgba(180, 83, 9, 0.16);
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--pay{
padding: 7px 9px 8px;
border-width: 1.25px;
border-color: rgba(4, 120, 87, 0.34);
background: rgba(236, 253, 245, 0.58);
box-shadow: 0 3px 12px -8px rgba(4, 120, 87, 0.2);
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--pay .landing-hero-viz__d{
color: rgba(4, 100, 75, 0.8);
font-weight: 700;
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--pay .landing-hero-viz__b{
font-size: 13.5px;
font-weight: 800;
color: rgba(11, 61, 46, 0.84);
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--pay .landing-hero-viz__tag{
margin-top: 2px;
font-size: 7.5px;
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--watch{
width: auto;
padding: 8px 9px 8px;
border-width: 2px;
border-color: rgba(11, 61, 46, 0.58);
background: rgba(236, 253, 245, 0.78);
box-shadow:
0 0 0 1px rgba(11, 61, 46, 0.1),
0 10px 22px -10px rgba(11, 61, 46, 0.28);
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--watch .landing-hero-viz__d{
font-size: 11px;
color: rgba(11, 61, 46, 0.9);
font-weight: 800;
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--watch .landing-hero-viz__b{
margin-top: 4px;
font-size: 14px;
color: rgba(11, 61, 46, 0.98);
font-weight: 850;
}
body.landing-page .landing-hero-viz__cell--today{
border-color: rgba(4, 120, 87, 0.22);
background: rgba(236, 253, 245, 0.42);
}
body.landing-page .landing-hero-viz__cell--bill{
border-color: rgba(180, 83, 9, 0.2);
}
body.landing-page .landing-hero-viz__cell--pay{
border-color: rgba(4, 120, 87, 0.18);
}
body.landing-page .landing-hero-viz__tag{
display: block;
margin-top: 2px;
font-size: 7.5px;
font-weight: 750;
line-height: 1;
letter-spacing: 0.02em;
color: rgba(146, 64, 14, 0.92);
}
body.landing-page .landing-hero-viz__tag--pay{
color: rgba(4, 120, 87, 0.88);
text-transform: uppercase;
}
body.landing-page .landing-hero-cal__markers{
list-style: none;
margin: 0;
padding: 0;
border-top: none;
display: flex;
flex-direction: column;
gap: 0.22rem;
}
body.landing-page .landing-hero-cal__marker{
display: flex;
align-items: center;
gap: 0.42rem;
font-size: 0.76rem;
font-weight: 550;
line-height: 1.3;
color: rgba(51, 65, 85, 0.84);
}
body.landing-page .landing-hero-cal__marker-dot{
flex: 0 0 auto;
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(180, 83, 9, 0.55);
}
body.landing-page .landing-hero-cal__marker--pay .landing-hero-cal__marker-dot{
background: rgba(4, 120, 87, 0.72);
}
body.landing-page .landing-hero-cal__insight{
display: block;
margin: 0.85rem 0 0;
padding: 0.38rem 0.58rem;
border-radius: 10px;
border: 1px solid rgba(4, 120, 87, 0.12);
background: rgba(236, 253, 245, 0.55);
font-size: 0.68rem;
font-weight: 500;
line-height: 1.38;
color: rgba(30, 58, 45, 0.76);
text-align: left;
box-sizing: border-box;
}
body.landing-page #landingHeroForecast .landing-hero-cal__insight{
max-width: 78%;
}
body.landing-page .landing-hero-cal__insight.is-emphasized{
background: rgba(220, 248, 232, 0.82);
border-color: rgba(4, 120, 87, 0.2);
transition: background 0.45s ease, border-color 0.45s ease;
}
/* Landing: future planning (60–90 day outlook) */
body.landing-page .landing-future{
display: grid;
gap: clamp(0.62rem, 1.35vw, 0.88rem);
}
body.landing-page .landing-future.landing-section--tint-safe{
margin-top: clamp(1rem, 2.42vw, 1.7rem);
padding: clamp(1.28rem, 2.7vw, 1.75rem) 0 clamp(0.42rem, 0.95vw, 0.6rem);
}
body.landing-page .landing-future.landing-section--tint-safe::before{
top: 0;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 1) 0%,
rgba(240, 253, 244, 0.55) 22%,
rgba(222, 248, 236, 0.78) 48%,
rgba(237, 252, 245, 0.42) 78%,
rgba(255, 255, 255, 0.98) 100%
);
}
body.landing-page .landing-future__intro{
max-width: 40rem;
padding-top: 0;
margin-bottom: 0;
}
body.landing-page .landing-future__title{
margin: 0 0 0.22rem;
font-size: clamp(1.45rem, 2.7vw, 1.88rem);
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.026em;
color: rgba(15, 23, 42, 0.99);
}
body.landing-page .landing-future__lede{
margin: 0;
max-width: 38rem;
font-size: clamp(0.94rem, 1.42vw, 1.03rem);
line-height: 1.42;
font-weight: 500;
color: rgba(51, 65, 85, 0.9);
}
body.landing-page .landing-future__demo{
width: 100%;
max-width: min(36rem, 100%);
margin: 0 auto;
box-sizing: border-box;
}
body.landing-page .landing-future-viz{
text-align: left;
padding: 14px 18px 13px;
}
body.landing-page .landing-future-viz__months{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 8px;
padding: 0 0.15rem;
box-sizing: border-box;
}
body.landing-page .landing-future-viz__month{
padding: 7px 9px 8px;
min-height: 3.5rem;
}
body.landing-page .landing-future-viz__chartWrap{
margin: 0 0 8px;
padding: 0 40px;
overflow: hidden;
box-sizing: border-box;
line-height: 0;
}
body.landing-page .landing-future-viz__svg{
display: block;
width: 100%;
height: auto;
aspect-ratio: 500 / 140;
}
body.landing-page .landing-future-viz__line{
stroke: rgba(11, 61, 46, 0.92);
stroke-width: 4.5;
}
body.landing-page .landing-future-viz__bufferLine{
stroke: rgba(148, 163, 184, 0.55);
stroke-dasharray: 4 4;
stroke-width: 1;
}
body.landing-page .landing-future-viz__bufferLabel,
body.landing-page .landing-future-viz__label--start,
body.landing-page .landing-future-viz__label--end{
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 6px;
font-weight: 500;
fill: rgba(100, 116, 139, 0.68);
}
body.landing-page .landing-future-viz__label--crunch{
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 6.6px;
font-weight: 600;
fill: rgba(167, 55, 68, 0.9);
}
body.landing-page .landing-future-viz__dot--start{
fill: rgba(148, 163, 184, 0.55);
stroke: rgba(255, 255, 255, 0.92);
stroke-width: 0.75;
}
body.landing-page .landing-future-viz__dot--crunch{
fill: rgba(167, 55, 68, 0.72);
stroke: rgba(255, 255, 255, 0.92);
stroke-width: 0.75;
}
body.landing-page .landing-future-viz__dot--end{
fill: rgba(4, 120, 87, 0.78);
stroke: rgba(255, 255, 255, 0.92);
stroke-width: 0.75;
}
body.landing-page .landing-future-viz__markers{
margin-top: 0;
}
body.landing-page .landing-future-viz__insight{
margin-top: 0.85rem;
}
/* Landing: reports & insights (compact previews — secondary to future planning) */
body.landing-page .landing-reports{
display: grid;
gap: clamp(0.38rem, 0.85vw, 0.52rem);
padding: clamp(0.28rem, 0.65vw, 0.42rem) 0 clamp(0.22rem, 0.55vw, 0.32rem);
}
body.landing-page .landing-reports__intro{
max-width: 34rem;
text-align: center;
margin: 0 auto;
}
body.landing-page .landing-reports__title{
margin: 0 0 0.12rem;
font-size: clamp(1.02rem, 1.75vw, 1.18rem);
font-weight: 750;
letter-spacing: -0.018em;
color: rgba(30, 41, 59, 0.88);
}
body.landing-page .landing-reports__lede{
margin: 0 auto;
max-width: 30rem;
font-size: clamp(0.8rem, 1.2vw, 0.88rem);
line-height: 1.36;
font-weight: 500;
color: rgba(100, 116, 139, 0.82);
}
body.landing-page .landing-reports__grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.38rem 0.44rem;
width: 100%;
max-width: 50rem;
margin: 0 auto;
}
body.landing-page .landing-reports__card{
display: flex;
flex-direction: column;
gap: 0.22rem;
min-height: 0;
padding: 0.52rem 0.58rem 0.48rem;
border-radius: 11px;
border: 1px solid rgba(15, 23, 42, 0.081);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
box-sizing: border-box;
transition: border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
body.landing-page .landing-reports__card:hover{
border-color: rgba(11, 61, 46, 0.12);
background: rgba(255, 255, 255, 0.98);
}
body.landing-page .landing-reports__cardTitle{
margin: 0;
font-size: 0.78rem;
font-weight: 650;
line-height: 1.22;
color: rgba(51, 65, 85, 0.9);
}
body.landing-page .landing-reports__cardBody{
margin: 0;
font-size: 0.68rem;
line-height: 1.32;
font-weight: 500;
color: rgba(100, 116, 139, 0.76);
}
body.landing-page .landing-reports__preview{
margin-top: 0.1rem;
min-height: 3.15rem;
padding: 0.34rem 0.36rem 0.3rem;
border-radius: 8px;
border: 1px solid rgba(15, 23, 42, 0.05);
background: rgba(248, 250, 252, 0.88);
box-sizing: border-box;
}
body.landing-page .landing-reports__preview--income{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.32rem;
padding-top: 0.08rem;
}
body.landing-page .landing-reports__barPair{
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2px;
flex: 1 1 0;
min-width: 0;
}
body.landing-page .landing-reports__bar{
display: block;
width: 0.5rem;
border-radius: 2px 2px 1px 1px;
}
body.landing-page .landing-reports__bar--in{
height: 1.55rem;
background: rgba(4, 120, 87, 0.5);
}
body.landing-page .landing-reports__bar--out{
height: 1.08rem;
background: rgba(148, 163, 184, 0.42);
}
body.landing-page .landing-reports__barPair:nth-child(2) .landing-reports__bar--in{
height: 1.32rem;
}
body.landing-page .landing-reports__barPair:nth-child(2) .landing-reports__bar--out{
height: 1.38rem;
}
body.landing-page .landing-reports__barPair:nth-child(3) .landing-reports__bar--in{
height: 1.42rem;
}
body.landing-page .landing-reports__barPair:nth-child(3) .landing-reports__bar--out{
height: 1.12rem;
}
body.landing-page .landing-reports__preview--categories{
display: flex;
flex-direction: column;
gap: 0.18rem;
padding-top: 0.06rem;
}
body.landing-page .landing-reports__cat{
display: block;
width: var(--w, 50%);
height: 0.3rem;
border-radius: 999px;
background: linear-gradient(90deg, rgba(4, 120, 87, 0.45) 0%, rgba(4, 120, 87, 0.16) 100%);
}
body.landing-page .landing-reports__preview--insights{
display: flex;
flex-direction: column;
gap: 0.2rem;
padding-top: 0.04rem;
}
body.landing-page .landing-reports__spark{
display: block;
width: 100%;
height: 1.45rem;
}
body.landing-page .landing-reports__insightList{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
body.landing-page .landing-reports__insightList li{
font-size: 0.62rem;
line-height: 1.28;
font-weight: 500;
color: rgba(100, 116, 139, 0.72);
padding-left: 0.52rem;
position: relative;
}
body.landing-page .landing-reports__insightList li::before{
content: "";
position: absolute;
left: 0;
top: 0.48em;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(4, 120, 87, 0.45);
}
@media (max-width: 820px){
body.landing-page .landing-reports__grid{
grid-template-columns: 1fr;
max-width: 22rem;
}
body.landing-page .landing-future-viz__months{
gap: 10px;
}
}
@media (max-width: 768px){
body.landing-page .landing-future__demo{
max-width: 100%;
}
body.landing-page .landing-future-viz{
padding: 13px 15px 12px;
}
body.landing-page .landing-future-viz__months{
gap: 8px;
margin-bottom: 6px;
}
body.landing-page .landing-future-viz__month{
min-height: 3.2rem;
padding: 6px 7px 7px;
}
body.landing-page .landing-future-viz__chartWrap{
padding: 0 28px;
margin-bottom: 6px;
}
}
/* Landing: forecast calendar peek (cropped-style preview) */
body.landing-page .landing-cal-peek{
width: 100%;
margin: calc(var(--landing-section-gap-tight) - var(--landing-section-gap)) 0 0;
align-self: stretch;
padding: 0;
box-sizing: border-box;
border-radius: 0;
background: transparent;
border: none;
}
body.landing-page .landing-cal-peek--primary{
margin: 0;
}
body.landing-page .landing-cal-peek--primary .landing-cal-peek__title{
font-size: clamp(1.18rem, 2.35vw, 1.38rem);
max-width: 16ch;
}
body.landing-page .landing-cal-peek--primary .landing-cal-peek__lede{
font-size: clamp(0.88rem, 1.65vw, 0.98rem);
max-width: 28ch;
}
body.landing-page .landing-cal-peek--primary .landing-cal-peek__frame{
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 14px 32px -14px rgba(11, 61, 46, 0.16);
}
body.landing-page .landing-cal-peek--primary .landing-cal-peek__inner:has(.landing-cal-peek__copy:only-child),
body.landing-page .landing-cal-peek--primary .landing-cal-peek__inner:not(:has(.landing-cal-peek__frame)){
grid-template-columns: 1fr;
}
body.landing-page .landing-preview--secondary .landing-preview__title{
font-size: clamp(0.98rem, 1.85vw, 1.12rem);
font-weight: 750;
color: rgba(30, 41, 59, 0.9);
}
body.landing-page .landing-preview--secondary .landing-preview__lede{
font-size: clamp(0.82rem, 1.45vw, 0.9rem);
color: rgba(71, 85, 105, 0.82);
}
body.landing-page .landing-cal-peek__inner{
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: clamp(0.45rem, 1.15vw, 0.76rem) clamp(0.72rem, 1.45vw, 0.94rem);
/* Top-aligned so the title sits flush with the calendar chrome rather
than falling halfway down the frame. */
align-items: start;
}
body.landing-page .landing-cal-peek__copy{
min-width: 0;
padding-top: 4px;
max-width: min(15.5rem, 100%);
}
body.landing-page .landing-cal-peek__title{
margin: 0 0 0.34rem;
max-width: 14ch;
text-wrap: balance;
font-size: clamp(1.05rem, 2.1vw, 1.22rem);
font-weight: 800;
letter-spacing: -0.02em;
color: rgba(15, 23, 42, 0.98);
line-height: 1.18;
}
body.landing-page .landing-cal-peek__lede{
margin: 0;
max-width: 25ch;
text-wrap: pretty;
font-size: clamp(0.84rem, 1.55vw, 0.92rem);
line-height: 1.46;
font-weight: 500;
color: rgba(55, 65, 81, 0.92);
}
body.landing-page .landing-cal-peek__frame{
min-width: 0;
border-radius: 14px;
border: 1px solid rgba(11, 61, 46, 0.11);
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 10px 24px -12px rgba(11, 61, 46, 0.14);
overflow: hidden;
}
body.landing-page .landing-cal-peek__chrome{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
padding: 10px 14px 8px;
border-bottom: 1px solid rgba(17, 24, 39, 0.07);
background: linear-gradient(180deg, rgba(252, 253, 252, 0.98) 0%, rgba(255, 255, 255, 0.72) 100%);
}
body.landing-page .landing-cal-peek__month{
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.04em;
color: rgba(11, 61, 46, 0.88);
}
body.landing-page .landing-cal-peek__hint{
font-size: 0.7rem;
font-weight: 600;
color: rgba(71, 85, 105, 0.86);
}
body.landing-page .landing-cal-peek__svg{
display: block;
width: 100%;
height: auto;
min-height: 188px;
}
@media (max-width: 720px){
body.landing-page .landing-cal-peek__inner{
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* Landing: setup reassurance (inline after steps) */
body.landing-page .landing-below-preview .landing-setup-note{
margin: 6px 0 0;
padding: 0;
border-radius: 0;
border: none;
background: transparent;
font-size: 10.5px;
line-height: 1.4;
font-weight: 500;
color: rgba(71, 85, 105, 0.8);
}
/* Landing: before/after + who it's for (below 3-col strip).
The two halves now share a soft container so the testimonial doesn't
float alone in whitespace. The After quote leads visually; "Great for"
sits beside it as a compact checklist card. */
body.landing-page .landing-emotional-band{
width: 100%;
max-width: none;
margin: 0;
padding: clamp(10px, 1.3vw, 13px) clamp(12px, 1.6vw, 15px);
display: grid;
grid-template-columns: minmax(0, 1.56fr) minmax(16.5rem, 0.94fr);
gap: 10px clamp(12px, 1.5vw, 16px);
align-items: center;
box-sizing: border-box;
border: 1px solid rgba(11, 61, 46, 0.09);
border-radius: 14px;
background:
linear-gradient(168deg, rgba(255, 255, 255, 0.97) 0%, rgba(246, 250, 248, 0.76) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.7) inset,
0 10px 22px -18px rgba(11, 61, 46, 0.12);
}
body.landing-page .landing-shift{
margin: 0;
padding-right: 0;
display: flex;
flex-direction: column;
gap: 0;
width: min(100%, 26rem);
justify-self: center;
}
body.landing-page .landing-shift__line--before{
margin: 0;
color: rgba(100, 116, 139, 0.72);
font-weight: 450;
font-style: normal;
font-size: clamp(0.75rem, 0.94vw, 0.8rem);
line-height: 1.35;
}
body.landing-page .landing-shift__tag{
display: inline-block;
margin: 0 0 0.24rem;
font-size: 0.54rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.72);
}
body.landing-page .landing-shift__story--after .landing-shift__tag{
color: rgba(4, 120, 87, 0.92);
}
body.landing-page .landing-shift__story{
display: grid;
gap: 0.12rem;
}
body.landing-page .landing-shift__story + .landing-shift__story{
margin-top: 0.58rem;
padding-top: 0.58rem;
border-top: 1px solid rgba(11, 61, 46, 0.08);
}
body.landing-page .landing-shift__after{
margin: 0;
max-width: 22ch;
font-size: clamp(0.8rem, 1.18vw, 0.86rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.014em;
color: rgba(11, 61, 46, 0.96);
text-wrap: balance;
}
body.landing-page .landing-shift__quoteCard{
padding: 10px 12px 9px;
border-radius: 12px;
border: 1px solid rgba(11, 61, 46, 0.08);
background: linear-gradient(180deg, rgba(245, 250, 247, 0.92) 0%, rgba(255, 255, 255, 0.98) 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}
body.landing-page .landing-shift__personCopy{
margin: 0.14rem 0 0;
max-width: 31ch;
font-size: 0.71rem;
line-height: 1.28;
color: rgba(71, 85, 105, 0.78);
}
/* "Great for" — compact checklist card, paired with the testimonial. */
body.landing-page .landing-for{
margin: 0;
padding: 9px 11px 8px;
border: 1px solid rgba(11, 61, 46, 0.065);
border-radius: 12px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
width: min(100%, 16.9rem);
justify-self: start;
align-self: center;
}
body.landing-page .landing-for__title{
margin: 0 0 0.24rem;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.62);
}
body.landing-page .landing-for__list{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.08rem;
}
body.landing-page .landing-for__list li{
position: relative;
margin: 0;
padding: 0 0 0 1.18em;
max-width: 26ch;
font-size: clamp(0.72rem, 1.06vw, 0.77rem);
line-height: 1.2;
font-weight: 500;
color: rgba(51, 65, 85, 0.92);
}
body.landing-page .landing-for__list li + li{
margin-top: 0;
}
body.landing-page .landing-for__list li::before{
content: "✓";
position: absolute;
left: 0;
top: 0;
font-size: 0.76em;
font-weight: 800;
color: rgba(4, 120, 87, 0.78);
line-height: 1.5;
}
@media (max-width: 640px){
body.landing-page .landing-emotional-band{
grid-template-columns: 1fr;
gap: 18px;
padding: 18px;
}
}
.landing-how{
width: 100%;
margin: 0;
align-self: flex-start;
display: block;
}
.landing-how__copy{
width: min(760px, 100%);
padding: 6px 0 0;
}
.landing-how__title{
font-size: 14px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: none;
color: rgba(11, 61, 46, 0.85);
margin-bottom: 8px;
}
.landing-how__steps{
margin: 0;
padding-left: 1.1rem;
color: var(--text);
font-weight: 650;
line-height: 1.55;
display: grid;
gap: 8px;
}
.landing-how__stepTitle{
font-weight: 850;
color: var(--text);
}
.landing-how__stepBody{
margin-top: 2px;
color: var(--muted);
font-weight: 600;
}
/* Landing: lightweight highlights row */
.landing-trust-row{
width: 100%;
max-width: none;
margin: 0.15rem 0 0;
display: flex;
justify-content: center;
align-self: stretch;
}
.landing-trust-row__inner{
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 9px;
padding: 0;
border: none;
background: transparent;
line-height: 1.28;
letter-spacing: 0.01em;
}
.landing-trust-row__item{
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(11, 61, 46, 0.07);
background: rgba(255, 255, 255, 0.7);
box-shadow: none;
color: rgba(51, 65, 85, 0.78);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
}
.landing-trust-row__icon{
display: inline-flex;
width: 14px;
height: 14px;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
color: rgba(11, 61, 46, 0.58);
background: rgba(4, 120, 87, 0.08);
border: none;
margin-top: 0;
}
body.landing-page .landing-trust-row{
margin: 0.08rem auto 0;
}
body.landing-page .landing-trust-row__inner{
gap: 8px;
}
@media (max-width: 560px){
.landing-trust-row__inner{
grid-template-columns: 1fr;
gap: 12px;
}
body.landing-page .landing-trust-row__inner{
gap: 4px 0;
padding: 6px 11px 7px;
}
}
/* Landing: why people use BalanceWhiz */
.landing-why{
width: 100%;
margin: 0;
align-self: flex-start;
display: block;
}
/* Landing: How | Why (slightly wider) | Offer — balanced 3-column strip */
/* Landing: sections below the example insight preview */
body.landing-page .landing-below-preview{
--below-heading-band: 1.6rem;
--below-heading-gap: 5px;
width: 100%;
max-width: none;
margin: 0;
padding: 0 0 1px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: clamp(10px, 1.7vw, 15px);
row-gap: 0;
align-items: stretch;
box-sizing: border-box;
border-radius: 0;
background: transparent;
border: none;
box-shadow: none;
}
body.landing-page .landing-below-preview > section{
padding: 0;
min-width: 0;
display: flex;
flex-direction: column;
height: 100%;
}
body.landing-page .landing-below-preview .landing-offer{
width: 100%;
max-width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 0;
justify-self: stretch;
}
body.landing-page .landing-below-preview .landing-how__title,
body.landing-page .landing-below-preview .landing-why__title,
body.landing-page .landing-below-preview .landing-offer__heading{
/* Slightly smaller + uppercase eyebrows so the step titles below carry
the visual weight, not the section label. */
font-size: 10.75px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.62);
margin: 0 0 var(--below-heading-gap);
padding: 0;
min-height: var(--below-heading-band);
display: flex;
align-items: flex-end;
line-height: 1.2;
}
body.landing-page .landing-below-preview .landing-offer__heading{
font-family: inherit;
font-style: normal;
}
body.landing-page .landing-below-preview .landing-why__list{
display: flex;
flex-direction: column;
gap: 8px;
margin: 0;
padding: 0;
}
body.landing-page .landing-below-preview .landing-why__item{
display: block;
padding: 0;
border: none;
}
body.landing-page .landing-below-preview .landing-why__item:last-child{
padding-bottom: 0;
}
body.landing-page .landing-below-preview .landing-why__line{
margin: 0;
display: grid;
gap: 2px;
/* Tighter measure (~30 chars) so the column reads as quick scan-bites
rather than long paragraphs. */
max-width: 27ch;
font-size: 12px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.4;
color: rgba(51, 65, 85, 0.92);
}
body.landing-page .landing-below-preview .landing-why__line strong{
display: block;
font-size: 12.4px;
font-weight: 700;
color: rgba(11, 61, 46, 0.95);
}
body.landing-page .landing-below-preview .landing-why__line span{
display: block;
color: rgba(75, 85, 99, 0.82);
font-weight: 500;
}
body.landing-page .landing-offer--calm .landing-offer__tagline{
margin: 6px 0 0;
font-size: 12.25px;
line-height: 1.38;
color: rgba(75, 85, 99, 0.8);
}
body.landing-page .landing-offer--calm .landing-offer__trial{
display: inline;
font-weight: 800;
font-size: 13.5px;
letter-spacing: 0.02em;
color: rgba(17, 24, 39, 0.9);
}
body.landing-page .landing-offer--calm .landing-offer__price{
display: inline;
font-weight: 500;
font-size: 11.25px;
color: rgba(75, 85, 99, 0.62);
}
body.landing-page .landing-offer--calm .landing-offer__bullets{
margin-top: 8px;
}
body.landing-page .landing-below-preview .landing-offer__panel{
width: 100%;
max-width: 100%;
margin: 0;
flex: 0 1 auto;
display: flex;
flex-direction: column;
/* Tighter, less-tall CTA card so the button doesn't float in empty
vertical space. */
padding: 9px 11px 11px;
gap: 2px;
background: linear-gradient(165deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 250, 248, 0.9) 100%);
border: 1px solid rgba(11, 61, 46, 0.11);
border-radius: 13px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 8px 20px -14px rgba(11, 61, 46, 0.1);
box-sizing: border-box;
}
body.landing-page .landing-below-preview .landing-offer__copy{
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
flex: 0 1 auto;
gap: 1px;
}
body.landing-page .landing-below-preview .landing-offer__cta{
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 6px;
width: auto;
align-self: flex-start;
padding: 0 0.9rem;
min-height: 34px;
box-sizing: border-box;
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.012em;
color: rgba(11, 61, 46, 0.96);
background: color-mix(in srgb, var(--accent) 12%, white);
text-decoration: none;
border-radius: 9px;
border: 1px solid rgba(11, 61, 46, 0.18);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) inset;
transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.2s ease;
}
body.landing-page .landing-below-preview .landing-offer__cta:hover{
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 6px 14px -10px rgba(11, 61, 46, 0.28);
filter: brightness(1.01);
}
body.landing-page .landing-below-preview .landing-offer__cta:active{
filter: brightness(0.96);
}
body.landing-page .landing-below-preview .landing-offer__cta:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 10px;
}
body.landing-page .landing-below-preview .landing-offer--calm .landing-offer__tagline{
margin: 4px 0 0;
font-size: 11px;
line-height: 1.34;
color: rgba(75, 85, 99, 0.7);
}
body.landing-page .landing-below-preview .landing-offer--calm .landing-offer__trial{
font-size: 11px;
font-weight: 600;
letter-spacing: 0.015em;
color: rgba(11, 61, 46, 0.52);
}
body.landing-page .landing-below-preview .landing-offer--calm .landing-offer__price{
font-size: 10.75px;
font-weight: 400;
color: rgba(75, 85, 99, 0.6);
}
body.landing-page .landing-below-preview .landing-offer--calm .landing-offer__bullets{
margin-top: 5px;
margin-bottom: 0;
gap: 2px;
}
body.landing-page .landing-below-preview .landing-how__steps{
/* More breathing room between numbered steps so the column doesn't
read as one dense block. */
gap: 8px;
font-weight: 500;
line-height: 1.45;
padding-left: 0;
counter-reset: landingStep;
}
body.landing-page .landing-below-preview .landing-how__steps li{
margin: 0;
border: none;
border-radius: 0;
background: transparent;
border-bottom: none;
padding: 0 2px 0 32px;
position: relative;
}
body.landing-page .landing-below-preview .landing-how__steps li:last-child{
border-bottom: none;
padding-bottom: 0;
}
body.landing-page .landing-below-preview .landing-how__steps li:first-child{
padding-top: 0;
}
body.landing-page .landing-below-preview .landing-how__steps li::marker{
content: "";
}
body.landing-page .landing-below-preview .landing-how__steps li::before{
counter-increment: landingStep;
content: counter(landingStep);
position: absolute;
left: 0;
top: 0;
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
color: rgba(11, 61, 46, 0.96);
background: rgba(4, 120, 87, 0.14);
border: 1px solid rgba(11, 61, 46, 0.18);
}
body.landing-page .landing-below-preview .landing-how__stepTitle{
font-size: 13.25px;
font-weight: 700;
letter-spacing: -0.005em;
line-height: 1.25;
text-wrap: balance;
color: rgba(15, 23, 42, 0.96);
}
body.landing-page .landing-below-preview .landing-how__stepBody{
margin-top: 3px;
margin-left: 0;
padding-left: 0;
font-size: 11.25px;
font-weight: 500;
line-height: 1.4;
color: rgba(75, 85, 99, 0.8);
}
body.landing-page .landing-below-preview > section{
width: 100%;
margin: 0;
align-self: stretch;
}
body.landing-page .landing-below-preview .landing-how__copy,
body.landing-page .landing-below-preview .landing-why__copy{
width: 100%;
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 0;
}
body.landing-page .landing-below-preview .landing-how__copy{
padding: 0;
max-width: 100%;
}
body.landing-page .landing-below-preview .landing-why__copy{
padding: 0;
max-width: 100%;
}
body.landing-page .landing-below-preview .landing-offer__bullets li{
font-size: 10.75px;
line-height: 1.34;
font-weight: 400;
color: rgba(55, 65, 60, 0.58);
padding-left: 1.05em;
}
body.landing-page .landing-below-preview .landing-offer__bullets li::before{
font-weight: 500;
font-size: 0.62em;
color: rgba(11, 61, 46, 0.38);
opacity: 1;
top: 0.2em;
}
@media (max-width: 980px){
body.landing-page .landing-below-preview{
display: flex;
flex-direction: column;
gap: 0.82rem;
padding: 10px 10px 12px;
}
body.landing-page .landing-below-preview .landing-how__title,
body.landing-page .landing-below-preview .landing-why__title,
body.landing-page .landing-below-preview .landing-offer__heading{
min-height: 0;
align-items: flex-start;
}
body.landing-page .landing-below-preview .landing-offer{
padding: 0;
margin: 0;
max-width: none;
justify-self: stretch;
}
body.landing-page .landing-below-preview .landing-offer__panel{
max-width: none;
width: 100%;
}
body.landing-page .landing-below-preview .landing-how__copy{
padding-right: 0;
max-width: none;
}
body.landing-page .landing-below-preview .landing-why__copy{
padding-right: 0;
}
}
@media (max-width: 560px){
body.landing-page .landing-below-preview{
padding: 12px 11px 14px;
}
body.landing-page .landing-main{
padding: 10px 0 38px;
}
body.landing-page .landing-hero__cta{
width: min(100%, 20rem);
}
body.landing-page .landing-trust-row__inner{
padding: 6px 10px 7px;
gap: 4px 0;
}
}
.landing-why__copy{
width: min(760px, 100%);
padding: 12px 0 0;
}
.landing-why__title{
font-size: 14px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: none;
color: rgba(11, 61, 46, 0.85);
margin-bottom: 12px;
}
.landing-why__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.landing-why__card{
border-radius: 14px;
border: var(--card-border-accent);
background: var(--cal-surface);
box-shadow: 0 10px 28px rgba(0,0,0,0.08);
padding: 14px 14px;
}
.landing-why__cardTitle{
font-size: 14px;
font-weight: 850;
color: var(--text);
margin: 0 0 6px;
}
.landing-why__cardBody{
color: var(--muted);
font-weight: 600;
line-height: 1.5;
}
/* Landing: offer callout (left column) */
.landing-offer{
width: min(1100px, 100%);
margin: 26px auto 0;
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 22px;
align-items: start;
}
.landing-offer__copy{
padding: 12px 12px 0;
}
.landing-offer__title{
display: inline-block;
font-size: 20px;
font-weight: 900;
color: var(--accent);
text-decoration: none;
text-underline-offset: 4px;
}
.landing-offer__title:hover{
filter: brightness(0.92);
}
.landing-offer__title:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 4px;
border-radius: 6px;
}
.landing-offer__bullets{
margin: 12px 0 0;
padding-left: 0;
list-style: none;
color: var(--text);
font-weight: 400;
line-height: 1.6;
display: grid;
gap: 6px;
}
.landing-offer__bullets li{
position: relative;
padding-left: 1.35em;
}
.landing-offer__bullets li::before{
content: "\2713";
position: absolute;
left: 0;
top: 0;
font-weight: 700;
color: var(--accent);
font-size: 0.92em;
}
@media (max-width: 860px){
body.landing-page .landing-preview__demo{
padding: 0.88rem 0.88rem 0.92rem;
gap: 0.72rem;
}
body.landing-page .landing-preview__main{
grid-template-columns: 1fr;
gap: 0.72rem;
}
}
@media (min-width: 981px){
body.landing-page{
--landing-section-gap: clamp(1.01rem, 2.1vw, 1.72rem);
--landing-section-gap-tight: clamp(0.78rem, 1.65vw, 1.14rem);
}
body.landing-page .landing-main{
padding: clamp(0.75rem, 1.55vw, 1.08rem) 0 clamp(0.92rem, 2.06vw, 1.58rem);
}
body.landing-page .landing-shell{
gap: var(--landing-section-gap);
padding-left: max(18px, env(safe-area-inset-left));
padding-right: max(18px, env(safe-area-inset-right));
}
body.landing-page .landing-shell > .landing-preview,
body.landing-page .landing-shell > .landing-below-preview{
margin-top: 0;
}
body.landing-page .landing-shell > .landing-cal-peek{
margin-top: calc(var(--landing-section-gap) * -0.36);
}
body.landing-page .landing-shell > .landing-conversion-flow,
body.landing-page .landing-shell > .landing-how{
margin-top: calc(var(--landing-section-gap) * -0.44);
}
body.landing-page .landing-hero__stack,
body.landing-page .landing-hero__inner{
max-width: min(62rem, 100%);
gap: clamp(0.78rem, 1.7vw, 1.12rem);
}
body.landing-page .landing-hero__copy{
max-width: min(42rem, 100%);
}
body.landing-page .landing-hero__text{
max-width: 100%;
width: 100%;
margin: 0 0 0.42rem;
font-size: calc(clamp(2.05rem, 3.6vw, 2.85rem) * var(--hero-text-scale, 0.95));
line-height: 1.02;
white-space: normal;
text-align: center;
}
body.landing-page .landing-hero__sub{
max-width: min(36rem, 100%);
width: 100%;
padding: 0;
font-size: clamp(1.08rem, 1.75vw, 1.38rem);
line-height: 1.36;
white-space: normal;
text-align: center;
}
body.landing-page .landing-hero__ctaGroup{
margin-top: 0.58rem;
align-items: center;
}
body.landing-page .landing-hero__microtrust{
margin-top: 0.34rem;
align-items: center;
text-align: center;
}
body.landing-page .landing-hero-forecast{
max-width: min(28rem, 96%);
margin-left: auto;
margin-right: auto;
}
body.landing-page .landing-hero-viz{
padding: 18px 18px 14px;
border-radius: 20px;
}
body.landing-page .landing-insight__card{
max-width: 56rem;
border-radius: 15px;
}
body.landing-page .landing-preview__demo{
padding: 22px 24px 20px;
gap: 18px;
border-radius: 20px;
}
body.landing-page .landing-preview__tagline{
max-width: 34rem;
font-size: 1.14rem;
line-height: 1.24;
}
body.landing-page .landing-preview__main{
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.34fr);
gap: 16px 18px;
align-items: start;
width: 100%;
max-width: none;
}
body.landing-page .landing-preview--secondary .landing-preview__recPanel{
max-width: 80%;
padding: 18px 18px 16px;
border-radius: 16px;
}
body.landing-page .landing-preview--secondary .landing-preview__bills{
margin-top: 0.2rem;
padding-top: 0.34rem;
}
body.landing-page .landing-preview--secondary .landing-preview__trust{
margin-top: 0.22rem;
}
body.landing-page .landing-preview__storyChart{
min-height: 0;
}
body.landing-page .landing-preview__storySvg{
transform: scale(1.32);
margin-bottom: calc((1 - 1.32) * 128 / 500 * 100%);
}
body.landing-page .landing-preview__transferLine{
margin-bottom: 0.2rem;
font-size: 0.92rem;
}
body.landing-page .landing-preview__transferAmt{
font-size: clamp(1.85rem, 3.05vw, 2.38rem);
}
body.landing-page .landing-preview__transferFoot{
margin-top: 0.42rem;
max-width: 24rem;
font-size: 0.96rem;
line-height: 1.38;
}
body.landing-page .landing-preview__trust{
margin-top: 0.22rem;
}
body.landing-page .landing-trust-row{
margin-top: 4px;
}
body.landing-page .landing-cal-peek{
padding: 4px 0;
}
body.landing-page .landing-cal-peek__inner{
grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
gap: 18px clamp(26px, 3.2vw, 40px);
align-items: start;
}
body.landing-page .landing-cal-peek__copy{
max-width: 22rem;
padding-top: 10px;
justify-self: start;
}
body.landing-page .landing-cal-peek__title{
margin-bottom: 0.5rem;
max-width: 11ch;
font-size: clamp(1.38rem, 2.25vw, 1.76rem);
line-height: 1.1;
}
body.landing-page .landing-cal-peek__lede{
max-width: 22ch;
font-size: 0.98rem;
line-height: 1.48;
}
body.landing-page .landing-cal-peek__frame{
align-self: start;
border-radius: 16px;
box-shadow: 0 14px 32px -20px rgba(11, 61, 46, 0.18);
}
body.landing-page .landing-cal-peek__chrome{
padding: 8px 14px 6px;
}
body.landing-page .landing-cal-peek__month{
font-size: 0.84rem;
}
body.landing-page .landing-cal-peek__hint{
font-size: 0.74rem;
}
body.landing-page .landing-cal-peek__svg{
min-height: 0;
}
body.landing-page .landing-below-preview{
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(18rem, 0.95fr);
column-gap: clamp(18px, 2.6vw, 30px);
align-items: stretch;
padding: 0;
}
body.landing-page .landing-below-preview .landing-how__title,
body.landing-page .landing-below-preview .landing-why__title,
body.landing-page .landing-below-preview .landing-offer__heading{
min-height: 0;
margin-bottom: 10px;
font-size: 11px;
}
body.landing-page .landing-below-preview .landing-how__copy,
body.landing-page .landing-below-preview .landing-why__copy,
body.landing-page .landing-below-preview .landing-offer__panel{
height: 100%;
}
body.landing-page .landing-below-preview .landing-how__steps{
gap: 12px;
}
body.landing-page .landing-below-preview .landing-how__stepTitle{
font-size: 14px;
}
body.landing-page .landing-below-preview .landing-how__stepBody{
font-size: 12px;
}
body.landing-page .landing-below-preview .landing-why__list{
gap: 12px;
}
body.landing-page .landing-below-preview .landing-why__line{
max-width: 29ch;
gap: 3px;
font-size: 12.5px;
}
body.landing-page .landing-below-preview .landing-why__line strong{
font-size: 13px;
}
body.landing-page .landing-below-preview .landing-offer{
align-self: stretch;
}
body.landing-page .landing-below-preview .landing-offer__panel{
min-height: 100%;
padding: 20px 22px;
border-radius: 16px;
gap: 14px;
justify-content: space-between;
}
body.landing-page .landing-below-preview .landing-offer__copy{
flex: 1 1 auto;
gap: 6px;
}
body.landing-page .landing-below-preview .landing-offer--calm .landing-offer__tagline{
margin-top: 0;
font-size: 13px;
line-height: 1.4;
}
body.landing-page .landing-below-preview .landing-offer--calm .landing-offer__trial{
font-size: 12.5px;
font-weight: 700;
color: rgba(17, 24, 39, 0.92);
}
body.landing-page .landing-below-preview .landing-offer--calm .landing-offer__price{
font-size: 12px;
color: rgba(75, 85, 99, 0.68);
}
body.landing-page .landing-below-preview .landing-offer--calm .landing-offer__bullets{
margin-top: 8px;
gap: 6px;
}
body.landing-page .landing-below-preview .landing-offer__bullets li{
font-size: 11.75px;
line-height: 1.38;
}
body.landing-page .landing-below-preview .landing-offer__cta{
width: 100%;
max-width: 17rem;
align-self: flex-start;
min-height: 44px;
padding: 0 1.35rem;
font-size: 0.98rem;
font-weight: 700;
letter-spacing: 0.015em;
color: #fff;
background: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 82%, #000 18%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.14) inset,
0 4px 14px rgba(11, 61, 46, 0.16);
}
body.landing-page .landing-below-preview .landing-offer__cta:hover{
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.14) inset,
0 8px 22px rgba(11, 61, 46, 0.22);
filter: brightness(1.04);
}
body.landing-page .landing-emotional-band{
grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.9fr);
gap: clamp(22px, 3vw, 36px);
padding: 24px 28px;
border-radius: 18px;
}
body.landing-page .landing-shift{
width: 100%;
max-width: none;
justify-self: stretch;
}
body.landing-page .landing-shift__quoteCard{
max-width: 34rem;
padding: 0;
border: none;
background: transparent;
box-shadow: none;
}
body.landing-page .landing-shift__story{
gap: 4px;
}
body.landing-page .landing-shift__story + .landing-shift__story{
margin-top: 16px;
padding-top: 16px;
}
body.landing-page .landing-shift__tag{
margin-bottom: 0.08rem;
font-size: 0.62rem;
}
body.landing-page .landing-shift__line--before{
max-width: 27ch;
font-size: 0.92rem;
line-height: 1.42;
}
body.landing-page .landing-shift__after{
max-width: 24ch;
font-size: clamp(1.06rem, 1.5vw, 1.22rem);
line-height: 1.16;
}
body.landing-page .landing-shift__personCopy{
margin-top: 8px;
max-width: 33ch;
font-size: 0.82rem;
line-height: 1.42;
}
body.landing-page .landing-for{
width: 100%;
padding: 0 0 0 26px;
border: none;
border-left: 1px solid rgba(11, 61, 46, 0.09);
border-radius: 0;
background: transparent;
box-shadow: none;
justify-self: stretch;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
}
body.landing-page .landing-for__title{
margin-bottom: 10px;
font-size: 0.64rem;
}
body.landing-page .landing-for__list{
gap: 10px;
}
body.landing-page .landing-for__list li{
max-width: none;
font-size: 0.86rem;
line-height: 1.34;
padding-left: 1.24em;
}
body.landing-page .app-footer{
margin-top: 20px;
}
}
/* Ensure the HTML `hidden` attribute always wins (UA defaults can be overridden by our layout rules). */
[hidden]{
display: none !important;
}
.container{
max-width: 1920px;
width: 100%;
margin: 0 auto;
/* No bottom padding: avoids a sliver of page background showing past the full-bleed footer */
padding: 0 12px 0;
min-height: 100vh;
min-height: 100dvh;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.top-nav{
position: sticky;
top: 0;
z-index: 30;
padding: 12px 0 8px;
background: var(--accent);
border-bottom: 1px solid rgba(0,0,0,0.18);
/* Full-bleed header even inside .container padding */
width: 100vw;
margin-left: calc(50% - 50vw);
}
.top-nav__inner{
display: grid;
grid-template-columns: 0.9fr auto 0.9fr;
align-items: center;
gap: 10px;
/* Restore the container padding inside the full-bleed header */
max-width: 1920px;
margin: 0 auto;
padding: 0 12px;
}
.top-nav__actions{
display: flex;
align-items: center;
justify-content: flex-end;
min-width: 0;
padding-right: 10px;
}
/* Match Admin (link) to Logout (button): same font metrics + box + radius as top-nav buttons */
.top-nav__logout,
.top-nav__actions .top-nav__admin{
box-sizing: border-box;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
padding: 8px 12px;
border-radius: var(--btn-radius);
border: 1px solid rgba(255,255,255,0.28);
background: rgba(255,255,255,0.10);
color: #fff;
cursor: pointer;
}
.top-nav__actions .top-nav__admin{
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
margin-right: 8px;
}
.top-nav__logout:hover,
.top-nav__admin:hover{
filter: none;
background: rgba(255,255,255,0.16);
border-color: rgba(255,255,255,0.34);
}
.top-nav__logout:focus-visible,
.top-nav__admin:focus-visible{
outline: 2px solid rgba(255,255,255,0.85);
outline-offset: 2px;
}
.view-only-banner{
margin: 0 12px 10px;
padding: 8px 10px;
border-radius: 8px;
background: rgba(167, 55, 68, 0.12);
border: 1px solid rgba(167, 55, 68, 0.35);
color: var(--text);
font-size: 13px;
line-height: 1.35;
}
.settings-subhead{
font-size: 15px;
font-weight: 600;
margin: 16px 0 8px;
}
.family-member-row{
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.family-member-row:last-child{
border-bottom: none;
}
.top-nav__inner--simple{
grid-template-columns: 1fr;
justify-items: center;
}
.top-nav__inner--simple .top-nav__title{
justify-content: center;
width: 100%;
padding-left: 0;
}
.top-nav__inner--simple .app-title{
text-align: center;
}
.top-nav__title{
display: flex;
align-items: center;
min-width: 0;
padding-left: 10px;
}
.app-title{
margin: 0;
font-size: 34px;
font-weight: 800;
letter-spacing: 0.2px;
line-height: 1.05;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Wordmark image (replaces "Balance Whiz" text). Source may be a square brand sheet; crop to top band. */
.app-title.app-title--logo{
font-size: 0;
line-height: 0;
letter-spacing: 0;
color: transparent;
white-space: normal;
overflow: visible;
}
.app-title--logo > a{
display: inline-flex;
align-items: center;
justify-content: flex-start;
padding: 0;
border-radius: 0;
background: transparent;
border: none;
box-shadow: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
text-decoration: none;
}
.top-nav .app-title--logo > a{
padding: 4px 12px 4px 6px;
}
.top-nav .app-title--logo .app-logo{
display: block;
width: auto;
max-width: min(300px, 62vw);
height: 44px;
object-fit: contain;
object-position: 0 50%;
border-radius: 0;
}
.app-title--logo .app-logo{
display: block;
width: min(200px, 48vw);
height: 30px;
object-fit: contain;
object-position: 0 50%;
border-radius: 0;
}
@media (max-width: 860px){
:root{
/* Top nav stacks title + tabs, so it is taller on small screens. */
--app-top-nav-offset: 108px;
}
.top-nav__inner{
grid-template-columns: 1fr;
justify-items: center;
row-gap: 10px;
}
.top-nav__title{
justify-content: center;
width: 100%;
}
.app-title{
font-size: 28px;
text-align: center;
}
.top-nav .app-title--logo .app-logo{
height: 40px;
max-width: min(272px, 58vw);
}
/* Plans / admin / signup: keep title left + actions right on narrow screens (overrides generic centered nav). */
body.plans-page .top-nav .top-nav__inner.top-nav__inner--simple,
body.admin-page .top-nav .top-nav__inner.top-nav__inner--simple,
body.signup-page .top-nav .top-nav__inner.top-nav__inner--simple{
grid-template-columns: 1fr auto;
justify-items: start;
row-gap: 0;
}
body.plans-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__title,
body.admin-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__title,
body.signup-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__title{
justify-content: flex-start;
width: auto;
padding-left: 10px;
}
body.plans-page .top-nav .top-nav__inner.top-nav__inner--simple .app-title,
body.admin-page .top-nav .top-nav__inner.top-nav__inner--simple .app-title,
body.signup-page .top-nav .top-nav__inner.top-nav__inner--simple .app-title{
text-align: left;
}
body.plans-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__actions,
body.admin-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__actions,
body.signup-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__actions{
justify-self: end;
}
body.landing-page .top-nav .top-nav__inner.top-nav__inner--simple{
grid-template-columns: auto 1fr;
justify-items: start;
row-gap: 0;
}
body.landing-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__title{
justify-content: flex-start;
width: auto;
min-width: 0;
padding-left: 0;
}
body.landing-page .top-nav .top-nav__inner.top-nav__inner--simple .app-title{
text-align: left;
}
body.landing-page .top-nav .top-nav__inner.top-nav__inner--simple .top-nav__actions{
justify-self: end;
}
}
@media (max-width: 1120px){
.container{
padding-left: 10px;
padding-right: 10px;
}
.top-nav__inner{
padding-left: 10px;
padding-right: 10px;
}
.app-layout{
grid-template-columns: 1fr;
}
.sidebar{
position: static;
top: auto;
max-height: none;
padding-right: 0;
background: transparent;
z-index: auto;
}
.main-column{
padding-right: 0;
}
}
.top-nav__tabs{
display: inline-flex;
gap: 6px;
padding: 0;
border-radius: 0;
border: none;
background: transparent;
}
.top-nav__tab{
font: inherit;
position: relative;
border-radius: 8px;
padding: 7px 11px;
border: 1px solid transparent;
background: transparent;
color: rgba(255, 255, 255, 0.82);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
}
.top-nav__tab:visited{
color: rgba(255, 255, 255, 0.82);
}
.top-nav__tab.is-active:visited{
color: rgba(255, 255, 255, 0.98);
}
.top-nav__tab:hover{
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.96);
}
.top-nav__tab.is-active{
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.98);
font-weight: 650;
}
.top-nav__tab.is-active::after{
content: "";
position: absolute;
left: 9px;
right: 9px;
bottom: 5px;
height: 2px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.48);
transform: none;
width: auto;
border: none;
}
/* Light SaaS footer — full-bleed like legacy bar, but airy / trust-forward */
.app-footer{
flex-shrink: 0;
margin-top: auto;
padding: 22px 0 max(32px, env(safe-area-inset-bottom, 0px));
background: #f7f6f4;
border-top: 1px solid rgba(17, 24, 39, 0.07);
width: 100vw;
margin-left: calc(50% - 50vw);
color: rgba(55, 65, 81, 0.68);
font-size: 12px;
line-height: 1.38;
}
.app-footer__inner{
/* Match the landing-page content rail so footer columns line up with
the sections above. */
max-width: 64rem;
margin: 0 auto;
padding: 0 max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px));
box-sizing: border-box;
}
.app-footer__grid{
display: grid;
grid-template-columns: minmax(0, 1.55fr) auto;
gap: clamp(20px, 3.5vw, 36px);
align-items: start;
}
.app-footer__nav{
display: grid;
grid-template-columns: auto auto;
gap: clamp(28px, 3.2vw, 40px);
align-items: start;
padding-top: 2px;
}
.app-footer__col{
min-width: 0;
}
.app-footer__col--brand{
min-width: 0;
max-width: 22rem;
}
.app-footer__logo{
display: inline-block;
margin: 0 0 8px;
line-height: 0;
}
.app-footer__logo-img{
display: block;
height: 32px;
width: auto;
}
.app-footer__tagline{
margin: 0 0 6px;
max-width: 18rem;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
color: rgba(55, 65, 81, 0.68);
}
.app-footer__copyright{
margin: 0;
font-size: 10.5px;
color: rgba(55, 65, 81, 0.48);
}
.app-footer__madein{
margin: 0.3rem 0 0;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(55, 65, 81, 0.44);
}
.app-footer__heading{
margin: 0 0 7px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(31, 41, 55, 0.52);
}
.app-footer__list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.app-footer__link,
.app-footer__text{
display: inline-block;
padding: 2px 0;
color: rgba(55, 65, 81, 0.7);
font-weight: 450;
font-size: 12px;
line-height: 1.32;
text-decoration: none;
border-radius: 4px;
transition: color 0.15s ease;
}
.app-footer__text{
color: rgba(55, 65, 81, 0.45);
}
.app-footer__link:hover{
color: var(--accent);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
text-underline-offset: 2px;
}
.app-footer__link:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
outline-offset: 2px;
}
.app-footer__bullets{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
font-size: 12.5px;
line-height: 1.45;
color: rgba(55, 65, 81, 0.78);
}
.app-footer__bullets li{
position: relative;
padding-left: 1.05rem;
}
.app-footer__bullets li::before{
content: "✓";
position: absolute;
left: 0;
top: 0;
font-size: 0.75em;
color: color-mix(in srgb, var(--accent) 55%, rgba(55, 65, 81, 0.35));
}
@media (max-width: 720px){
.app-footer__grid{
grid-template-columns: 1fr;
gap: 22px;
justify-items: center;
text-align: center;
}
.app-footer__col--brand{
max-width: none;
}
.app-footer__tagline{
margin-left: auto;
margin-right: auto;
}
.app-footer__nav{
width: 100%;
max-width: 18rem;
grid-template-columns: 1fr 1fr;
gap: 24px 32px;
justify-content: center;
padding-top: 0;
}
.app-footer__col{
text-align: center;
}
}
@media (max-width: 520px){
.app-footer{
padding-top: 18px;
padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
}
.app-footer__nav{
grid-template-columns: 1fr;
gap: 18px;
max-width: 12rem;
}
}
body.landing-page .app-footer{
margin-top: clamp(0.88rem, 1.73vw, 1.36rem);
padding-top: 18px;
padding-bottom: max(26px, env(safe-area-inset-bottom, 0px));
}
body.landing-page .app-footer__inner{
max-width: var(--landing-content-max, 64rem);
}
/* Landing page cleanup: calmer guided homepage story */
body.landing-page{
--landing-content-max: min(71rem, calc(100vw - 2.25rem));
--landing-section-gap: clamp(0.7rem, 1.53vw, 1.26rem);
--landing-section-gap-tight: clamp(0.62rem, 1.36vw, 0.88rem);
}
body.landing-page .landing-main{
padding: clamp(0.5rem, 1.05vw, 0.82rem) 0 clamp(0.78rem, 1.65vw, 1.2rem);
background: #fff;
}
body.landing-page .landing-shell{
gap: var(--landing-section-gap);
max-width: var(--landing-content-max);
padding-left: max(1.15rem, env(safe-area-inset-left));
padding-right: max(1.15rem, env(safe-area-inset-right));
}
body.landing-page .landing-shell > .landing-preview,
body.landing-page .landing-shell > .landing-cal-peek,
body.landing-page .landing-shell > .landing-conversion-flow{
margin-top: 0;
}
body.landing-page .landing-shell > .landing-features{
margin-top: calc(var(--landing-section-gap) * -0.5);
}
body.landing-page .landing-shell > .landing-cal-peek:not(.landing-cal-peek--primary){
margin-top: calc(var(--landing-section-gap) * -0.36);
}
body.landing-page .landing-shell > .landing-conversion-flow,
body.landing-page .landing-shell > .landing-how{
margin-top: calc(var(--landing-section-gap) * -0.44);
}
body.landing-page .landing-conversion-flow{
display: flex;
flex-direction: column;
gap: clamp(0.4rem, 0.87vw, 0.6rem);
width: 100%;
padding: clamp(0.28rem, 0.7vw, 0.48rem) 0 clamp(0.12rem, 0.38vw, 0.26rem);
border-radius: 18px;
background: linear-gradient(180deg, rgba(248, 252, 250, 0.55) 0%, rgba(255, 255, 255, 0) 88%);
}
body.landing-page .landing-shell > .landing-how,
body.landing-page .landing-conversion-flow .landing-how{
margin: 0;
}
body.landing-page .landing-shell > .landing-offer,
body.landing-page .landing-conversion-flow .landing-offer{
margin: clamp(0.42rem, 0.96vw, 0.66rem) 0 0;
}
body.landing-page .landing-hero{
padding-top: clamp(0.4rem, 1.1vw, 0.75rem);
padding-bottom: 0;
}
body.landing-page .landing-hero__stack,
body.landing-page .landing-hero__inner{
padding: 0;
gap: clamp(0.32rem, 0.75vw, 0.52rem);
}
body.landing-page .landing-hero__copy{
max-width: min(40rem, 100%);
}
body.landing-page .landing-hero__text{
margin: 0 0 0.32rem;
max-width: 100%;
width: 100%;
font-size: calc(clamp(1.82rem, 3.55vw + 0.45rem, 2.72rem) * var(--hero-text-scale, 0.95));
line-height: 1.05;
white-space: normal;
text-align: center;
}
body.landing-page .landing-hero__sub{
margin: 0;
max-width: min(36rem, 100%);
width: max-content;
padding: 0;
font-size: clamp(0.94rem, 1.45vw, 1.18rem);
line-height: 1.34;
font-weight: 500;
color: rgba(71, 85, 105, 0.86);
white-space: normal;
text-align: center;
}
body.landing-page .landing-hero__ctaGroup{
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin: 0.42rem 0 0;
width: 100%;
max-width: none;
}
body.landing-page .landing-hero__cta{
margin: 0;
min-height: 44px;
padding: 0 1.45rem;
border-radius: 11px;
font-size: 0.98rem;
font-weight: 750;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 5px 16px rgba(11, 61, 46, 0.2);
}
body.landing-page .landing-hero__microtrust{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 0.16rem 0.36rem;
margin: 0.34rem 0 0;
max-width: min(40rem, 100%);
width: 100%;
padding: 0;
font-size: clamp(0.62rem, 0.86vw, 0.71rem);
line-height: 1.42;
font-weight: 400;
letter-spacing: 0.01em;
color: rgba(71, 85, 105, 0.58);
text-align: center;
}
body.landing-page .landing-hero__microtrust-item{
display: inline-flex;
align-items: baseline;
gap: 0.16em;
white-space: nowrap;
}
body.landing-page .landing-hero__microtrust-check{
flex: 0 0 auto;
font-size: 0.72em;
font-weight: 500;
line-height: 1;
color: rgba(71, 85, 105, 0.42);
}
body.landing-page .landing-hero__microtrust__sep{
display: inline;
opacity: 0.34;
user-select: none;
}
body.landing-page .landing-hero__viz{
justify-self: end;
max-width: 100%;
margin-top: 0.12rem;
transform-origin: 50% 55%;
animation: landingHeroVizFloat 8s ease-in-out infinite;
}
@media (min-width: 821px){
body.landing-page .landing-hero__viz{
margin-top: 0.15rem;
}
}
body.landing-page .landing-hero__viz:hover{
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce){
body.landing-page .landing-hero__viz{
animation: none;
}
}
body.landing-page .landing-hero-viz{
border-radius: 16px;
padding: 15px 16px 13px;
transform-origin: 50% 55%;
transition:
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s ease;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.93) inset,
0 2px 5px rgba(11, 61, 46, 0.042),
0 14px 36px -22px rgba(11, 61, 46, 0.15),
0 26px 50px -32px rgba(11, 61, 46, 0.1);
border-color: rgba(11, 61, 46, 0.11);
filter: saturate(1.02) contrast(1.01);
}
body.landing-page .landing-hero-cal.landing-hero-viz{
padding: 16px 20px 14px;
}
body.landing-page .landing-hero-viz__week{
gap: 6px;
}
body.landing-page .landing-hero-viz__cell{
padding: 7px 4px 8px;
}
body.landing-page .landing-hero-viz__d{
font-size: 11px;
}
body.landing-page .landing-hero-viz__b{
font-size: 12px;
}
body.landing-page .landing-hero-viz__chartWrap{
margin-top: 9px;
}
body.landing-page .landing-hero-viz__spark{
height: clamp(56px, 4.95vw, 64px);
margin-top: 9px;
}
body.landing-page .landing-hero-viz__timeline .landing-hero-viz__spark{
margin-top: 0;
}
body.landing-page .landing-hero__viz:hover .landing-hero-viz{
transform: translateY(-3px) scale(1.02);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 6px 12px rgba(11, 61, 46, 0.055),
0 18px 40px -22px rgba(11, 61, 46, 0.16),
0 32px 56px -32px rgba(11, 61, 46, 0.12);
}
@media (prefers-reduced-motion: reduce){
body.landing-page .landing-hero__viz:hover .landing-hero-viz{
transform: none;
}
}
body.landing-page .landing-hero-viz__foot{
margin-top: 5px;
}
body.landing-page .landing-insight{
padding: 0;
width: 100%;
}
body.landing-page .landing-trust-micro{
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: center;
gap: 0.15rem 0.42rem;
width: 100%;
margin: calc(clamp(0.08rem, 0.85vw, 0.52rem) - 2lh + 24px) auto 24px;
padding: 0;
box-sizing: border-box;
text-align: center;
font-size: 0.695rem;
font-weight: 500;
line-height: 1.42;
letter-spacing: 0.016em;
color: rgba(71, 85, 105, 0.48);
}
body.landing-page .landing-trust-micro__dot{
opacity: 0.42;
user-select: none;
}
body.landing-page .landing-preview{
display: grid;
gap: clamp(0.62rem, 1.35vw, 0.88rem);
}
body.landing-page .landing-section{
position: relative;
isolation: isolate;
}
body.landing-page .landing-section--tint-safe{
margin-top: clamp(0.85rem, 2.2vw, 1.65rem);
padding: clamp(2rem, 4.8vw, 3.4rem) 0 clamp(1.35rem, 3vw, 2.1rem);
}
body.landing-page .landing-section--tint-safe::before{
content: "";
position: absolute;
z-index: 0;
top: clamp(0.65rem, 1.8vw, 1.1rem);
right: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: linear-gradient(
180deg,
rgba(233, 252, 244, 0.72) 0%,
rgba(248, 250, 249, 0.38) 52%,
rgba(255, 255, 255, 0.94) 100%
);
pointer-events: none;
}
body.landing-page .landing-section--tint-safe > *{
position: relative;
z-index: 1;
}
/* Safe-to-move preview: tint wraps headline, subheading, and demo as one panel */
body.landing-page .landing-preview.landing-section--tint-safe{
margin-top: clamp(1rem, 2.42vw, 1.7rem);
padding: clamp(1.28rem, 2.7vw, 1.75rem) 0 clamp(0.42rem, 0.95vw, 0.6rem);
}
body.landing-page .landing-preview.landing-section--tint-safe::before{
top: 0;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 1) 0%,
rgba(240, 253, 244, 0.55) 22%,
rgba(222, 248, 236, 0.78) 48%,
rgba(237, 252, 245, 0.42) 78%,
rgba(255, 255, 255, 0.98) 100%
);
}
body.landing-page .landing-preview.landing-section--tint-safe .landing-preview__intro{
padding-top: 0;
}
body.landing-page .landing-section--tint-neutral{
padding: clamp(0.32rem, 0.78vw, 0.52rem) 0 clamp(0.29rem, 0.7vw, 0.43rem);
}
body.landing-page .landing-section--tint-neutral::before{
content: "";
position: absolute;
z-index: 0;
inset: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: linear-gradient(
180deg,
rgba(248, 250, 252, 0.96) 0%,
rgba(241, 245, 249, 0.38) 100%
);
pointer-events: none;
}
body.landing-page .landing-section--tint-neutral > *{
position: relative;
z-index: 1;
}
body.landing-page .landing-preview__intro{
max-width: 40rem;
padding-top: clamp(0.02rem, 0.35vw, 0.15rem);
margin-bottom: 0;
}
body.landing-page .landing-preview__title{
margin: 0 0 0.22rem;
font-size: clamp(1.45rem, 2.7vw, 1.88rem);
line-height: 1.08;
font-weight: 800;
letter-spacing: -0.026em;
color: rgba(15, 23, 42, 0.99);
}
body.landing-page .landing-preview__lede{
margin: 0;
max-width: 38rem;
font-size: clamp(0.94rem, 1.42vw, 1.03rem);
line-height: 1.42;
font-weight: 500;
color: rgba(51, 65, 85, 0.9);
}
body.landing-page .landing-preview__demo{
gap: 0.52rem;
width: 100%;
padding: 0.72rem 0.82rem 0.68rem;
border-radius: 17px;
border: 1px solid rgba(11, 61, 46, 0.12);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(252, 253, 252, 0.985) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 14px 32px -30px rgba(11, 61, 46, 0.24);
transition: box-shadow 0.32s ease, border-color 0.32s ease, transform 0.32s ease;
box-sizing: border-box;
}
body.landing-page .landing-preview__tagline{
display: none;
}
body.landing-page .landing-preview__main{
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.34fr);
gap: 0.62rem 0.88rem;
align-items: start;
width: 100%;
max-width: none;
margin: 0;
}
body.landing-page .landing-preview__leftCol{
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
min-width: 0;
}
body.landing-page .landing-preview--secondary .landing-preview__recPanel{
display: flex;
flex-direction: column;
gap: 0.22rem;
width: 100%;
max-width: 80%;
align-self: flex-start;
padding: 0.72rem 0.82rem 0.62rem;
border-radius: 15px;
border: 1px solid rgba(11, 61, 46, 0.11);
background:
radial-gradient(420px 160px at 10% 0%, rgba(4, 120, 87, 0.14) 0%, rgba(4, 120, 87, 0) 70%),
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 253, 245, 0.65) 100%);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
box-sizing: border-box;
}
body.landing-page .landing-preview--secondary .landing-preview__transferBand{
width: 100%;
max-width: none;
align-self: stretch;
padding: 0;
border: none;
border-radius: 0;
background: none;
box-shadow: none;
}
body.landing-page .landing-preview__transferLine{
margin-bottom: 0.12rem;
font-size: 0.82rem;
font-weight: 600;
color: rgba(55, 65, 81, 0.84);
}
body.landing-page .landing-preview__transferAmt{
font-size: clamp(2rem, 3.5vw, 2.65rem);
font-weight: 750;
line-height: 0.94;
letter-spacing: -0.02em;
color: rgba(11, 61, 46, 0.98);
}
body.landing-page .landing-preview__transferFoot{
margin: 0.28rem 0 0;
max-width: none;
font-size: 0.86rem;
line-height: 1.38;
font-weight: 500;
color: rgba(30, 41, 55, 0.88);
}
body.landing-page .landing-preview--secondary .landing-preview__trust{
display: inline-flex;
align-items: center;
gap: 0.32rem;
margin: 0.18rem 0 0;
padding: 0.34rem 0.48rem 0.34rem 0.4rem;
max-width: 100%;
box-sizing: border-box;
border-radius: 999px;
border: 1px solid rgba(4, 120, 87, 0.2);
background: linear-gradient(180deg, rgba(236, 253, 245, 0.95) 0%, rgba(220, 248, 232, 0.55) 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
align-self: flex-start;
}
body.landing-page .landing-preview__trustIcon{
width: 1.1rem;
height: 1.1rem;
font-size: 0.78rem;
background: rgba(4, 120, 87, 0.2);
color: rgba(4, 100, 70, 0.98);
border: 1px solid rgba(4, 120, 87, 0.22);
}
body.landing-page .landing-preview__trustText{
font-size: 0.74rem;
font-weight: 650;
line-height: 1.28;
color: rgba(15, 60, 45, 0.9);
letter-spacing: 0.01em;
}
body.landing-page .landing-preview--secondary .landing-preview__bills{
width: 100%;
margin: 0.14rem 0 0;
padding-top: 0.28rem;
border-top: 1px solid rgba(11, 61, 46, 0.08);
box-sizing: border-box;
}
body.landing-page .landing-preview__billsHead{
margin: 0 0 0.18rem;
font-size: 0.65rem;
font-weight: 750;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.68);
}
body.landing-page .landing-preview--secondary .landing-preview__billList{
gap: 0.12rem;
width: 100%;
max-width: none;
}
body.landing-page .landing-preview__billList li{
font-size: 0.72rem;
font-weight: 400;
color: rgba(30, 41, 55, 0.78);
padding: 0.18rem 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.055);
justify-content: space-between;
gap: 0.65rem;
}
body.landing-page .landing-preview__billList li:last-child{
border-bottom: none;
padding-bottom: 0;
}
body.landing-page .landing-preview__billList li span:first-child{
padding-right: 0.65rem;
flex: 1 1 auto;
min-width: 0;
}
body.landing-page .landing-preview__billList li span:last-child{
font-size: 0.67rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: rgba(71, 85, 105, 0.7);
text-align: right;
flex: 0 0 auto;
min-width: 3.2rem;
}
body.landing-page .landing-preview__story{
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0.28rem;
margin: 0;
width: 100%;
min-width: 0;
align-self: stretch;
min-height: 0;
padding: 0.22rem 0.18rem 0.16rem;
border-radius: 13px;
border: 1px solid rgba(11, 61, 46, 0.08);
background: rgba(251, 252, 251, 0.88);
box-sizing: border-box;
}
body.landing-page .landing-preview__storyCap{
margin: 0;
padding: 0 0.06rem;
}
body.landing-page .landing-preview__storyCapHead{
margin: 0 0 0.12rem;
font-size: 0.72rem;
font-weight: 650;
letter-spacing: -0.01em;
text-transform: none;
color: rgba(51, 65, 85, 0.78);
}
body.landing-page .landing-preview__storyCapText{
margin: 0;
max-width: 36rem;
font-size: 0.78rem;
line-height: 1.34;
font-weight: 500;
color: rgba(71, 85, 105, 0.78);
}
body.landing-page .landing-preview__storyChart{
flex: 1 1 auto;
width: 100%;
min-height: 0;
margin: 0;
padding: 0 40px;
overflow: hidden;
box-sizing: border-box;
line-height: 0;
}
body.landing-page .landing-preview__storySvg{
display: block;
width: 100%;
height: auto;
aspect-ratio: 500 / 128;
transform: scale(1.28);
transform-origin: top center;
margin-bottom: calc((1 - 1.28) * 128 / 500 * 100%);
}
body.landing-page .landing-preview__storyLine{
stroke: rgba(11, 61, 46, 0.92);
stroke-width: 4.75;
}
body.landing-page .landing-preview__bufferLine{
stroke: rgba(148, 163, 184, 0.55);
stroke-dasharray: 4 4;
stroke-width: 1;
}
body.landing-page .landing-preview__markerDot--start{
fill: rgba(148, 163, 184, 0.55);
stroke: rgba(255, 255, 255, 0.92);
stroke-width: 0.75;
}
body.landing-page .landing-preview__markerLabel{
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 6.6px;
font-weight: 600;
letter-spacing: 0.01em;
}
body.landing-page .landing-preview__markerLabel--start{
font-weight: 500;
fill: rgba(100, 116, 139, 0.68);
}
body.landing-page .landing-preview__markerDot--in{
fill: rgba(4, 120, 87, 0.78);
stroke: rgba(255, 255, 255, 0.92);
stroke-width: 0.75;
}
body.landing-page .landing-preview__markerDot--out{
fill: rgba(167, 55, 68, 0.72);
stroke: rgba(255, 255, 255, 0.92);
stroke-width: 0.75;
}
body.landing-page .landing-preview__markerLabel--in{
fill: rgba(4, 120, 87, 0.9);
}
body.landing-page .landing-preview__markerLabel--out{
fill: rgba(167, 55, 68, 0.9);
}
body.landing-page .landing-preview__minBalanceLabel{
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-size: 6px;
font-weight: 500;
letter-spacing: 0.01em;
fill: rgba(100, 116, 139, 0.65);
}
body.landing-page .landing-cal-peek{
padding: clamp(0.18rem, 0.52vw, 0.42rem) 0;
border-radius: 0;
background: transparent;
border: none;
}
body.landing-page .landing-section--surface-white.landing-cal-peek{
position: relative;
isolation: isolate;
}
body.landing-page .landing-section--surface-white.landing-cal-peek::before{
content: "";
position: absolute;
z-index: 0;
inset: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: #fff;
pointer-events: none;
}
body.landing-page .landing-section--surface-white.landing-cal-peek .landing-cal-peek__inner{
position: relative;
z-index: 1;
}
body.landing-page .landing-cal-peek__inner{
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: 0.62rem 1.05rem;
align-items: center;
}
body.landing-page .landing-cal-peek__copy{
max-width: 21rem;
padding-top: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.22rem;
align-self: center;
}
body.landing-page .landing-cal-peek__title{
margin: 0 0 0.22rem;
max-width: 13ch;
font-size: clamp(1.45rem, 2.55vw, 1.9rem);
line-height: 1.12;
}
body.landing-page .landing-cal-peek__lede{
max-width: 26ch;
font-size: clamp(0.95rem, 1.45vw, 1.02rem);
line-height: 1.48;
}
body.landing-page .landing-cal-peek__frame{
border-radius: 18px;
box-shadow: 0 14px 32px -24px rgba(11, 61, 46, 0.22);
}
body.landing-page .landing-cal-peek__chrome{
padding: 8px 12px 6px;
}
body.landing-page .landing-cal-peek__svg{
min-height: 0;
}
body.landing-page .landing-how{
padding: 0;
}
body.landing-page .landing-how__copy{
width: 100%;
max-width: 56rem;
margin: 0 auto;
padding: 0;
}
body.landing-page .landing-how__title{
margin: 0 0 0.18rem;
font-size: clamp(1.2rem, 2.15vw, 1.46rem);
font-weight: 880;
letter-spacing: -0.024em;
text-transform: none;
color: rgba(15, 23, 42, 1);
text-align: center;
}
body.landing-page .landing-how__grid{
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.44rem 0.5rem;
list-style: none;
position: relative;
}
body.landing-page .landing-how__grid::after{
content: "";
position: absolute;
z-index: 0;
left: calc(100% / 6);
right: calc(100% / 6);
top: 1.15rem;
height: 1px;
background: rgba(15, 23, 42, 0.1);
pointer-events: none;
}
body.landing-page .landing-how__card{
position: relative;
z-index: 1;
margin: 0;
padding: 0.82rem 0.94rem 0.78rem;
border-radius: 14px;
border: 1px solid rgba(11, 61, 46, 0.115);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(251, 253, 252, 0.94) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.88) inset,
0 8px 26px -22px rgba(11, 61, 46, 0.12);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0.42rem;
min-height: 0;
transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}
body.landing-page .landing-how__card:hover{
border-color: rgba(11, 61, 46, 0.14);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 14px 40px -28px rgba(11, 61, 46, 0.18);
transform: translateY(-2px);
}
body.landing-page .landing-how__stepTop{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.5rem;
min-height: 1.875rem;
}
body.landing-page .landing-how__stepIcon{
display: inline-flex;
align-items: center;
justify-content: flex-start;
width: 1.375rem;
height: 1.875rem;
flex-shrink: 0;
color: rgba(11, 61, 46, 0.36);
}
body.landing-page .landing-how__stepIcon svg{
display: block;
}
body.landing-page .landing-how__stepIcon--featured{
color: rgba(11, 61, 46, 0.38);
}
body.landing-page .landing-how__stepMark{
width: 30px;
height: 30px;
border-radius: 9px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.82rem;
font-weight: 740;
color: rgba(11, 61, 46, 0.84);
background: rgba(4, 120, 87, 0.06);
border: 1px solid rgba(11, 61, 46, 0.07);
}
body.landing-page .landing-how__stepMark--featured{
background: rgba(4, 120, 87, 0.075);
border-color: rgba(11, 61, 46, 0.075);
}
body.landing-page .landing-how__card--featured{
border-color: rgba(11, 61, 46, 0.115);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.995) 0%, rgba(252, 253, 252, 0.96) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.88) inset,
0 8px 26px -22px rgba(11, 61, 46, 0.12);
}
body.landing-page .landing-how__card--featured:hover{
border-color: rgba(11, 61, 46, 0.14);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 14px 40px -28px rgba(11, 61, 46, 0.18);
}
body.landing-page .landing-how__cardTitle{
margin: 0;
min-height: 2.15rem;
font-size: 0.96rem;
line-height: 1.2;
font-weight: 760;
letter-spacing: -0.015em;
color: rgba(15, 23, 42, 0.97);
}
body.landing-page .landing-how__cardBody{
margin: 0;
flex: 1 1 auto;
font-size: 0.84rem;
line-height: 1.42;
font-weight: 500;
color: rgba(71, 85, 105, 0.88);
}
body.landing-page .landing-offer{
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
body.landing-page .landing-offer__panel{
width: fit-content;
max-width: min(44rem, 100%);
margin-inline: auto;
padding: 0.76rem 0.82rem 0.78rem 0.95rem;
border-radius: 14px;
border: 1px solid rgba(11, 61, 46, 0.126);
background: linear-gradient(180deg, #fff 0%, rgba(249, 253, 251, 0.96) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 10px 34px -28px rgba(11, 61, 46, 0.18),
0 1px 2px rgba(11, 61, 46, 0.05);
display: grid;
grid-template-columns: minmax(0, max-content) auto;
align-items: center;
justify-content: center;
column-gap: clamp(0.38rem, 0.82vw, 0.58rem);
row-gap: 0.5rem;
box-sizing: border-box;
}
body.landing-page .landing-offer__content{
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0.08rem;
min-width: 0;
padding-top: 0.06rem;
}
body.landing-page .landing-offer__action{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-self: start;
align-self: center;
gap: 0.32rem;
margin: 0;
width: auto;
max-width: 100%;
padding: 0;
border: none;
}
body.landing-page .landing-offer__heading{
margin: 0 0 0.1rem;
min-height: 0;
font-size: clamp(1.08rem, 1.65vw, 1.38rem);
line-height: 1.12;
font-weight: 780;
letter-spacing: -0.018em;
text-transform: none;
color: rgba(30, 41, 59, 0.94);
}
body.landing-page .landing-offer__support{
margin: 0 0 0.18rem;
font-size: 0.9rem;
line-height: 1.38;
font-weight: 500;
color: rgba(71, 85, 105, 0.84);
max-width: 28rem;
}
body.landing-page .landing-offer__bullets{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem 0.85rem;
width: 100%;
max-width: none;
color: rgba(51, 65, 85, 0.78);
}
body.landing-page .landing-offer__bullets li{
display: flex;
align-items: baseline;
gap: 0.32rem;
font-size: 0.82rem;
line-height: 1.32;
font-weight: 500;
text-align: left;
width: auto;
}
body.landing-page .landing-offer__bullets li::before{
content: "";
flex: 0 0 auto;
width: 4px;
height: 4px;
margin-top: 0.5em;
border-radius: 999px;
background: rgba(4, 120, 87, 0.28);
}
body.landing-page .landing-offer__cta{
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0;
margin-bottom: 0;
min-height: 37px;
padding: 0 1.02rem;
white-space: nowrap;
border-radius: 10px;
font-size: 0.9rem;
font-weight: 650;
color: #fff;
background: var(--accent);
text-decoration: none;
border: 1px solid color-mix(in srgb, var(--accent) 82%, #000 18%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.13) inset,
0 4px 14px rgba(11, 61, 46, 0.1);
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
filter 0.2s ease,
border-color 0.2s ease;
}
body.landing-page .landing-offer__cta:hover{
transform: translateY(-0.5px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.15) inset,
0 8px 22px rgba(11, 61, 46, 0.14);
}
body.landing-page .landing-offer__footnote{
margin: 0;
max-width: 12rem;
font-size: 0.72rem;
line-height: 1.28;
font-weight: 500;
letter-spacing: 0.006em;
color: rgba(100, 116, 139, 0.62);
text-align: center;
}
body.landing-page .landing-offer__cta:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 3px;
}
@media (max-width: 820px){
body.landing-page .landing-offer__panel{
grid-template-columns: 1fr;
align-items: stretch;
width: 100%;
column-gap: 0;
row-gap: 0.48rem;
padding: 0.9rem 0.95rem 0.94rem;
max-width: none;
}
body.landing-page .landing-offer__content{
align-items: center;
text-align: center;
}
body.landing-page .landing-offer__action{
justify-self: stretch;
align-items: center;
align-self: stretch;
margin-top: 0;
width: 100%;
max-width: none;
padding: 0.12rem 0 0;
border: none;
gap: 0.28rem;
}
body.landing-page .landing-offer__bullets{
justify-content: center;
gap: 0.18rem 0.72rem;
}
body.landing-page .landing-offer__support{
max-width: 22rem;
margin-left: auto;
margin-right: auto;
}
body.landing-page .landing-offer__footnote{
max-width: none;
text-align: center;
}
}
@keyframes landingHeroVizFloat{
0%,
100%{
transform: translateY(0);
}
50%{
transform: translateY(-2px);
}
}
@keyframes landingSparkDraw{
to{
stroke-dashoffset: 0;
}
}
@keyframes landingPreviewCurve{
to{
stroke-dashoffset: 0;
}
}
body.landing-page .landing-reveal{
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.72s ease,
transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
body.landing-page .landing-reveal--in{
opacity: 1;
transform: none;
will-change: auto;
}
body.landing-page .landing-hero-viz__sparkLine{
stroke-dasharray: 360;
stroke-dashoffset: 360;
animation: landingSparkDraw 2s cubic-bezier(0.45, 0, 0.2, 1) 0.22s forwards;
}
body.landing-page .landing-preview__curve{
stroke-dasharray: 700;
stroke-dashoffset: 700;
animation: landingPreviewCurve 2.45s ease-out 0.45s forwards;
}
body.landing-page .landing-preview__demo:hover{
transform: translateY(-3px);
border-color: rgba(11, 61, 46, 0.12);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.88) inset,
0 20px 48px -30px rgba(11, 61, 46, 0.26);
}
@media (prefers-reduced-motion: reduce){
body.landing-page .landing-reveal{
opacity: 1;
transform: none;
transition: none;
}
body.landing-page .landing-hero-viz__sparkLine,
body.landing-page .landing-hero-viz__sparkFuture,
body.landing-page .landing-preview__curve{
animation: none;
stroke-dashoffset: 0;
}
body.landing-page .landing-preview__demo:hover{
transform: none;
}
body.landing-page .landing-how__card:hover,
body.landing-page .landing-how__card--featured:hover,
body.landing-page .landing-reports__card:hover{
transform: none;
}
}
@media (min-width: 821px){
body.landing-page .landing-reports__card:hover{
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 12px 32px -24px rgba(11, 61, 46, 0.16);
}
body.landing-page .landing-offer__panel{
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
body.landing-page .landing-offer__panel:hover{
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 14px 38px -26px rgba(11, 61, 46, 0.22),
0 2px 4px rgba(11, 61, 46, 0.06);
}
}
@media (max-width: 720px){
body.landing-page .landing-preview__main{
grid-template-columns: 1fr;
gap: 0.72rem;
}
}
@media (max-width: 820px){
body.landing-page{
--landing-section-gap: 0.79rem;
}
body.landing-page .landing-hero{
padding-top: 0.55rem;
}
body.landing-page .landing-hero__stack,
body.landing-page .landing-hero__inner,
body.landing-page .landing-cal-peek__inner{
grid-template-columns: 1fr;
}
body.landing-page .landing-hero__copy{
max-width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
justify-self: center;
align-items: center;
}
body.landing-page .landing-hero-forecast{
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
body.landing-page .landing-hero__ctaGroup{
align-items: center;
max-width: 100%;
}
body.landing-page .landing-hero__microtrust{
justify-content: center;
text-align: center;
align-items: center;
}
body.landing-page .landing-hero__demo-caption{
text-align: center;
}
body.landing-page .landing-hero__viz{
justify-self: start;
max-width: min(26rem, 100%);
margin-top: 0;
}
body.landing-page .landing-how__grid{
grid-template-columns: 1fr;
gap: 0.52rem;
}
body.landing-page .landing-how__grid::after{
display: none;
}
body.landing-page .landing-insight__card,
body.landing-page .landing-offer__panel{
max-width: none;
}
body.landing-page .landing-cal-peek{
padding: 0.48rem 0.45rem;
}
body.landing-page .landing-how__cardTitle{
min-height: 0;
}
}
@media (max-width: 768px){
body.landing-page{
--landing-content-max: min(100vw - 1.35rem, 72rem);
--landing-section-gap: 0.74rem;
}
body.landing-page .landing-shell{
padding-left: max(0.7rem, env(safe-area-inset-left));
padding-right: max(0.7rem, env(safe-area-inset-right));
}
body.landing-page .landing-hero__copy{
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.landing-page .landing-hero__text,
body.landing-page .landing-hero__sub{
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
white-space: normal;
text-wrap: balance;
overflow-wrap: anywhere;
text-align: center;
}
body.landing-page .landing-hero__text{
font-size: calc(clamp(1.52rem, 6.8vw, 2.1rem) * var(--hero-text-scale, 0.95));
line-height: 1.08;
}
body.landing-page .landing-hero__sub{
font-size: clamp(0.92rem, 3.6vw, 1.08rem);
line-height: 1.42;
}
body.landing-page .landing-hero__microtrust{
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
align-items: center;
text-align: center;
}
body.landing-page .landing-hero__microtrust-item{
white-space: normal;
text-wrap: pretty;
}
body.landing-page .landing-hero__ctaGroup{
width: 100%;
max-width: 100%;
align-items: center;
}
body.landing-page .landing-hero__cta,
body.landing-page .landing-offer__cta{
width: 100%;
}
body.landing-page .landing-hero__viz{
max-width: 100%;
}
body.landing-page .landing-hero-viz{
padding: 13px 13px 11px;
}
body.landing-page .landing-hero-cal.landing-hero-viz{
padding: 13px 15px 12px;
}
body.landing-page .landing-hero-cal .landing-hero-viz__week{
gap: 12px;
margin-bottom: 3px;
padding: 0 0.15rem;
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell{
min-height: 3.35rem;
padding: 6px 8px 7px;
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--watch{
padding: 7px 8px 7px;
}
body.landing-page #landingHeroForecast .landing-hero-cal__insight{
margin-top: 0.75rem;
padding: 0.34rem 0.5rem;
max-width: 80%;
}
body.landing-page .landing-preview__main{
grid-template-columns: 1fr;
gap: 0.72rem;
}
body.landing-page .landing-preview__story{
padding: 0.24rem 0.2rem 0.18rem;
}
body.landing-page .landing-preview__storyCapHead{
font-size: 0.66rem;
}
body.landing-page .landing-preview__storyCapText{
font-size: 0.76rem;
}
body.landing-page .landing-preview__storySvg{
transform: scale(1.18);
margin-bottom: calc((1 - 1.18) * 128 / 500 * 100%);
}
body.landing-page .landing-preview--secondary .landing-preview__recPanel{
max-width: 100%;
}
body.landing-page .landing-preview__title,
body.landing-page .landing-cal-peek__title,
body.landing-page .landing-offer__heading{
font-size: clamp(1.28rem, 5vw, 1.55rem);
}
body.landing-page .landing-preview__demo{
padding: 0.82rem 0.88rem 0.78rem;
border-radius: 16px;
}
body.landing-page .landing-preview__transferBand{
padding: 0.72rem 0.78rem 0.76rem;
}
body.landing-page .landing-preview__transferAmt{
font-size: clamp(1.75rem, 7.5vw, 2.2rem);
}
body.landing-page .landing-preview__transferFoot,
body.landing-page .landing-how__cardBody,
body.landing-page .landing-offer__support{
font-size: 0.88rem;
}
body.landing-page .landing-preview.landing-section--tint-safe{
padding: 1.05rem 0 0.42rem;
}
body.landing-page .landing-trust-micro{
margin-top: calc(-2lh - 0.12rem + 24px);
margin-bottom: 24px;
}
body.landing-page .landing-cal-peek{
border-radius: 20px;
padding: 0.58rem 0.52rem;
}
body.landing-page .landing-cal-peek__frame{
border-radius: 16px;
}
body.landing-page .landing-how__grid{
gap: 0.48rem;
}
body.landing-page .landing-offer__panel{
padding: 0.95rem 0.92rem 0.98rem;
border-radius: 16px;
}
body.landing-page .landing-conversion-flow{
gap: 0.43rem;
padding-bottom: 0.1rem;
}
}
@media (max-width: 560px){
body.landing-page{
--landing-content-max: calc(100vw - 0.9rem);
--landing-section-gap: 0.61rem;
}
body.landing-page .landing-main{
padding-top: 0.12rem;
}
body.landing-page .landing-hero{
padding-top: 0.62rem;
}
body.landing-page .landing-hero__text{
font-size: calc(clamp(1.72rem, 8.6vw, 2.08rem) * var(--hero-text-scale, 0.95));
}
body.landing-page .landing-hero__sub{
line-height: 1.42;
}
body.landing-page .landing-hero-viz__week{
gap: 4px;
}
body.landing-page .landing-hero-viz__cell{
padding: 5px 3px 6px;
}
body.landing-page .landing-hero-viz__d{
font-size: 9px;
}
body.landing-page .landing-hero-viz__b{
font-size: 10px;
}
body.landing-page .landing-preview__billList li{
font-size: 0.72rem;
}
body.landing-page .landing-preview__billList li span:last-child{
font-size: 0.67rem;
}
body.landing-page .landing-preview__storySvg{
transform: scale(1.12);
margin-bottom: calc((1 - 1.12) * 128 / 500 * 100%);
}
body.landing-page .landing-cal-peek{
padding: 0.52rem 0.48rem;
}
body.landing-page .landing-how__title{
margin-bottom: 0.28rem;
text-align: left;
}
body.landing-page .landing-how__grid{
gap: 0.42rem;
}
body.landing-page .landing-how__card{
padding: 0.82rem 0.88rem 0.8rem;
}
body.landing-page .app-footer{
margin-top: clamp(1.12rem, 3.3vw, 1.52rem);
}
}
.support-doc{
max-width: 640px;
margin: 0 auto;
}
.support-doc h1{
margin: 0 0 10px;
font-size: 1.35rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
}
.support-doc h2{
margin: 1.35rem 0 8px;
font-size: 0.9375rem;
font-weight: 700;
color: var(--text);
}
.support-doc p,
.support-doc li{
margin: 0 0 10px;
font-size: 0.9375rem;
line-height: 1.55;
color: rgba(31, 41, 55, 0.88);
}
.support-doc ul{
margin: 0 0 12px;
padding-left: 1.2rem;
}
.support-doc li{
margin-bottom: 6px;
}
.support-doc .support-doc__lead{
font-size: 0.9375rem;
color: rgba(55, 65, 81, 0.72);
margin-bottom: 16px;
}
.support-doc a{
color: var(--accent);
font-weight: 600;
text-decoration: none;
}
.support-doc a:hover{
text-decoration: underline;
}
/* ---------------------------------------------------------------------------
Help / FAQ (frontend/help.html) — soft card, accordion, in-product tone
--------------------------------------------------------------------------- */
body.help-page{
background: linear-gradient(180deg, rgba(248, 250, 249, 0.96) 0%, rgba(252, 252, 251, 1) 38%, #f8fafc 100%);
}
/* Wins over `body.plans-page .container > .grid { margin-top: 44px }` when both apply */
body.plans-page.help-page .container > .grid{
flex: 1 1 auto;
width: 100%;
max-width: min(40rem, 100%);
margin: 2.25rem auto 3rem;
padding: 0 14px 2.5rem;
box-sizing: border-box;
}
.help-center{
width: 100%;
margin: 0 auto;
padding: clamp(1.25rem, 3.5vw, 1.75rem) clamp(1.1rem, 3.2vw, 1.65rem) clamp(1.15rem, 3vw, 1.5rem);
border-radius: 20px;
border: 1px solid rgba(11, 61, 46, 0.09);
background: linear-gradient(180deg, #ffffff 0%, rgba(249, 250, 251, 0.98) 100%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 1px 2px rgba(15, 23, 42, 0.04),
0 14px 36px -22px rgba(11, 61, 46, 0.18);
box-sizing: border-box;
}
.help-center__header{
margin-bottom: 1.35rem;
}
.help-center__title{
margin: 0 0 0.55rem;
font-size: 1.12rem;
font-weight: 750;
letter-spacing: -0.02em;
line-height: 1.25;
color: rgba(17, 24, 39, 0.94);
}
.help-center__lede{
margin: 0;
max-width: 38rem;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.55;
color: rgba(71, 85, 105, 0.82);
}
.help-center a:not(.help-callout__cta){
color: var(--accent);
font-weight: 500;
text-decoration: none;
text-underline-offset: 2px;
transition: text-decoration-color 0.12s ease, color 0.12s ease;
}
.help-center a:not(.help-callout__cta):hover{
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.help-callout{
display: flex;
align-items: flex-start;
gap: 14px;
padding: 1rem 1.1rem 1.05rem;
margin: 0 0 1.75rem;
border-radius: 14px;
border: 1px solid rgba(4, 120, 87, 0.14);
background: linear-gradient(135deg, rgba(4, 120, 87, 0.07) 0%, rgba(255, 255, 255, 0.72) 55%, rgba(248, 250, 249, 0.95) 100%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}
.help-callout__icon{
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 12px;
color: rgba(11, 61, 46, 0.78);
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(11, 61, 46, 0.08);
}
.help-callout__icon svg{
display: block;
}
.help-callout__body{
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
}
.help-callout__title{
margin: 0;
font-size: 1rem;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.25;
color: rgba(15, 23, 42, 0.96);
}
.help-callout__cta{
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.15rem;
min-height: 44px;
padding: 0 1.1rem;
border-radius: 10px;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
color: #fff;
text-decoration: none;
background: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 88%, #000 12%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
transition: background-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.help-callout__cta:hover{
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 6px 18px -10px rgba(11, 61, 46, 0.45);
}
.help-callout__cta:focus-visible{
outline: 2px solid rgba(4, 120, 87, 0.45);
outline-offset: 2px;
}
.help-callout__hint{
margin: 0.35rem 0 0;
max-width: 32rem;
font-size: 0.78rem;
font-weight: 500;
line-height: 1.45;
color: rgba(75, 85, 99, 0.78);
}
.help-faq{
margin: 0;
padding: 1.35rem 0 0;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
.help-faq__item{
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.help-faq__item:last-child{
border-bottom: none;
}
.help-faq__summary{
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 52px;
padding: 14px 4px 14px 2px;
margin: 0;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-align: left;
color: rgba(15, 23, 42, 0.96);
border-radius: 10px;
transition: background-color 0.14s ease;
}
.help-faq__summary::-webkit-details-marker{
display: none;
}
.help-faq__summary::marker{
content: "";
}
.help-faq__summary:hover{
background: rgba(11, 61, 46, 0.035);
}
.help-faq__summary:focus-visible{
outline: 2px solid rgba(4, 120, 87, 0.35);
outline-offset: 1px;
}
.help-faq__question{
flex: 1 1 auto;
min-width: 0;
font-size: 1.01rem;
font-weight: 650;
line-height: 1.35;
letter-spacing: -0.012em;
color: rgba(17, 24, 39, 0.96);
}
.help-faq__chev{
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: rgba(71, 85, 105, 0.55);
transition: transform 0.16s ease, color 0.14s ease;
}
.help-faq__item[open] .help-faq__chev{
transform: rotate(180deg);
color: rgba(11, 61, 46, 0.55);
}
.help-faq__panel{
padding: 2px 36px 1.2rem 2px;
box-sizing: border-box;
}
.help-faq__panel p{
margin: 0;
max-width: 52ch;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.65;
color: rgba(75, 85, 99, 0.88);
}
.help-faq__panel a{
color: var(--accent);
font-weight: 500;
text-decoration: none;
text-underline-offset: 2px;
}
.help-faq__panel a:hover{
text-decoration: underline;
text-decoration-thickness: 1px;
}
.help-center__meta{
margin: 1.85rem 0 0;
padding-top: 1rem;
border-top: 1px solid rgba(15, 23, 42, 0.05);
text-align: right;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.62);
}
@media (max-width: 560px){
body.plans-page.help-page .container > .grid{
margin-top: 1.35rem;
margin-bottom: 2rem;
padding-left: 8px;
padding-right: 8px;
}
.help-center{
padding: 1.05rem 0.95rem 1rem;
border-radius: 16px;
}
.help-center__title{
font-size: 1.05rem;
}
.help-center__lede{
font-size: 0.86rem;
line-height: 1.52;
}
.help-callout{
gap: 12px;
padding: 0.9rem 0.85rem;
margin-bottom: 1.45rem;
}
.help-callout__icon{
width: 36px;
height: 36px;
border-radius: 10px;
}
.help-callout__title{
font-size: 0.95rem;
}
.help-callout__cta{
font-size: 0.84rem;
min-height: 46px;
width: 100%;
max-width: 100%;
justify-content: center;
}
.help-faq{
padding-top: 1.1rem;
}
.help-faq__summary{
min-height: 50px;
padding: 12px 2px 12px 0;
}
.help-faq__question{
font-size: 0.94rem;
}
.help-faq__panel{
padding-right: 8px;
padding-bottom: 1rem;
}
.help-faq__panel p{
font-size: 0.86rem;
line-height: 1.62;
max-width: none;
}
}
/* ---------------------------------------------------------------------------
Polished legal / support pages (Terms of Service, etc.)
Scoped under body.support-doc-page so the simpler legacy support-doc rules
above continue to work for any page that doesn't opt in.
--------------------------------------------------------------------------- */
body.support-doc-page{
background: #fafbfd;
}
body.support-doc-page .container > .grid{
display: block;
padding: 48px 16px 56px;
}
.support-doc-layout{
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 28px;
align-items: flex-start;
max-width: 1080px;
margin: 0 auto;
}
@media (min-width: 980px){
.support-doc-layout{
grid-template-columns: 220px minmax(0, 1fr);
gap: 48px;
}
}
/* Anchor nav (desktop only) */
.support-doc-nav{
display: none;
}
@media (min-width: 980px){
.support-doc-nav{
display: block;
position: sticky;
top: 32px;
align-self: flex-start;
}
}
.support-doc-nav__label{
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.68);
margin-bottom: 10px;
padding-left: 14px;
border-left: 2px solid rgba(15, 23, 42, 0.06);
line-height: 1.6;
}
.support-doc-nav__list{
list-style: none;
margin: 0;
padding: 0 0 0 14px;
border-left: 2px solid rgba(15, 23, 42, 0.06);
display: flex;
flex-direction: column;
gap: 3px;
}
.support-doc-nav__link{
display: block;
position: relative;
padding: 5px 6px 5px 0;
font-size: 0.82rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.82);
text-decoration: none;
border-radius: 6px;
line-height: 1.35;
transition: color 0.15s ease, background 0.15s ease;
}
.support-doc-nav__link::before{
content: "";
position: absolute;
left: -16px;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 0;
background: var(--accent, #16a34a);
border-radius: 2px;
transition: height 0.15s ease;
}
.support-doc-nav__link:hover{
color: rgba(15, 23, 42, 0.92);
}
.support-doc-nav__link.is-active{
color: rgba(11, 61, 46, 0.95);
font-weight: 650;
}
.support-doc-nav__link.is-active::before{
height: 60%;
}
/* Document card */
body.support-doc-page .support-doc{
max-width: 720px;
margin: 0;
border: 1px solid rgba(17, 24, 39, 0.06);
background: #ffffff;
border-radius: 18px;
padding: clamp(28px, 5vw, 56px) clamp(24px, 5vw, 56px) clamp(28px, 5vw, 48px);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 12px 36px -16px rgba(15, 23, 42, 0.12);
}
html:has(body.support-doc-page){
scroll-padding-top: 32px;
scroll-behavior: smooth;
}
body.support-doc-page .support-doc__head{
margin-bottom: 18px;
}
body.support-doc-page .support-doc__eyebrow{
display: inline-block;
margin: 0 0 14px;
padding: 3px 9px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.08);
color: rgba(11, 61, 46, 0.85);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
body.support-doc-page .support-doc h1{
margin: 0 0 8px;
font-size: clamp(1.75rem, 3.2vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.022em;
color: rgba(15, 23, 42, 0.96);
line-height: 1.15;
}
body.support-doc-page .support-doc__meta-lede{
margin: 0;
font-size: 0.8rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.78);
letter-spacing: 0;
}
body.support-doc-page .support-doc__lead{
font-size: 1.02rem;
line-height: 1.7;
color: rgba(51, 65, 85, 0.88);
margin: 0 0 14px;
max-width: 60ch;
}
body.support-doc-page .support-doc__section{
margin-top: 38px;
padding-top: 24px;
border-top: 1px solid rgba(15, 23, 42, 0.05);
max-width: 65ch;
}
body.support-doc-page .support-doc__section:first-of-type{
margin-top: 32px;
}
/* Trust callout (privacy page) — quiet green band that anchors the page's
positioning without shouting. */
body.support-doc-page .support-doc__trust-callout{
display: flex;
gap: 14px;
align-items: flex-start;
margin: 18px 0 4px;
padding: 16px 18px 17px;
border-radius: 14px;
background: linear-gradient(180deg,
rgba(16, 185, 129, 0.07) 0%,
rgba(16, 185, 129, 0.04) 100%);
border: 1px solid rgba(16, 185, 129, 0.18);
color: rgba(15, 23, 42, 0.92);
max-width: 65ch;
}
body.support-doc-page .support-doc__trust-callout__icon{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 9px;
background: rgba(16, 185, 129, 0.14);
color: rgba(11, 61, 46, 0.92);
}
body.support-doc-page .support-doc__trust-callout__body{
flex: 1 1 auto;
min-width: 0;
}
body.support-doc-page .support-doc__trust-callout__title{
margin: 0 0 4px;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: -0.005em;
color: rgba(11, 61, 46, 0.95);
}
body.support-doc-page .support-doc__trust-callout__text{
margin: 0;
font-size: 0.86rem;
line-height: 1.55;
color: rgba(30, 41, 59, 0.88);
}
/* Check-mark bullets (privacy page lists). Replaces the default browser disc
with a small subtle "✓" or "✕" glyph for negative lists. The selectors
use `ul.support-doc__checks` to win specificity against the generic
`.support-doc__section ul/li` rules above. */
body.support-doc-page ul.support-doc__checks{
list-style: none;
margin: 4px 0 12px;
padding: 0;
max-width: 65ch;
}
body.support-doc-page ul.support-doc__checks li{
position: relative;
padding: 0 0 0 28px;
margin: 0 0 10px;
font-size: 0.95rem;
line-height: 1.7;
color: rgba(51, 65, 85, 0.92);
}
body.support-doc-page ul.support-doc__checks li:last-child{
margin-bottom: 0;
}
body.support-doc-page ul.support-doc__checks li::before{
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(16, 185, 129, 0.14)
url("data:image/svg+xml;utf8,")
center/11px 11px no-repeat;
}
body.support-doc-page ul.support-doc__checks.support-doc__checks--neg li::before{
background: rgba(148, 163, 184, 0.16)
url("data:image/svg+xml;utf8,")
center/10px 10px no-repeat;
}
body.support-doc-page .support-doc__section h2{
margin: 0 0 12px;
font-size: 0.74rem;
font-weight: 700;
color: rgba(71, 85, 105, 0.88);
letter-spacing: 0.14em;
text-transform: uppercase;
}
body.support-doc-page .support-doc__section p{
margin: 0 0 12px;
font-size: 0.95rem;
line-height: 1.72;
color: rgba(51, 65, 85, 0.92);
letter-spacing: 0;
}
body.support-doc-page .support-doc__section p:last-child{
margin-bottom: 0;
}
body.support-doc-page .support-doc__section ul{
margin: 0 0 12px;
padding-left: 1.2rem;
}
body.support-doc-page .support-doc__section li{
margin: 0 0 6px;
font-size: 0.95rem;
line-height: 1.7;
color: rgba(51, 65, 85, 0.92);
}
body.support-doc-page .support-doc a{
color: var(--accent, #16a34a);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.15s ease;
}
body.support-doc-page .support-doc a:hover{
text-decoration: none;
border-bottom-color: color-mix(in srgb, var(--accent, #16a34a) 55%, transparent);
}
body.support-doc-page .support-doc__footer{
margin-top: 40px;
padding-top: 22px;
border-top: 1px solid rgba(15, 23, 42, 0.06);
}
body.support-doc-page .support-doc__quicklinks{
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
font-size: 0.78rem;
color: rgba(100, 116, 139, 0.78);
}
body.support-doc-page .support-doc__quicklinks a{
color: rgba(71, 85, 105, 0.88);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid transparent;
}
body.support-doc-page .support-doc__quicklinks a:hover{
color: var(--accent, #16a34a);
border-bottom-color: color-mix(in srgb, var(--accent, #16a34a) 35%, transparent);
}
body.support-doc-page .support-doc__quicklinks span{
color: rgba(148, 163, 184, 0.62);
}
/* Mobile refinements — generous padding, no cramped text */
@media (max-width: 720px){
body.support-doc-page .container > .grid{
padding: 28px 12px 36px;
}
body.support-doc-page .support-doc{
border-radius: 14px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
body.support-doc-page .support-doc__section{
margin-top: 28px;
padding-top: 20px;
}
body.support-doc-page .support-doc h1{
font-size: 1.7rem;
}
}
/* Login page: let main content grow so the footer sits at the bottom when the viewport is tall */
.container > .grid{
flex: 1 1 auto;
}
.app-view[hidden]{
display: none !important;
}
.settings-layout{
display: grid;
grid-template-columns: 320px minmax(0, 1fr);
gap: 14px;
align-items: start;
}
.settings-layout.settings-layout--sidebar-nav{
grid-template-columns: minmax(0, 1fr);
}
.settings-nav{
display: flex;
flex-direction: column;
gap: 10px;
padding: 12px;
}
.settings-nav-item{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
text-align: left;
border: 1px solid transparent;
background: transparent;
color: color-mix(in srgb, var(--text) 78%, transparent);
border-radius: 10px;
padding: 11px 14px;
cursor: pointer;
font: inherit;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
font-size: 13px;
position: relative;
transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.settings-nav-item:hover{
background: color-mix(in srgb, var(--accent) 5%, transparent);
color: var(--text);
}
.settings-nav-item:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: 2px;
}
.settings-nav-item.is-active{
background: color-mix(in srgb, var(--accent) 9%, #ffffff);
border-color: color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,0.05));
color: color-mix(in srgb, var(--accent) 70%, var(--text));
font-weight: 700;
box-shadow: none;
}
.settings-nav-item.is-active::before{
content: "";
position: absolute;
left: 4px;
top: 22%;
bottom: 22%;
width: 3px;
border-radius: 3px;
background: color-mix(in srgb, var(--accent) 65%, transparent);
}
.settings-nav.settings-nav--sidebar{
padding: 12px 8px;
gap: 4px;
}
.settings-nav-item__chev{
display: none;
}
.settings-content{
padding: 14px;
min-height: 0;
}
.settings-pane[hidden]{
display: none !important;
}
@media (max-width: 980px){
.settings-layout{
grid-template-columns: 1fr;
}
}
/* Logout row + balance alerts: keep pinned to top of sidebar when inner content scrolls */
.sidebar-sticky-head{
position: sticky;
top: 0;
z-index: 11;
flex-shrink: 0;
align-self: stretch;
display: flex;
flex-direction: column;
gap: 18px;
background: var(--bg);
padding-top: 12px;
padding-bottom: 2px;
}
/* Add a touch more breathing room below the sticky head block */
#sidebarPendingTxCard{
margin-top: 8px;
}
.sidebar-top{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
flex-shrink: 0;
min-width: 0;
}
.header-actions{
position: relative;
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
flex-shrink: 0;
justify-content: center;
width: 100%;
}
.family-select-hidden{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
border:0;
}
h1{
margin:0;
font-size: 20px;
letter-spacing: 0.2px;
}
.pill{
display:inline-flex;
align-items:center;
gap:8px;
border: 1px solid var(--border);
padding: 6px 10px;
background: rgba(0,0,0,0.02);
border-radius: 999px;
color: var(--muted);
line-height: 1.2;
}
button{
background: color-mix(in srgb, var(--accent) 15%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--text);
padding: 10px 12px;
border-radius: var(--btn-radius);
cursor:pointer;
}
button:hover{ filter: brightness(1.05); }
button.danger{
background: rgba(255,107,107,0.12);
border-color: rgba(255,107,107,0.35);
}
/* ----------------------------------------------------------------------
Canonical secondary button
----------------------------------------------------------------------
Used for Cancel / Back / Skip / Close / Maybe later / Dismiss and any
other secondary action. Reads as clearly clickable and supportive,
never as a disabled state or as plain text floating without a
boundary.
Pairing rules:
- Sits next to a filled primary CTA in modal footers / form rows.
- Same border-radius and roughly matching height as the primary.
- Lower emphasis: white fill + accent-tinted outline + accent text
(vs the primary's filled-green look).
- Tertiary actions (rare) may still be plain text links; default
dismiss/cancel actions should ALWAYS use this style. */
button.secondary{
background: #fff;
border: 1px solid rgba(11, 61, 46, 0.22);
color: rgba(11, 61, 46, 0.92);
font-weight: 600;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
button.secondary:hover{
background: color-mix(in srgb, var(--accent) 5%, #fff);
border-color: rgba(11, 61, 46, 0.36);
color: rgba(11, 61, 46, 1);
filter: none;
}
button.secondary:active{
background: color-mix(in srgb, var(--accent) 9%, #fff);
border-color: rgba(11, 61, 46, 0.42);
}
button.secondary:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
outline-offset: 2px;
}
button.secondary:disabled,
button.secondary[disabled],
button.secondary[aria-disabled="true"]{
opacity: 0.55;
cursor: not-allowed;
filter: none;
}
/* Main app: sidebar (left), calendar + tools (right) — slightly wider calendar column */
.app-layout{
display:grid;
grid-template-columns: 0.68fr 3.32fr;
gap: 10px;
align-items: stretch;
margin-top: 0;
flex: 1 1 auto;
min-height: 0;
/* Allow the page to scroll on shorter viewports. */
height: auto;
}
.sidebar{
display:flex;
flex-direction:column;
gap: 14px;
min-width: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 6px;
/*
Calendar column is much taller than the sidebar; without this, the sidebar
stretches to that row height and scrolls off-screen with the page. Sticky +
align-self keeps Add transaction / Variable in view while working on months.
*/
align-self: start;
position: sticky;
top: var(--app-top-nav-offset);
max-height: calc(100vh - var(--app-top-nav-offset) - 20px);
z-index: 10;
background: var(--bg);
}
.sidebar-section-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.sidebar-section-head h2{
margin: 0;
flex: 1;
min-width: 0;
}
#sidebarPendingTitle{
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.015em;
text-transform: none;
color: rgba(30, 41, 59, 0.8);
}
/* Compact "Needs review" when empty — single calm summary line. */
#sidebarPendingTxCard.sidebar-pending--empty{
padding: 6px 10px 5px;
background: rgba(252, 252, 251, 0.88);
box-shadow: none;
border: none;
}
#sidebarPendingTxCard.sidebar-pending--empty .sidebar-section-head{
display: none;
}
#sidebarPendingTxCard.sidebar-pending--empty .sidebar-section-body{
margin: 0;
}
#sidebarPendingTxCard.sidebar-pending--empty #sidebarPendingTxList.list{
margin: 0;
gap: 0;
}
.sidebar-pending-empty{
display: flex;
flex-direction: column;
gap: 2px;
padding: 1px 0 0;
}
.sidebar-pending-empty-msg{
margin: 0;
font-size: 11.5px;
font-weight: 500;
line-height: 1.35;
color: rgba(100, 116, 139, 0.62);
}
.sidebar-pending-empty-msg--lead{
font-size: 11.5px;
font-weight: 600;
line-height: 1.3;
color: rgba(71, 85, 105, 0.58);
}
.sidebar-pending-empty-msg--sub{
font-size: 10px;
font-weight: 500;
line-height: 1.32;
color: rgba(148, 163, 184, 0.72);
}
#sidebarPendingTxCard.sidebar-pending--empty #sidebarPendingTxList .pill{
padding: 0;
min-height: 0;
width: 100%;
justify-content: flex-start;
border: none;
background: transparent;
color: rgba(100, 116, 139, 0.62);
}
/* "Needs review" pending checklist — compact queue row */
#sidebarPendingTxList.list{
gap: 4px;
margin-top: 3px;
}
.pending-attn-item{
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 5px 7px 5px 9px;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.42);
width: 100%;
box-sizing: border-box;
transition:
background 0.14s ease,
border-color 0.14s ease,
box-shadow 0.14s ease,
transform 0.14s ease;
}
.pending-attn-item::before{
content: none;
}
.pending-attn-item.is-major{
border-color: rgba(17, 24, 39, 0.07);
background: rgba(0, 0, 0, 0.026);
}
.pending-attn-item.is-notable{
border-color: rgba(0, 0, 0, 0.04);
background: rgba(0, 0, 0, 0.016);
}
.pending-attn-item.is-critical{
border-color: rgba(167, 55, 68, 0.14);
background: rgba(167, 55, 68, 0.028);
}
.pending-attn-item.is-soon{
border-color: rgba(180, 83, 9, 0.11);
background: rgba(253, 230, 138, 0.04);
}
.pending-attn-item.is-critical .pending-attn-name{
font-weight: 680;
}
.pending-attn-item:hover{
border-color: rgba(11, 61, 46, 0.12);
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 7px rgba(15, 23, 42, 0.06);
}
.pending-attn-item.is-major:hover,
.pending-attn-item.is-notable:hover{
border-color: rgba(17, 24, 39, 0.1);
background: rgba(248, 250, 252, 0.96);
}
.pending-attn-item:active{
transform: translateY(0.5px);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.pending-attn-text{
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
}
.pending-attn-name{
min-width: 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-weight: 650;
font-style: normal;
color: rgba(15, 23, 42, 0.92);
font-size: 12.25px;
line-height: 1.24;
letter-spacing: -0.01em;
}
.pending-attn-name.tx-kind-fg--income,
.pending-attn-name.tx-kind-fg--expense{
color: var(--muted);
}
.pending-attn-meta{
font-size: 10.25px;
font-weight: 450;
line-height: 1.26;
letter-spacing: -0.005em;
color: rgba(100, 116, 139, 0.58);
font-variant-numeric: tabular-nums;
}
.pending-attn-item.is-notable .pending-attn-meta,
.pending-attn-item.is-major .pending-attn-meta{
font-weight: 450;
color: rgba(100, 116, 139, 0.62);
}
.pending-attn-indicator{
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-right: 1px;
color: rgba(100, 116, 139, 0.34);
pointer-events: none;
transition: color 0.14s ease, transform 0.14s ease;
}
.pending-attn-chevron{
display: block;
}
.pending-attn-item:hover .pending-attn-indicator{
color: rgba(51, 65, 85, 0.72);
transform: translateX(1px);
}
.pending-attn-item.is-soon .pending-attn-indicator::before{
content: "";
position: absolute;
left: -3px;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
border-radius: 50%;
background: rgba(180, 83, 9, 0.38);
}
.pending-attn-item.is-critical .pending-attn-indicator::before{
content: "";
position: absolute;
left: -3px;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
border-radius: 50%;
background: rgba(220, 38, 38, 0.4);
}
button.pending-attn-item{
font: inherit;
color: inherit;
text-align: inherit;
width: 100%;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
button.pending-attn-item:focus-visible{
outline: 2px solid rgba(4, 120, 87, 0.35);
outline-offset: 2px;
}
@media (max-width: 860px){
.pending-attn-item{
gap: 4px;
}
}
.sidebar-section:not(.sidebar-section--collapsed) .sidebar-section-head{
margin-bottom: 8px;
}
#sidebarPendingTxCard:not(.sidebar-section--collapsed) .sidebar-section-head{
margin-bottom: 5px;
}
.sidebar-section--collapsed .sidebar-section-body{
display: none;
}
.sidebar-section-body{
transition: opacity 0.16s ease;
}
.sidebar-section--flash{
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: 3px;
}
.sidebar-collapse-chevron{
display: block;
transition: transform 0.15s ease;
}
.main-column{
display:flex;
flex-direction:column;
gap: 14px;
min-width: 0;
overflow: visible;
padding-right: 0;
}
.calendar-nav-block{
min-width: 0;
}
.calendar-nav-bar{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(17, 24, 39, 0.08);
/* Match the left nav (sidebar) surface */
background: var(--bg);
}
body[data-bw-view="calendar"] .calendar-nav-bar{
padding: 2px 6px;
gap: 4px;
border-color: rgba(17, 24, 39, 0.06);
background: rgba(252, 253, 252, 0.95);
}
.cal-today-btn{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
margin-left: 4px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
color: var(--muted);
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.cal-today-btn:hover{
background: rgba(0,0,0,0.04);
color: var(--text);
}
.cal-today-ic{ opacity: 0.8; }
.cal-month-year{
display: inline-flex;
align-items: center;
gap: 4px;
justify-content: center;
flex: 1 1 auto;
min-width: 0;
}
.cal-select-wrap{
position: relative;
display: inline-flex;
align-items: center;
}
.cal-select-wrap select{
width: auto;
min-width: 88px;
padding: 4px 18px 4px 4px;
border: none;
background: transparent;
color: var(--accent);
font-weight: 650;
font-size: 15px;
letter-spacing: 0.01em;
appearance: none;
}
.cal-select-wrap select:focus{
outline: none;
}
.cal-select-caret{
position: absolute;
right: 6px;
pointer-events: none;
color: var(--accent);
font-size: 16px;
opacity: 0.9;
}
.cal-mode-wrap{
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.cal-mode-select{
width: auto;
min-width: 168px;
max-width: 220px;
padding: 6px 22px 6px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(0,0,0,0.02);
color: var(--text);
font-weight: 600;
font-size: 12px;
letter-spacing: 0.02em;
appearance: none;
}
.cal-detail-toggle{
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(0,0,0,0.02);
overflow: hidden;
flex: 0 0 auto;
margin-right: 6px;
}
.cal-detail-btn{
font: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 7px 10px;
border: none;
background: transparent;
color: var(--muted);
cursor: pointer;
white-space: nowrap;
}
.cal-detail-btn:hover{
background: rgba(0,0,0,0.04);
color: var(--text);
}
.cal-detail-btn.is-active{
background: rgba(11, 61, 46, 0.14);
color: var(--accent);
}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.skip-link{
position: absolute;
left: -9999px;
top: 0;
z-index: 10000;
padding: 0.65rem 1rem;
border-radius: 8px;
background: var(--accent, #0b3d2e);
color: #fff;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
}
.skip-link:focus{
left: 0.75rem;
top: 0.75rem;
outline: 2px solid #fff;
outline-offset: 2px;
}
.cal-nav-arrows{
display: inline-flex;
align-items: center;
gap: 3px;
}
.cal-arrow-btn{
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
color: rgba(91, 33, 182, 0.82);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
}
.cal-arrow-btn svg{
width: 16px;
height: 16px;
}
.cal-arrow-btn:hover{
background: rgba(0,0,0,0.04);
}
button.nav-link{
background: transparent;
border: none;
color: var(--accent);
padding: 10px 8px;
cursor: pointer;
text-decoration: underline;
font: inherit;
align-self: flex-end;
margin-bottom: 2px;
white-space: nowrap;
}
/* Contact page header tabs: no underline */
body.contact-page button.nav-link{
text-decoration: none;
}
.calendar-nav > .nav-link{
align-self: flex-end;
margin-bottom: 0;
}
button.nav-link:hover{
filter: brightness(1.12);
}
.calendar-panel-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.calendar-low-balance{
font-size: 12px;
color: var(--muted);
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(0,0,0,0.02);
white-space: nowrap;
}
.calendar-low-balance.is-danger{
color: var(--muted);
border-color: rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
}
.calendar-low-balance--sidebar.is-danger{
font-size: 1.05em;
}
.sidebar-balance-threshold-alerts{
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 10px;
}
#sidebarLowBalanceBanner.calendar-low-balance--sidebar{
margin-top: 6px;
}
.cash-outlook-head{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.cash-outlook-title{
font-size: 14.3px; /* +10% */
font-weight: 800;
letter-spacing: 0.08em;
text-transform: none;
color: rgba(17, 24, 39, 0.70);
margin-top: 2px;
}
.calendar-low-balance--sidebar{
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
white-space: normal;
width: 100%;
max-width: 100%;
box-sizing: border-box;
line-height: 1.35;
text-align: center;
}
.calendar-low-balance--sidebar:has(.cash-outlook-card){
text-align: left;
}
.cash-outlook-card{
width: 100%;
min-width: 0;
}
.cash-outlook-card__row{
display: flex;
align-items: flex-start;
gap: 11px;
width: 100%;
min-width: 0;
}
.cash-outlook-card__body{
flex: 1 1 auto;
min-width: 0;
max-width: 17.5rem;
display: flex;
flex-direction: column;
gap: 3px;
}
.cash-outlook-card__headline{
margin: 0;
font-size: 12.5px;
font-weight: 600;
line-height: 1.28;
letter-spacing: -0.01em;
color: rgba(55, 48, 42, 0.9);
}
.cash-outlook-card__line{
margin: 0;
font-variant-numeric: tabular-nums;
}
.cash-outlook-card__line--secondary{
font-size: 11.25px;
font-weight: 400;
line-height: 1.3;
color: rgba(71, 85, 105, 0.76);
}
.cash-outlook-card__line--tertiary{
font-size: 10.75px;
font-weight: 400;
line-height: 1.26;
color: rgba(100, 116, 139, 0.66);
}
.cash-outlook-card__sep{
color: rgba(148, 163, 184, 0.55);
}
.cash-outlook-card__shortfall{
font-weight: 400;
color: rgba(161, 122, 88, 0.82);
}
.calendar-low-balance--sidebar .cash-outlook-card .cash-outlook-icon{
flex: 0 0 auto;
margin-top: 1px;
}
.calendar-low-balance--sidebar strong{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
line-height: 1.15;
margin-bottom: 0;
font-weight: 800;
/* Maximize size while staying single-line across viewports */
font-size: clamp(11px, 2.0vw, 16px);
white-space: nowrap;
}
.cash-outlook-icon{
display: inline-flex;
width: 18px;
height: 18px;
}
.cash-outlook-icon svg{
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2.3;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.cash-outlook-icon--warn{
color: #a16207; /* dark yellow */
}
.cash-outlook-subhead--inline{
display: inline;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.02em;
margin-left: 8px;
white-space: nowrap;
}
.cash-outlook-line{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
width: 100%;
font-size: 15px;
color: currentColor;
}
.cash-outlook-line--single{
justify-content: flex-start;
}
.cash-outlook-line--center{
justify-content: center;
}
.calendar-low-balance--sidebar .cash-outlook-line--center{
margin-top: 6px;
}
.cash-outlook-subhead{
font-size: 15px;
font-weight: 800;
margin-bottom: 6px;
}
.cash-outlook-kv{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
font-size: 13px;
line-height: 1.25;
}
.calendar-low-balance--sidebar .cash-outlook-kv{
font-size: 13px;
}
.cash-outlook-details--center .cash-outlook-kv{
justify-content: center;
text-align: center;
}
.cash-outlook-details--center .cash-outlook-k,
.cash-outlook-details--center .cash-outlook-v{
display: inline-block;
}
.cash-outlook-details--center .cash-outlook-v{
margin-left: 10px;
}
.cash-outlook-hero{
font-size: 13px;
font-weight: 500;
line-height: 1.25;
text-align: center;
margin: 10px 0 8px;
font-variant-numeric: tabular-nums;
}
.calendar-low-balance--sidebar .cash-outlook-hero{
font-size: 13px;
}
.cash-outlook-k{
color: rgba(17, 24, 39, 0.78);
}
.cash-outlook-v{
margin-left: auto;
font-variant-numeric: tabular-nums;
}
.cash-outlook-kv--single{
font-size: 13px;
}
.cash-outlook-date{
color: currentColor;
}
.cash-outlook-amt{
margin-left: auto;
font-variant-numeric: tabular-nums;
}
.cash-outlook-amt--center{
margin-left: 0;
text-align: center;
}
.cash-outlook-secondary{
margin-top: 4px;
font-size: 11px;
line-height: 1.32;
font-weight: 500;
letter-spacing: 0.01em;
color: rgba(71, 85, 105, 0.78);
text-align: center;
font-variant-numeric: tabular-nums;
}
.calendar-low-balance--high.is-high{
color: var(--muted);
border-color: rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
}
.calendar-low-balance.is-muted{
color: var(--muted);
border-color: rgba(0,0,0,0.10);
background: rgba(0,0,0,0.03);
font-weight: 500;
}
.calendar-low-balance--sidebar.is-suggestion{
border: 1px solid rgba(11, 61, 46, 0.045);
background: rgba(236, 253, 245, 0.38);
color: rgba(30, 41, 59, 0.82);
border-radius: 12px;
padding: 12px 14px 11px;
box-shadow: none;
cursor: default;
pointer-events: none;
}
.calendar-low-balance--sidebar.is-suggestion strong{
display: block;
font-size: 13.5px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.015em;
color: rgba(11, 61, 46, 0.82);
white-space: normal;
margin: 0;
}
.calendar-low-balance--sidebar.is-suggestion .cash-outlook-hero{
font-size: 13.5px;
font-weight: 700;
line-height: 1.3;
color: rgba(11, 61, 46, 0.82);
margin: 0 0 4px;
text-align: left;
}
.calendar-low-balance--sidebar.is-suggestion .cash-outlook-secondary{
margin-top: 4px;
font-size: 10.5px;
line-height: 1.35;
font-weight: 500;
color: rgba(100, 116, 139, 0.5);
text-align: left;
}
.sidebar-balance-threshold-hint-inline{
margin: 0;
font-size: 12px;
line-height: 1.4;
color: var(--muted);
text-align: left;
width: auto;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
text-decoration: none;
text-underline-offset: 2px;
}
.sidebar-balance-threshold-hint-inline:hover{
color: var(--text);
}
/* Save sits in the same label|field grid as threshold rows (under max field column). */
.balance-threshold-save-row.form-row-h{
align-items: flex-start;
margin-top: 10px;
padding-top: 2px;
}
.balance-threshold-save-row .form-row-h__field{
display: flex;
justify-content: flex-start;
}
.balance-threshold-save-row .secondary{
min-width: 5.5rem;
}
.balance-threshold-save-row .secondary.is-saved{
border-color: rgba(4, 120, 87, 0.42);
background: rgba(4, 120, 87, 0.07);
color: rgba(11, 61, 46, 0.92);
}
.balance-threshold-saved-msg{
margin: 8px 0 0;
padding: 0;
font-size: 13px;
font-weight: 600;
line-height: 1.45;
letter-spacing: 0.01em;
color: rgba(4, 120, 87, 0.92);
}
.balance-threshold-saved-msg[hidden]{
display: none !important;
}
.balance-threshold-hint{
margin: 8px 0 0;
font-size: 11px;
color: var(--muted);
line-height: 1.35;
max-width: 42ch;
}
.balance-threshold-card-foot{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: flex-end;
gap: 8px 12px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(17, 24, 39, 0.055);
}
.balance-threshold-card-foot__msg{
flex: 1 1 160px;
min-width: 0;
text-align: left;
}
.balance-threshold-card-foot .balance-threshold-saved-msg{
margin: 0;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="preferences"] .threshold-input.money-input,
body[data-bw-view="settings"] .settings-pane[data-settings-pane="preferences"] .prefs-money.money-input{
border-radius: 10px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="preferences"] .threshold-input .money-input__prefix,
body[data-bw-view="settings"] .settings-pane[data-settings-pane="preferences"] .prefs-money .money-input__prefix{
padding: 7px 6px 7px 11px;
font-size: 13px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="preferences"] .threshold-input input,
body[data-bw-view="settings"] .settings-pane[data-settings-pane="preferences"] .prefs-money input{
padding: 9px 12px;
font-size: 14px;
}
.balance-threshold-box{
/* Nudge thresholds block right (requested) */
padding-left: 12px;
margin-top: 12px;
}
/* Settings → Account Details: balance threshold inputs should not stretch full-width */
.settings-pane[data-settings-pane="preferences"] .form-row-h__field{
display: flex;
justify-content: flex-start;
}
.settings-pane[data-settings-pane="preferences"] .money-input.threshold-input{
flex: 0 0 auto;
width: auto;
max-width: 118px;
}
.threshold-input input{
width: 100%;
}
@media (max-width: 860px){
.balance-threshold-box{ padding-left: 8px; }
.threshold-input{
width: 100%;
max-width: none;
}
}
/* Settings → Account Details: increase font size 10% */
.settings-content--hub .settings-pane{
font-size: 100%;
}
.calendar-panel--collapsed .calendar-panel-head{
margin-bottom: 0;
}
.calendar-panel-head h2{
margin: 0;
flex: 1;
min-width: 0;
}
.calendar-collapse-btn,
.sidebar-collapse-btn{
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.04);
color: var(--muted);
cursor: pointer;
line-height: 0;
}
.calendar-collapse-btn:hover,
.sidebar-collapse-btn:hover{
color: var(--text);
background: rgba(255,255,255,0.08);
}
.calendar-collapse-chevron{
display: block;
transition: transform 0.15s ease;
transform: rotate(180deg);
}
.calendar-panel--collapsed .calendar-collapse-chevron,
.chart-panel--collapsed .calendar-collapse-chevron,
.sidebar-section--collapsed .sidebar-collapse-chevron{
transform: rotate(0deg);
}
.sidebar-section:not(.sidebar-section--collapsed) .sidebar-collapse-chevron{
transform: rotate(180deg);
}
.calendar-panel-body{
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.calendar-panel--collapsed .calendar-panel-body{
display: none;
}
.calendar-panel--collapsed{
min-height: 0 !important;
flex: 0 0 auto !important;
}
.calendar-panel--loading .calendar-scroll,
.calendar-panel--loading .calendar-dow-row{
opacity: 0.55;
transition: opacity 0.14s ease;
}
.calendar-panel--loading .calendar-sticky-header .cal-month-year,
.calendar-panel--loading .calendar-sticky-header .cal-mode-wrap,
.calendar-panel--loading .calendar-sticky-header .cal-today-btn{
opacity: 0.55;
pointer-events: none;
}
.calendar-panel--loading .calendar-loading-indicator{
display: flex;
}
.calendar-loading-indicator{
position: absolute;
inset: 0;
z-index: 6;
display: none;
align-items: center;
justify-content: center;
pointer-events: none;
}
.calendar-loading-indicator__inner{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(249,250,251,0.92);
box-shadow: 0 6px 18px rgba(0,0,0,0.10);
font-size: 13px;
font-weight: 650;
color: var(--text);
}
.calendar-spinner{
width: 16px;
height: 16px;
border-radius: 999px;
border: 2px solid rgba(0,0,0,0.14);
border-top-color: var(--accent);
animation: bwspin 0.85s linear infinite;
}
@keyframes bwspin{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg); }
}
.cal-arrow-btn:disabled,
.cal-today-btn:disabled{
opacity: 0.45;
cursor: not-allowed;
}
.calendar-panel{
position: relative;
display:flex;
flex-direction:column;
flex: 1 1 72%;
background: var(--cal-surface);
/* --cal-week-rows set in JS (4–6); day row height scales with week count */
--cal-week-rows: 5;
--cal-day-min-h: 94px;
/* Horizontal + vertical gutter between day cells. */
--cal-gap: 3px;
/*
Ensure the panel is tall enough to show the full last row of day cards,
including grid gaps and the day-of-week header.
*/
min-height: calc(
/* Reserve less vertical chrome so there's less blank space above footer. */
52px
+ var(--cal-week-rows) * var(--cal-day-min-h)
+ (var(--cal-week-rows) - 1) * var(--cal-gap)
+ 4px
);
max-height: none;
overflow: visible;
}
/* Title + nav + DOW: one strip that sticks under the global top nav while scrolling the month grid */
.calendar-panel-sticky-zone{
position: -webkit-sticky;
position: sticky;
top: var(--app-top-nav-offset);
z-index: 24;
background: var(--cal-surface);
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
body[data-bw-view="calendar"] .calendar-panel-sticky-zone{
padding-bottom: 0;
border-bottom-color: rgba(0, 0, 0, 0.06);
}
.calendar-sticky-header{
position: static;
z-index: auto;
background: transparent;
padding-top: 0;
margin-top: 0;
border-bottom: none;
}
.calendar-sticky-header #calendarErr{
margin-bottom: 0;
}
.calendar-sticky-header .calendar-dow-row{
margin-bottom: 0;
}
.calendar-scroll{
flex: 0 0 auto;
min-height: 0;
overflow: visible;
padding-bottom: 6px;
}
/* Chart / instance / projection / list — scroll below calendar */
.main-column-aux{
flex: 1 1 38%;
min-height: 0;
overflow-y: auto;
display:flex;
flex-direction:column;
gap: 14px;
padding-right: 2px;
}
@media (max-width: 720px){
.app-layout{
grid-template-columns: 1fr;
height: auto;
min-height: 0;
}
.sidebar{
position: static;
max-height: none;
align-self: stretch;
z-index: auto;
background: transparent;
}
.main-column{
overflow: visible;
max-height: none;
}
.calendar-panel:not(.calendar-panel--collapsed){
max-height: none;
min-height: 420px;
flex: 0 1 auto;
}
.calendar-panel.calendar-panel--collapsed{
min-height: 0 !important;
}
.main-column-aux{
overflow: visible;
flex: 0 1 auto;
}
}
.card{
border: var(--card-border-accent);
background: var(--card);
border-radius: 14px;
padding: 14px;
}
/* Calendar uses a lighter surface than generic cards; beats `.card` background. */
.card.calendar-panel{
background: var(--cal-surface);
border: 1px solid rgba(11, 61, 46, 0.09);
box-shadow: 0 1px 3px rgba(11, 61, 46, 0.045);
/* Tighter horizontal inset so the day grid uses more width (default .card is 14px). */
padding-left: 8px;
padding-right: 8px;
/* Pull sticky nav strip up: default .card top padding left a large gap under the app header */
padding-top: 2px;
}
/* Transaction View should match Calendar's white surface. */
#transactionViewPanel .card{
background: var(--cal-surface);
}
#transactionViewPanel{
width: 100%;
max-width: 980px;
margin: 0 auto;
padding-top: 12px;
}
/* Reports View should match Calendar's white surface. */
#reportsViewPanel .card{
background: var(--cal-surface);
}
/* Reports: hero chart + compact support rail (see body[data-bw-view="reports"]) */
.app-view--reports{
width: 100%;
min-width: 0;
max-width: min(1320px, 100%);
padding: 0 0 4px;
margin-left: 0;
margin-right: 0;
}
.reports-hub{
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
width: 100%;
}
.reports-card{
border: 1px solid rgba(17, 24, 39, 0.05);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.028);
padding: 11px 12px 10px;
margin-bottom: 10px;
}
.reports-card--primary{
border-color: rgba(17, 24, 39, 0.055);
}
.reports-card--hero{
padding: 11px 12px 10px;
}
.reports-card__hero{
margin-bottom: 6px;
padding-bottom: 0;
border-bottom: none;
}
.reports-card__lede{
margin: 0 0 8px;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.45;
color: rgba(75, 85, 99, 0.72);
letter-spacing: -0.01em;
max-width: 58ch;
}
.reports-card__head{
margin-bottom: 0;
}
#reportsViewPanel .reports-card__title{
margin: 0 0 3px;
font-size: 1.16rem;
font-weight: 700;
letter-spacing: -0.022em;
color: rgba(15, 23, 32, 0.92);
}
.reports-card__desc{
margin: 0;
font-size: 0.75rem;
line-height: 1.38;
font-weight: 450;
color: rgba(100, 116, 139, 0.78);
max-width: 58ch;
}
.reports-card__takeaway{
margin: 0 0 6px;
padding: 0;
max-width: none;
}
.reports-takeaway-stack{
display: flex;
flex-direction: column;
gap: 4px;
}
.reports-takeaway__kicker{
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: -0.02em;
color: rgba(127, 29, 29, 0.88);
}
.reports-takeaway__lead{
font-size: 0.88rem;
font-weight: 600;
letter-spacing: -0.015em;
color: rgba(17, 24, 39, 0.86);
font-variant-numeric: tabular-nums;
}
.reports-takeaway__stat{
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.03em;
color: rgba(17, 24, 39, 0.92);
font-variant-numeric: tabular-nums;
}
.reports-takeaway__detail{
font-size: 0.78rem;
font-weight: 500;
line-height: 1.4;
color: rgba(75, 85, 99, 0.78);
}
.reports-takeaway__detail--muted{
color: rgba(100, 116, 139, 0.72);
}
.reports-takeaway__driver{
margin: 6px 0 0;
font-size: 0.72rem;
line-height: 1.45;
font-weight: 500;
color: rgba(100, 116, 139, 0.78);
}
.reports-chart-shell{
margin-top: 0;
min-width: 0;
padding: 7px 8px 7px;
border-radius: 11px;
background: rgba(249, 250, 251, 0.26);
border: 1px solid rgba(17, 24, 39, 0.035);
overflow-x: auto;
}
.reports-chart-toolbar{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
margin-bottom: 6px;
}
.reports-horizon{
display: inline-flex;
border-radius: 7px;
border: 1px solid rgba(17, 24, 39, 0.06);
overflow: hidden;
background: rgba(255, 255, 255, 0.82);
}
.reports-horizon__btn{
appearance: none;
border: 0;
background: transparent;
font: inherit;
font-size: 0.74rem;
font-weight: 550;
padding: 4px 9px;
cursor: pointer;
color: rgba(75, 85, 99, 0.78);
}
.reports-horizon__btn:hover{
background: rgba(11, 61, 46, 0.04);
}
.reports-horizon__btn.is-active{
background: rgba(11, 61, 46, 0.12);
color: rgba(11, 61, 46, 0.96);
font-weight: 700;
box-shadow: inset 0 0 0 1px rgba(11, 61, 46, 0.12);
}
.reports-chart-start{
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.74rem;
color: rgba(100, 116, 139, 0.78);
margin-left: 0;
padding: 4px 7px;
border: 1px solid rgba(17, 24, 39, 0.06);
border-radius: 8px;
background: rgba(255, 255, 255, 0.84);
}
.reports-chart-start__lbl{
font-weight: 500;
color: rgba(100, 116, 139, 0.62);
font-size: 0.68rem;
}
.reports-chart-start input[type="date"]{
min-width: 122px;
padding: 0;
border-radius: 0;
border: none;
font: inherit;
font-size: 0.74rem;
background: transparent;
}
.reports-chart-end{
margin-left: 0;
}
.reports-chart-toolbar:has(.reports-horizon__btn[data-report-days="custom"].is-active) .reports-range-meta{
display: none;
}
.reports-range-meta{
margin: 0;
padding: 4px 7px;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.055);
background: rgba(255, 255, 255, 0.74);
font-size: 0.68rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.62);
line-height: 1.2;
white-space: nowrap;
}
.reports-legend{
margin-bottom: 6px;
min-width: 0;
}
.reports-legend--kpis{
margin-bottom: 6px;
}
.reports-kpi-strip{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
gap: 6px;
}
.reports-chart-explainer{
margin: -2px 0 10px;
max-width: 52rem;
font-size: 0.725rem;
line-height: 1.42;
font-weight: 500;
letter-spacing: 0.008em;
color: rgba(71, 85, 105, 0.86);
}
.reports-kpi{
min-width: 0;
padding: 5px 7px;
border-radius: 9px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.86);
}
.reports-kpi__label{
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.82);
}
.reports-kpi__value{
margin-top: 2px;
font-size: 0.88rem;
line-height: 1.15;
font-weight: 700;
letter-spacing: -0.015em;
color: rgba(15, 23, 42, 0.92);
font-variant-numeric: tabular-nums;
}
.reports-kpi__sub{
margin-top: 2px;
font-size: 0.68rem;
line-height: 1.25;
font-weight: 500;
color: rgba(71, 85, 105, 0.8);
}
.reports-kpi--risk{
border-color: rgba(185, 28, 28, 0.22);
background: rgba(254, 226, 226, 0.78);
box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.05);
}
.reports-kpi--warn{
border-color: rgba(180, 83, 9, 0.12);
background: rgba(255, 251, 235, 0.68);
}
.reports-kpi--calm{
border-color: rgba(4, 120, 87, 0.1);
background: rgba(236, 253, 245, 0.68);
}
.reports-kpi--muted{
background: rgba(248, 250, 252, 0.72);
}
.reports-kpi--neutral{
border-color: rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.95);
}
.reports-kpi--floor{
border-color: rgba(100, 116, 139, 0.16);
border-style: dashed;
background: rgba(248, 250, 252, 0.88);
box-shadow: none;
}
.reports-kpi--floor .reports-kpi__label{
color: rgba(100, 116, 139, 0.7);
}
.reports-kpi--floor .reports-kpi__value{
font-size: 0.84rem;
font-weight: 650;
color: rgba(51, 65, 85, 0.9);
}
.reports-kpi--floor .reports-kpi__sub{
color: rgba(100, 116, 139, 0.72);
}
.reports-card__takeaway--guidance{
margin-bottom: 6px;
}
.reports-chart-shell .projection-chart-wrap--reports + .reports-card__takeaway--guidance{
margin-top: 10px;
margin-bottom: 0;
}
.reports-takeaway-guidance{
margin: 0;
padding: 6px 9px;
border-radius: 9px;
border: 1px solid rgba(17, 24, 39, 0.055);
background: rgba(248, 250, 252, 0.82);
font-size: 0.74rem;
line-height: 1.38;
font-weight: 500;
color: rgba(51, 65, 85, 0.84);
}
.cash-insights{
min-width: 0;
}
.cash-insights__intro{
margin: 0 0 10px;
font-size: 0.75rem;
line-height: 1.45;
color: rgba(100, 116, 139, 0.82);
}
.cash-insights__stack{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 10px;
}
.cash-insights--sidebar .cash-insights__stack{
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.cash-insights__stack--extra{
margin-top: 10px;
}
.cash-insights__card{
min-width: 0;
padding: 11px 12px 12px;
border-radius: 12px;
border: 1px solid rgba(17, 24, 39, 0.07);
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
}
.cash-insights__card--positive{
border-color: rgba(4, 120, 87, 0.12);
background: linear-gradient(180deg, rgba(236, 253, 245, 0.85) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.cash-insights__card--info{
border-color: rgba(14, 116, 144, 0.12);
background: linear-gradient(180deg, rgba(240, 249, 255, 0.76) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.cash-insights__card--watch{
border-color: rgba(180, 83, 9, 0.1);
background: linear-gradient(180deg, rgba(255, 251, 235, 0.55) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.cash-insights__card--urgent{
border-color: rgba(185, 28, 28, 0.09);
background: linear-gradient(180deg, rgba(254, 242, 242, 0.48) 0%, rgba(255, 255, 255, 0.98) 100%);
}
.cash-insights__eyebrow{
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.78);
}
.cash-insights__title{
margin: 6px 0 0;
font-size: 0.92rem;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.02em;
color: rgba(15, 23, 42, 0.94);
}
.cash-insights__message{
margin: 7px 0 0;
font-size: 0.79rem;
line-height: 1.5;
font-weight: 500;
color: rgba(51, 65, 85, 0.86);
}
.cash-insights__action{
display: inline-flex;
margin-top: 8px;
font-size: 0.75rem;
font-weight: 650;
color: rgba(11, 61, 46, 0.92);
text-decoration: none;
}
.cash-insights__action:hover{
text-decoration: underline;
}
.cash-insights__more{
margin-top: 10px;
}
.cash-insights__more summary{
cursor: pointer;
font-size: 0.76rem;
font-weight: 650;
color: rgba(11, 61, 46, 0.92);
list-style: none;
}
.cash-insights__more summary::-webkit-details-marker{
display: none;
}
.cash-insights-panel{
margin-top: 12px;
}
.cash-insights-panel .sidebar-section-body{
padding-top: 0;
}
.reports-legend__primary-row{
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
margin-bottom: 4px;
}
.reports-legend__primary{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px 4px 9px;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: -0.005em;
line-height: 1.25;
}
.reports-legend__primary::before{
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: 0.65;
}
.reports-legend__primary--risk{
background: linear-gradient(165deg, rgba(254, 226, 226, 0.78) 0%, rgba(254, 242, 242, 0.7) 100%);
border: 1px solid rgba(185, 28, 28, 0.28);
color: rgba(127, 29, 29, 0.95);
box-shadow: 0 1px 2px rgba(185, 28, 28, 0.07);
}
.reports-legend__primary--warn{
background: rgba(254, 243, 199, 0.72);
border: 1px solid rgba(180, 83, 9, 0.28);
color: rgba(120, 53, 15, 0.92);
}
.reports-legend__primary--calm{
background: rgba(232, 248, 240, 0.78);
border: 1px solid rgba(4, 120, 87, 0.22);
color: rgba(6, 78, 59, 0.88);
}
.reports-legend__meta{
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
font-size: 0.7rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.7);
letter-spacing: 0.005em;
}
.reports-legend__meta-item{
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.reports-legend__meta-item strong{
font-weight: 650;
color: rgba(71, 85, 105, 0.92);
font-variant-numeric: tabular-nums;
}
.reports-legend__meta-item--floor{
color: rgba(100, 116, 139, 0.55);
font-style: italic;
}
.reports-legend__inner{
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.reports-legend__item{
font-size: 0.72rem;
line-height: 1.3;
font-weight: 500;
color: rgba(75, 85, 99, 0.78);
padding: 3px 7px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(17, 24, 39, 0.045);
}
.reports-legend__item strong{
font-weight: 650;
color: rgba(17, 24, 39, 0.82);
}
.reports-legend__item--secondary{
font-size: 0.68rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.72);
background: rgba(248, 250, 252, 0.65);
border-color: rgba(148, 163, 184, 0.14);
}
.reports-legend__item--secondary strong{
font-weight: 600;
color: rgba(71, 85, 105, 0.78);
}
.reports-legend__item--primary{
font-size: 0.74rem;
font-weight: 700;
padding: 4px 9px;
}
.reports-legend__item--risk{
background: rgba(254, 242, 242, 0.72);
border-color: rgba(185, 28, 28, 0.22);
color: rgba(127, 29, 29, 0.9);
}
.reports-legend__item--risk.reports-legend__item--primary{
background: linear-gradient(165deg, rgba(254, 226, 226, 0.85) 0%, rgba(254, 242, 242, 0.75) 100%);
border-color: rgba(185, 28, 28, 0.32);
box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.06);
color: rgba(91, 15, 15, 0.92);
}
.reports-legend__item--floor{
background: rgba(248, 250, 252, 0.55);
border-color: rgba(148, 163, 184, 0.12);
color: rgba(100, 116, 139, 0.68);
}
.reports-legend__item--muted{
font-size: 0.66rem;
font-weight: 500;
font-style: italic;
color: rgba(100, 116, 139, 0.62);
}
.projection-chart-wrap--reports{
min-width: 0;
height: 316px;
position: relative;
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(17, 24, 39, 0.032);
box-shadow: none;
}
body[data-bw-view="reports"] .reports-card--hero .projection-chart-wrap--reports{
height: 436px;
}
.reports-chart-gridfill{
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: 9px;
opacity: 0.24;
background:
linear-gradient(to right, rgba(148, 163, 184, 0.07) 1px, transparent 1px) 0 0 / 56px 100%,
linear-gradient(to bottom, rgba(148, 163, 184, 0.06) 1px, transparent 1px) 0 0 / 100% 42px,
linear-gradient(180deg, rgba(4, 120, 87, 0.025) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 58%, rgba(185, 28, 28, 0.014) 100%);
}
.projection-chart-wrap--reports .projection-chart-canvas{
position: relative;
z-index: 1;
}
.projection-chart-wrap--reports .projection-chart-empty{
position: relative;
z-index: 2;
}
.projection-chart-wrap--short{
height: 236px;
}
.income-expense-chart-wrap--reports{
height: 184px;
position: relative;
border-radius: 10px;
overflow: hidden;
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(17, 24, 39, 0.04);
}
@media (min-width: 900px){
.income-expense-chart-wrap--reports{
height: 196px;
}
}
#reportCashTiming.reports-card{
margin-bottom: 6px;
padding-bottom: 7px;
}
.reports-card__head--cash-timing{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 12px 16px;
margin-bottom: 6px;
}
.reports-cash-timing-head__text{
flex: 1 1 220px;
min-width: 0;
}
.reports-cash-timing-hint{
margin: 5px 0 0;
max-width: 38rem;
font-size: 0.73rem;
line-height: 1.42;
font-weight: 500;
color: rgba(71, 85, 105, 0.84);
}
.reports-cash-timing-meta{
margin-top: 5px;
font-size: 0.8rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.78);
}
.reports-ie-chart-toolbar{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
flex-shrink: 0;
}
.reports-ie-seg{
display: inline-flex;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.06);
overflow: hidden;
background: rgba(255, 255, 255, 0.5);
}
.reports-ie-seg .reports-ie-toggle{
border-radius: 0;
border: none;
border-right: 1px solid rgba(17, 24, 39, 0.06);
padding: 4px 7px;
font-size: 0.685rem;
}
.reports-ie-seg .reports-ie-toggle:last-child{
border-right: none;
}
.reports-ie-toggle--net{
padding: 4px 9px;
font-size: 0.72rem;
font-weight: 600;
color: rgba(75, 85, 99, 0.72);
}
.reports-ie-toggle--net.is-active{
border-color: rgba(71, 85, 105, 0.22);
background: rgba(241, 245, 249, 0.85);
color: rgba(51, 65, 85, 0.95);
}
.reports-ie-download__icon{
flex-shrink: 0;
opacity: 0.72;
}
.reports-ie-insights{
margin: 0 0 7px;
padding: 8px 10px;
border-radius: 9px;
background: rgba(248, 250, 252, 0.72);
border: 1px solid rgba(148, 163, 184, 0.14);
}
.reports-ie-cards{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
gap: 8px;
}
.reports-ie-card{
min-width: 0;
padding: 10px 12px 11px;
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}
.reports-ie-card--expensepeak{
border-color: rgba(252, 165, 165, 0.55);
background: linear-gradient(165deg, rgba(254, 242, 242, 0.96), rgba(255, 255, 255, 0.92));
}
.reports-ie-card--cashpeak{
border-color: rgba(110, 231, 183, 0.45);
background: linear-gradient(165deg, rgba(236, 253, 245, 0.96), rgba(255, 255, 255, 0.92));
}
.reports-ie-card__label{
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.78);
}
.reports-ie-card__value{
margin-top: 6px;
font-size: 1.08rem;
line-height: 1.12;
font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.reports-ie-card__value--out{
color: rgba(153, 27, 27, 0.96);
}
.reports-ie-card__value--in{
color: rgba(5, 90, 62, 0.96);
}
.reports-ie-card__period{
margin-top: 6px;
font-size: 0.76rem;
font-weight: 600;
color: rgba(71, 85, 105, 0.85);
}
.reports-ie-note{
margin-top: 8px;
font-size: 0.71rem;
line-height: 1.38;
font-weight: 600;
color: rgba(180, 83, 9, 0.9);
font-style: normal;
}
.reports-ie-insights__inner{
display: flex;
flex-direction: column;
gap: 5px;
}
.reports-ie-insights__line{
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 12px;
font-size: 0.78rem;
line-height: 1.35;
color: rgba(51, 65, 85, 0.88);
}
.reports-ie-insights__k{
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.62);
}
.reports-ie-insights__v{
font-weight: 600;
color: rgba(30, 41, 59, 0.9);
text-align: right;
margin-left: auto;
}
.reports-ie-insights__note{
font-size: 0.72rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.78);
font-style: italic;
}
.reports-card__toolbar{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.reports-ie-toggles{
display: inline-flex;
gap: 8px;
align-items: center;
}
.reports-ie-toggle,
.reports-ie-download{
appearance: none;
font: inherit;
font-size: 0.78rem;
font-weight: 600;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.07);
background: rgba(255, 255, 255, 0.75);
cursor: pointer;
color: rgba(75, 85, 99, 0.82);
}
.reports-ie-toggle.is-active{
border-color: rgba(11, 61, 46, 0.22);
background: rgba(11, 61, 46, 0.07);
color: var(--accent);
}
/* Transaction Breakdown report */
.reports-card--txn-breakdown{
padding-bottom: 12px;
}
.reports-tb-controls{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 2px 0 10px;
}
.reports-tb-flow{
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
padding: 3px;
border-radius: 10px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(248, 250, 252, 0.72);
}
.reports-tb-flow__btn{
appearance: none;
font: inherit;
font-size: 0.76rem;
font-weight: 600;
padding: 5px 11px;
border-radius: 7px;
border: 1px solid transparent;
background: transparent;
color: rgba(71, 85, 105, 0.82);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.reports-tb-flow__btn:hover{
background: rgba(255, 255, 255, 0.85);
color: rgba(30, 41, 59, 0.88);
}
.reports-tb-flow__btn.is-active{
border-color: rgba(91, 128, 110, 0.22);
background: rgba(91, 128, 110, 0.1);
color: rgba(11, 61, 46, 0.92);
}
.reports-tb-drillbar{
margin: 0 0 12px;
padding: 11px 13px 10px;
border-radius: 11px;
border: 1px solid rgba(17, 24, 39, 0.07);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.reports-tb-drillbar--drill{
border-color: rgba(91, 128, 110, 0.2);
background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(241, 248, 244, 0.94));
}
.reports-tb-nav{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 0 0 7px;
min-width: 0;
}
.reports-tb-nav__back{
appearance: none;
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
padding: 7px 13px 7px 11px;
font: inherit;
font-size: 0.8rem;
font-weight: 650;
line-height: 1.2;
letter-spacing: 0.01em;
color: rgba(11, 61, 46, 0.94);
background: #fff;
border: 1px solid rgba(91, 128, 110, 0.38);
border-radius: 9px;
cursor: pointer;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.85) inset,
0 1px 3px rgba(11, 61, 46, 0.07);
transition:
background 0.14s ease,
border-color 0.14s ease,
box-shadow 0.14s ease,
transform 0.12s ease,
color 0.14s ease;
}
.reports-tb-nav__back-icon{
font-size: 0.92rem;
font-weight: 700;
line-height: 1;
opacity: 0.88;
}
.reports-tb-nav__back:hover{
background: rgba(91, 128, 110, 0.1);
border-color: rgba(91, 128, 110, 0.52);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 3px 8px rgba(11, 61, 46, 0.1);
transform: translateY(-1px);
}
.reports-tb-nav__back:active{
transform: translateY(0);
box-shadow: 0 1px 2px rgba(11, 61, 46, 0.08);
}
.reports-tb-nav__back:focus-visible{
outline: 2px solid rgba(91, 128, 110, 0.42);
outline-offset: 2px;
}
.reports-tb-nav__level{
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 2px;
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.02em;
color: rgba(30, 41, 59, 0.9);
}
.reports-tb-nav__trail{
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
min-width: 0;
font-size: 0.84rem;
line-height: 1.35;
}
.reports-tb-nav__sep{
color: rgba(100, 116, 139, 0.55);
font-size: 0.82rem;
font-weight: 600;
user-select: none;
}
.reports-tb-nav__ancestor{
font-weight: 600;
color: rgba(71, 85, 105, 0.82);
}
.reports-tb-nav__current{
font-weight: 750;
color: rgba(11, 61, 46, 0.94);
letter-spacing: -0.01em;
}
.reports-tb-content-title{
margin: 0;
padding: 0;
font-size: 0.98rem;
font-weight: 750;
letter-spacing: -0.02em;
line-height: 1.3;
color: rgba(11, 61, 46, 0.94);
text-wrap: balance;
}
.reports-tb-body--drill .reports-tb-drillbar{
margin-bottom: 10px;
}
.reports-tb-body{
transition: opacity 0.18s ease;
}
.reports-tb-body.is-transitioning{
opacity: 0.55;
}
.reports-tb-split{
display: grid;
grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
gap: 14px 18px;
align-items: start;
}
.reports-tb-body--chart-medium .reports-tb-split{
grid-template-columns: minmax(180px, 28%) minmax(0, 1fr);
gap: 10px 14px;
}
.reports-tb-body--chart-compact .reports-tb-split,
.reports-tb-body--chart-summary .reports-tb-split{
grid-template-columns: minmax(132px, 22%) minmax(0, 1fr);
gap: 8px 12px;
}
.reports-tb-body--drill .reports-tb-split{
gap: 8px 12px;
}
.reports-tb-body--tx-level .reports-tb-split{
grid-template-columns: 1fr;
gap: 0;
}
.reports-tb-body--tx-level .reports-tb-chart{
display: none;
}
.reports-tb-body--tx-level .reports-tb-table-wrap{
max-height: min(360px, 52vh);
}
.reports-tb-body--tx-level .reports-tb-tx-panel{
margin-top: 8px;
padding-top: 8px;
}
@media (max-width: 860px){
.reports-tb-split{
grid-template-columns: 1fr;
}
.reports-tb-body--chart-compact .reports-tb-split,
.reports-tb-body--chart-summary .reports-tb-split{
grid-template-columns: 1fr;
}
.reports-tb-body--chart-compact .reports-tb-chart,
.reports-tb-body--chart-summary .reports-tb-chart{
max-width: 220px;
margin: 0 auto;
}
}
.reports-tb-chart__frame{
position: relative;
min-height: 240px;
padding: 8px 4px 4px;
border-radius: 12px;
border: 1px solid rgba(17, 24, 39, 0.05);
background: linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0.98));
}
.reports-tb-body--chart-medium .reports-tb-chart__frame{
min-height: 168px;
padding: 6px 4px 2px;
}
.reports-tb-body--chart-compact .reports-tb-chart__frame{
min-height: 118px;
padding: 4px 2px 0;
border-color: rgba(17, 24, 39, 0.035);
background: rgba(248, 250, 252, 0.55);
}
.reports-tb-body--chart-summary .reports-tb-chart__frame{
min-height: 0;
padding: 10px 12px;
border-color: rgba(17, 24, 39, 0.04);
background: rgba(248, 250, 252, 0.5);
}
.reports-tb-chart__canvas{
display: block;
width: 100% !important;
max-height: 260px;
}
.reports-tb-body--chart-medium .reports-tb-chart__canvas{
max-height: 168px;
}
.reports-tb-body--chart-compact .reports-tb-chart__canvas{
max-height: 112px;
}
.reports-tb-chart__summary{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 4px 6px 2px;
text-align: center;
}
.reports-tb-chart__summary-ring{
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 4px;
border-radius: 50%;
border: 5px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.9);
}
.reports-tb-chart__summary-swatch{
display: block;
width: 14px;
height: 14px;
border-radius: 50%;
}
.reports-tb-chart__summary-amount{
margin: 0;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: rgba(17, 24, 39, 0.9);
}
.reports-tb-chart__summary-label{
margin: 0;
font-size: 0.78rem;
font-weight: 600;
color: rgba(51, 65, 85, 0.86);
max-width: 14ch;
line-height: 1.25;
}
.reports-tb-chart__summary-share{
margin: 2px 0 0;
font-size: 0.7rem;
color: rgba(100, 116, 139, 0.78);
}
.reports-tb-chart__caption{
margin: 8px 2px 0;
font-size: 0.74rem;
line-height: 1.4;
color: rgba(100, 116, 139, 0.82);
}
.reports-tb-body--drill .reports-tb-chart__caption,
.reports-tb-body--chart-compact .reports-tb-chart__caption,
.reports-tb-body--chart-summary .reports-tb-chart__caption{
margin-top: 4px;
font-size: 0.7rem;
}
.reports-tb-body--tx-level .reports-tb-chart__caption{
display: none;
}
.reports-tb-table-wrap{
max-height: 320px;
border-radius: 12px;
border: 1px solid rgba(17, 24, 39, 0.05);
background: rgba(255, 255, 255, 0.94);
}
.reports-tb-body--drill .reports-tb-table-wrap{
max-height: min(340px, 48vh);
}
.reports-table--txn-breakdown th,
.reports-table--txn-breakdown td{
padding: 7px 10px;
font-size: 0.78rem;
}
.reports-table--txn-breakdown thead th{
position: sticky;
top: 0;
z-index: 1;
background: rgba(248, 250, 252, 0.98);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.88);
cursor: pointer;
user-select: none;
}
.reports-table--txn-breakdown thead th[data-tb-sort].is-sorted{
color: rgba(11, 61, 46, 0.88);
}
.reports-table--txn-breakdown .num{
text-align: right;
font-variant-numeric: tabular-nums;
}
.reports-table--txn-breakdown tbody tr.reports-tb-row--drill{
cursor: pointer;
}
.reports-table--txn-breakdown tbody tr.reports-tb-row--drill:hover td{
background: rgba(91, 128, 110, 0.06);
}
.reports-table--txn-breakdown tbody tr.is-selected td{
background: rgba(107, 142, 159, 0.1);
}
.reports-table--txn-breakdown tfoot td{
font-weight: 700;
border-top: 1px solid rgba(17, 24, 39, 0.08);
background: rgba(248, 250, 252, 0.96);
}
.reports-tb-tx-panel{
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(17, 24, 39, 0.06);
animation: reports-tb-slide-in 0.22s ease;
}
@keyframes reports-tb-slide-in{
from{ opacity: 0; transform: translateY(6px); }
to{ opacity: 1; transform: translateY(0); }
}
.reports-tb-tx-panel__title{
margin: 0 0 8px;
font-size: 0.88rem;
font-weight: 650;
letter-spacing: -0.015em;
color: rgba(30, 41, 59, 0.9);
}
.reports-table-scroll--txn-breakdown{
max-height: 280px;
border-radius: 10px;
border: 1px solid rgba(17, 24, 39, 0.05);
}
.reports-table--txn-breakdown-tx th,
.reports-table--txn-breakdown-tx td{
padding: 6px 10px;
font-size: 0.77rem;
}
.reports-table--txn-breakdown-tx thead th{
position: sticky;
top: 0;
z-index: 1;
background: rgba(248, 250, 252, 0.98);
font-size: 0.71rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: rgba(100, 116, 139, 0.88);
}
.reports-table--txn-breakdown-tx .num{
text-align: right;
font-variant-numeric: tabular-nums;
}
.reports-table--txn-breakdown-tx .reports-tb-tx-notes{
color: rgba(100, 116, 139, 0.78);
font-size: 0.74rem;
max-width: 28ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reports-ie-download{
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px 4px 7px;
font-size: 0.72rem;
}
.reports-safe-stats{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
gap: 8px;
margin: 0 0 10px;
}
.reports-safe-stats__tile{
min-width: 0;
padding: 11px 12px;
border-radius: 11px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
}
.reports-safe-stats__tile--high{
border-color: rgba(167, 243, 208, 0.45);
background: linear-gradient(165deg, rgba(236, 253, 245, 0.92), rgba(255, 255, 255, 0.94));
}
.reports-safe-stats__tile--atfloor{
border-color: rgba(254, 202, 202, 0.6);
background: linear-gradient(165deg, rgba(254, 242, 242, 0.92), rgba(255, 255, 255, 0.96));
box-shadow:
inset 0 0 0 1px rgba(254, 202, 202, 0.08),
0 1px 0 rgba(17, 24, 39, 0.03);
}
.reports-safe-stats__label{
display: block;
font-size: 0.63rem;
font-weight: 700;
letter-spacing: 0.068em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.76);
line-height: 1.28;
}
.reports-safe-stats__amount{
display: block;
margin-top: 9px;
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
line-height: 1.05;
color: rgba(15, 23, 42, 0.94);
}
.reports-safe-stats__tile--high .reports-safe-stats__amount{
color: rgba(6, 95, 70, 0.97);
}
.reports-safe-stats__tile--atfloor .reports-safe-stats__amount{
color: rgba(153, 27, 27, 0.96);
}
.reports-mini-stats__row{
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin-bottom: 10px;
}
.reports-mini-stats__row .k{
display: block;
font-size: 0.69rem;
font-weight: 700;
letter-spacing: 0.01em;
color: rgba(75, 85, 99, 0.68);
}
.reports-mini-stats__row .v{
display: inline-block;
margin-top: 3px;
font-size: 1.02rem;
font-weight: 750;
color: var(--text);
}
.reports-safe-transfer-insight{
margin: 0 0 10px;
padding: 11px 12px;
border-radius: 11px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(252, 252, 253, 0.98);
}
.reports-safe-transfer-insight__lead{
margin: 0 0 10px;
font-size: 0.835rem;
line-height: 1.46;
font-weight: 650;
color: rgba(30, 41, 59, 0.93);
}
.reports-safe-transfer-insight__note{
margin: 0 0 10px;
font-size: 0.78rem;
line-height: 1.45;
font-weight: 500;
color: rgba(71, 85, 105, 0.92);
}
.reports-safe-transfer-insight__recovery{
margin: 0;
padding: 7px 9px;
border-radius: 8px;
border: 1px solid rgba(167, 243, 208, 0.5);
background: rgba(236, 253, 245, 0.45);
font-size: 0.795rem;
line-height: 1.43;
font-weight: 600;
color: rgba(6, 78, 59, 0.94);
}
.reports-safe-transfer-insight__text{
margin: 0;
font-size: 0.79rem;
line-height: 1.5;
font-weight: 500;
color: rgba(68, 64, 60, 0.9);
}
.reports-safe-transfer-context{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin-top: 8px;
}
.reports-safe-transfer-context__card{
padding: 10px 11px;
border-radius: 11px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(248, 250, 252, 0.8);
}
.reports-safe-transfer-context__label{
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.7);
}
.reports-safe-transfer-context__text{
margin: 6px 0 0;
font-size: 0.76rem;
line-height: 1.45;
font-weight: 500;
color: rgba(51, 65, 85, 0.88);
}
#reportRiskHeatmap.reports-card{
padding: 9px 11px 10px;
}
#reportRiskHeatmap .reports-card__head{
margin-bottom: 5px;
}
.reports-risk-legend{
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
margin-bottom: 10px;
font-size: 0.78rem;
color: rgba(75, 85, 99, 0.85);
}
.reports-risk-legend--compact{
margin: 6px 0 0;
gap: 8px 12px;
font-size: 0.665rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.6);
justify-content: flex-start;
}
.reports-risk-legend--rich{
margin: 0 0 14px;
gap: 8px 16px;
font-size: 0.72rem;
font-weight: 500;
color: rgba(71, 85, 105, 0.78);
justify-content: flex-start;
align-items: center;
}
.reports-risk-legend__item{
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.2;
padding: 3px 0;
}
.reports-risk-legend__label{
font-weight: 650;
color: rgba(30, 41, 59, 0.86);
letter-spacing: 0.01em;
}
.reports-risk-legend__meta{
color: rgba(100, 116, 139, 0.7);
font-size: 0.66rem;
font-weight: 500;
}
.reports-risk-legend__meta::before{
content: "·";
margin: 0 5px 0 2px;
color: rgba(148, 163, 184, 0.6);
}
.reports-risk-insight{
margin: 0 0 8px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(248, 250, 252, 0.88);
border: 1px solid rgba(148, 163, 184, 0.11);
font-size: 0.83rem;
line-height: 1.43;
font-weight: 520;
color: rgba(51, 65, 85, 0.9);
}
.reports-risk-layout{
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
align-items: flex-start;
}
@media (min-width: 1100px){
.reports-risk-layout{
grid-template-columns: minmax(0, 1fr) clamp(230px, 27%, 300px);
gap: 16px;
}
}
.reports-risk-cal-wrap{
width: 100%;
min-width: 0;
padding-top: 0;
}
.reports-risk-cal-wrap--loading{
opacity: 0.62;
pointer-events: none;
}
.reports-risk-nav{
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 10px;
flex-wrap: wrap;
}
.reports-risk-nav__btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 9px;
border: 1px solid rgba(17, 24, 39, 0.1);
background: rgba(255, 255, 255, 0.92);
color: rgba(51, 65, 85, 0.82);
cursor: pointer;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.reports-risk-nav__btn:hover:not(:disabled){
background: #fff;
border-color: rgba(11, 61, 46, 0.18);
color: rgba(11, 61, 46, 0.88);
}
.reports-risk-nav__btn:disabled{
opacity: 0.45;
cursor: not-allowed;
}
.reports-risk-nav__label{
min-width: 9.5rem;
text-align: center;
font-size: 0.92rem;
font-weight: 650;
letter-spacing: -0.015em;
color: rgba(30, 41, 59, 0.9);
}
.reports-risk-nav__today{
margin-left: 4px;
padding: 6px 11px;
border-radius: 999px;
border: 1px solid rgba(17, 24, 39, 0.08);
background: rgba(248, 250, 252, 0.95);
font: inherit;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(71, 85, 105, 0.78);
cursor: pointer;
}
.reports-risk-nav__today:hover:not(:disabled){
background: #fff;
border-color: rgba(11, 61, 46, 0.14);
color: rgba(11, 61, 46, 0.82);
}
.reports-risk-dow-row{
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 7px;
margin-bottom: 4px;
padding: 0 2px;
font-size: 0.605rem;
font-weight: 690;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.5);
text-align: center;
}
.reports-risk-dot{
display: inline-block;
width: 9px;
height: 9px;
border-radius: 3px;
vertical-align: middle;
flex-shrink: 0;
}
.reports-risk-dot--safe{ background: color-mix(in srgb, #22c55e 28%, #f8fafc); border: 1px solid rgba(22, 163, 74, 0.14); }
.reports-risk-dot--caution{ background: color-mix(in srgb, #facc15 22%, #fffbeb); border: 1px solid rgba(217, 119, 6, 0.16); }
.reports-risk-dot--below{
background: color-mix(in srgb, #fbcfe8 12%, #f8fafc);
border: 1px solid rgba(251, 113, 133, 0.1);
}
.reports-risk-dot--critical{
background: color-mix(in srgb, #fca5a5 16%, #fafbfc);
border: 1px solid rgba(248, 113, 113, 0.14);
}
.reports-risk-dot--neg{
background: linear-gradient(135deg, color-mix(in srgb, #be123c 14%, #fafafa), color-mix(in srgb, #fda4af 10%, #f9fafb));
border: 1px solid rgba(190, 18, 60, 0.14);
}
.reports-risk-grid{
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
row-gap: 10px;
width: 100%;
}
.reports-risk-pad{
min-height: 0;
aspect-ratio: 1;
border: none;
background: transparent;
pointer-events: none;
}
.reports-risk-cell{
position: relative;
aspect-ratio: 1;
min-height: 46px;
width: 100%;
max-height: 78px;
border-radius: 10px;
border: 1px solid rgba(17, 24, 39, 0.04);
background: rgba(249, 250, 252, 0.85);
font: inherit;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 8px 6px 7px;
box-sizing: border-box;
overflow: visible;
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.reports-risk-cell:hover{
transform: translateY(-1px);
box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}
.reports-risk-cell:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: 2px;
}
.reports-risk-cell--active{
z-index: 3;
transform: translateY(-1px);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.95),
0 0 0 4px rgba(15, 23, 42, 0.11),
0 12px 28px rgba(15, 23, 42, 0.1);
border-color: rgba(15, 23, 42, 0.2);
}
.reports-risk-cell__d{
order: 2;
font-size: clamp(0.56rem, 0.94vw, 0.67rem);
font-weight: 670;
line-height: 1;
color: rgba(15, 23, 42, 0.62);
letter-spacing: 0.02em;
}
.reports-risk-cell__b{
order: 1;
font-size: clamp(0.685rem, 1.08vw, 0.84rem);
font-weight: 740;
letter-spacing: -0.01em;
line-height: 1.1;
color: rgba(31, 41, 59, 0.86);
}
.reports-risk-cell--month-start{
position: relative;
}
.reports-risk-cell--month-start::before{
content: attr(data-month);
position: absolute;
top: -11px;
left: 4px;
font-size: 0.54rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.7);
pointer-events: none;
white-space: nowrap;
padding: 0 4px;
background: rgba(255, 255, 255, 0.94);
border-radius: 999px;
}
.reports-risk-cell--month-start::after{
content: "";
position: absolute;
top: -2px;
bottom: 0;
left: -4px;
width: 1px;
border-radius: 2px;
background: rgba(15, 23, 42, 0.12);
pointer-events: none;
}
.reports-risk-grid > .reports-risk-cell--month-start:nth-child(7n+1)::after{
display: none;
}
.reports-risk-cell--month-start .reports-risk-cell__d{
margin-top: 0;
}
.reports-risk-cell--outside{
opacity: 0.72;
}
.reports-risk-cell--outside .reports-risk-cell__b,
.reports-risk-cell--outside .reports-risk-cell__d{
color: rgba(100, 116, 139, 0.62);
}
.reports-risk-cell--no-data{
background: rgba(248, 250, 252, 0.55);
border-color: rgba(148, 163, 184, 0.12);
cursor: default;
pointer-events: none;
}
.reports-risk-cell--no-data .reports-risk-cell__d{
color: rgba(100, 116, 139, 0.38);
}
.reports-risk-cell--safe{
background: color-mix(in srgb, #22c55e 11%, #f7fafb);
border-color: rgba(22, 163, 74, 0.1);
}
.reports-risk-cell--caution{
background: color-mix(in srgb, #fde047 12%, #fffdf5);
border-color: rgba(234, 179, 8, 0.1);
}
/* Below minimum (still non-negative): light cushion stress */
.reports-risk-cell--below-soft{
background: color-mix(in srgb, #fce7f3 10%, #f9fafb);
border-color: rgba(244, 114, 182, 0.09);
}
.reports-risk-cell--below-soft .reports-risk-cell__b{
color: rgba(113, 32, 60, 0.78);
}
.reports-risk-cell--below-soft .reports-risk-cell__d{
color: rgba(100, 50, 70, 0.48);
}
/* Material cushion gap before zero — distinct from negative tiers */
.reports-risk-cell--below-deep{
background: color-mix(in srgb, #fecdd6 17%, #f9fafb);
border-color: rgba(244, 63, 94, 0.12);
}
.reports-risk-cell--below-deep .reports-risk-cell__b{
color: rgba(105, 32, 45, 0.82);
}
.reports-risk-cell--below-deep .reports-risk-cell__d{
color: rgba(100, 42, 55, 0.48);
}
@keyframes reports-risk-riskpulse{
0%, 100%{
box-shadow:
inset 0 0 0 1px rgba(251, 191, 36, 0.12),
0 2px 0 rgba(251, 191, 36, 0.12);
border-color: rgba(245, 158, 11, 0.2);
}
45%{
box-shadow:
inset 0 0 0 1px rgba(251, 191, 36, 0.18),
0 0 0 1px rgba(254, 240, 138, 0.22);
border-color: rgba(245, 158, 11, 0.28);
}
}
.reports-risk-cell--risk-start{
animation: reports-risk-riskpulse 2.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
.reports-risk-cell--risk-start{
animation: none;
box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.16);
border-color: rgba(245, 158, 11, 0.22);
}
}
.reports-risk-cell__risk-mark{
position: absolute;
top: 3px;
left: 3px;
width: 13px;
height: 13px;
border-radius: 4px;
background: repeating-linear-gradient(
-45deg,
rgba(255, 251, 235, 0.96),
rgba(255, 251, 235, 0.96) 2px,
rgba(254, 243, 199, 0.96) 2px,
rgba(254, 243, 199, 0.96) 4px
);
border: 1px solid rgba(245, 158, 11, 0.22);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
pointer-events: none;
}
.reports-risk-cell__risk-mark::after{
content: "!";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 8.5px;
font-weight: 900;
color: rgba(154, 52, 18, 0.88);
line-height: 1;
}
.reports-risk-cell__recovery-pill{
position: absolute;
top: 3px;
right: 3px;
max-width: calc(100% - 8px);
padding: 1px 5px 2px;
border-radius: 999px;
font-size: 0.5rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(22, 101, 52, 0.95);
background: color-mix(in srgb, #bbf7d0 55%, #ffffff);
border: 1px solid rgba(34, 197, 94, 0.2);
line-height: 1.2;
pointer-events: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.reports-risk-cell--eve-risk{
box-shadow: inset 0 0 0 1px rgba(253, 230, 138, 0.38);
border-color: rgba(245, 158, 11, 0.16);
}
/* Negative projected balance — graded steps (fill conveys severity; borders stay calm) */
.reports-risk-cell--neg-1{
background: color-mix(in srgb, #ffe4e6 14%, #f9fafb);
border-color: rgba(244, 63, 94, 0.08);
color: rgba(71, 38, 45, 0.88);
}
.reports-risk-cell--neg-2{
background: color-mix(in srgb, #fecdd6 26%, #f8fafc);
border-color: rgba(251, 113, 133, 0.11);
color: rgba(68, 34, 40, 0.9);
}
.reports-risk-cell--neg-3{
background: color-mix(in srgb, #fda4af 32%, #f8fafb);
border-color: rgba(225, 29, 72, 0.14);
color: rgba(61, 24, 32, 0.92);
}
.reports-risk-cell--neg-1 .reports-risk-cell__d,
.reports-risk-cell--neg-2 .reports-risk-cell__d,
.reports-risk-cell--neg-3 .reports-risk-cell__d{
color: rgba(71, 40, 45, 0.58);
}
.reports-risk-cell--neg-1 .reports-risk-cell__b{
color: rgba(80, 32, 40, 0.84);
}
.reports-risk-cell--neg-2 .reports-risk-cell__b{
color: rgba(76, 22, 32, 0.88);
}
.reports-risk-cell--neg-3 .reports-risk-cell__b{
color: rgba(72, 12, 24, 0.92);
}
.reports-risk-cell--active.reports-risk-cell--caution{
background: color-mix(in srgb, #fef08a 14%, #fffdf5);
border-color: rgba(202, 138, 4, 0.16);
}
.reports-risk-cell--active.reports-risk-cell--below-soft{
background: color-mix(in srgb, #fce7f3 14%, #f8fafc);
border-color: rgba(244, 114, 182, 0.12);
}
.reports-risk-cell--active.reports-risk-cell--below-deep{
background: color-mix(in srgb, #fbcfe8 20%, #f9fafb);
border-color: rgba(251, 113, 133, 0.16);
}
.reports-risk-cell--active.reports-risk-cell--neg-1{
background: color-mix(in srgb, #ffe4e6 22%, #f7fafc);
border-color: rgba(244, 63, 94, 0.12);
}
.reports-risk-cell--active.reports-risk-cell--neg-2{
background: color-mix(in srgb, #fecdd6 34%, #f8f9fb);
border-color: rgba(251, 113, 133, 0.16);
}
.reports-risk-cell--active.reports-risk-cell--neg-3{
background: color-mix(in srgb, #fda4af 40%, #f9fafc);
border-color: rgba(225, 29, 72, 0.2);
}
.reports-risk-cell--today:not(.reports-risk-cell--active){
border-color: rgba(15, 23, 42, 0.16);
box-shadow:
0 0 0 1px rgba(15, 23, 42, 0.06),
0 3px 8px rgba(15, 23, 42, 0.04);
}
.reports-risk-cell--today::after{
content: "Today";
position: absolute;
bottom: 3px;
left: 50%;
transform: translateX(-50%);
font-size: 0.52rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(15, 23, 42, 0.72);
padding: 1px 5px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.85);
pointer-events: none;
}
.reports-risk-cell--today.reports-risk-cell--month-start::after{
display: none;
}
@media (min-width: 720px){
.reports-risk-cell{
min-height: 52px;
}
}
@media (min-width: 960px){
.reports-risk-cell{
min-height: 58px;
max-height: 88px;
}
}
/* Day detail panel — surfaces the "why" behind a cell */
.reports-risk-detail{
border-radius: 12px;
background: rgba(252, 252, 253, 0.88);
border: 1px solid rgba(148, 163, 184, 0.09);
padding: 12px 13px 13px;
min-height: 180px;
font-size: 0.78rem;
color: rgba(51, 65, 85, 0.88);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
display: flex;
flex-direction: column;
gap: 10px;
}
.reports-risk-detail__hint{
font-size: 0.735rem;
color: rgba(100, 116, 139, 0.74);
line-height: 1.44;
}
.reports-risk-detail__head{
display: flex;
flex-wrap: wrap;
gap: 2px 0;
}
.reports-risk-detail__head--stack{
flex-direction: column;
align-items: stretch;
gap: 3px 0;
}
.reports-risk-detail__date{
font-size: 0.68rem;
font-weight: 690;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.72);
}
.reports-risk-detail__balblock{
margin-top: 1px;
}
.reports-risk-detail__bal-label{
font-size: 0.585rem;
font-weight: 690;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.62);
}
.reports-risk-detail__balance{
margin-top: 3px;
font-size: 1.16rem;
font-weight: 740;
letter-spacing: -0.02em;
line-height: 1.08;
color: rgba(15, 23, 42, 0.92);
}
.reports-risk-detail__status{
font-size: 0.7rem;
font-weight: 600;
color: rgba(100, 116, 139, 0.76);
}
.reports-risk-detail--neg .reports-risk-detail__balance{
color: rgba(100, 38, 42, 0.92);
}
.reports-risk-detail--low .reports-risk-detail__balance{
color: rgba(120, 28, 54, 0.84);
}
.reports-risk-detail__gap{
font-size: 0.74rem;
font-weight: 515;
line-height: 1.4;
color: rgba(30, 41, 59, 0.78);
}
.reports-risk-detail__muted{
font-size: 0.735rem;
line-height: 1.4;
color: rgba(100, 116, 139, 0.68);
}
.reports-risk-detail__sec{
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 0;
}
.reports-risk-detail__sec--divider{
margin: 0;
padding-top: 14px;
border-top: 1px solid rgba(148, 163, 184, 0.11);
}
.reports-risk-detail__sec:first-of-type:not(.reports-risk-detail__sec--divider){
padding-top: 0;
}
.reports-risk-detail__sec-title{
font-size: 0.585rem;
font-weight: 690;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.66);
margin: 0 0 4px;
}
.reports-risk-detail__driver{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.reports-risk-detail__driver-text{
min-width: 0;
}
.reports-risk-detail__desc{
font-size: 0.79rem;
font-weight: 585;
line-height: 1.32;
}
.reports-risk-detail__amtblk{
flex-shrink: 0;
font-size: 0.86rem;
font-weight: 690;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.reports-risk-detail__amtblk--exp{
color: rgba(127, 29, 29, 0.86);
}
.reports-risk-detail__amtblk--inc{
color: rgba(22, 101, 52, 0.88);
}
.reports-risk-detail__help{
font-size: 0.755rem;
line-height: 1.4;
color: rgba(30, 41, 59, 0.82);
}
.reports-risk-detail__list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.reports-risk-detail__list li{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
font-size: 0.78rem;
line-height: 1.25;
}
.reports-risk-detail__list li .reports-risk-detail__desc{
color: rgba(30, 41, 59, 0.88);
font-weight: 500;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reports-risk-detail__list li .reports-risk-detail__amt{
font-weight: 700;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.reports-risk-detail__list li .reports-risk-detail__amt--exp{
color: rgba(127, 29, 29, 0.92);
}
.reports-risk-detail__list li .reports-risk-detail__amt--inc{
color: rgba(22, 101, 52, 0.92);
}
.reports-risk-detail__rec{
margin-top: 0;
font-size: 0.74rem;
color: rgba(51, 65, 85, 0.84);
line-height: 1.38;
border-top: none;
padding-top: 0;
}
.reports-risk-detail__rec--divider{
padding-top: 14px;
margin-top: 2px;
border-top: 1px solid rgba(148, 163, 184, 0.11);
}
.reports-risk-detail__inflow{
display: flex;
flex-direction: column;
gap: 2px;
}
.reports-risk-detail__inflow-amt{
font-size: 0.92rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: rgba(22, 101, 52, 0.88);
}
.reports-risk-detail__inflow-meta{
font-size: 0.73rem;
font-weight: 510;
color: rgba(30, 41, 59, 0.78);
line-height: 1.36;
}
.reports-risk-detail__rec--muted{
color: rgba(100, 116, 139, 0.66);
}
/* Actionability — "What could help?" suggestions */
.reports-risk-action{
margin-top: 10px;
padding: 8px 10px;
border-radius: 10px;
background: rgba(248, 250, 252, 0.78);
border: 1px solid rgba(22, 101, 52, 0.1);
display: flex;
flex-direction: column;
gap: 5px;
}
.reports-risk-action__title{
font-size: 0.615rem;
font-weight: 680;
letter-spacing: 0.085em;
text-transform: uppercase;
color: rgba(21, 90, 50, 0.72);
}
.reports-risk-action__items{
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.reports-risk-action__items li{
font-size: 0.8rem;
line-height: 1.4;
color: rgba(30, 41, 59, 0.9);
}
.reports-risk-action__items li strong{
font-weight: 700;
color: rgba(15, 23, 42, 0.95);
}
.reports-table-scroll{
overflow-x: auto;
margin-top: 6px;
}
.reports-table{
width: 100%;
border-collapse: collapse;
font-size: 0.86rem;
}
.reports-table th,
.reports-table td{
text-align: left;
padding: 10px 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.reports-table th{
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(75, 85, 99, 0.7);
background: rgba(0, 0, 0, 0.02);
}
.reports-table__empty{
color: rgba(75, 85, 99, 0.75);
font-style: italic;
}
.reports-card--obligations .reports-card__head{
margin-bottom: 11px;
}
.reports-ob-summary{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
gap: 10px 11px;
margin-bottom: 12px;
}
.reports-ob-card{
padding: 13px 14px 13px;
border-radius: 12px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.92) 100%);
border: 1px solid rgba(148, 163, 184, 0.13);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.reports-ob-card--attention{
border-color: rgba(234, 88, 12, 0.32);
background: linear-gradient(180deg, rgba(255, 251, 235, 0.98) 0%, rgba(255, 246, 230, 0.9) 100%);
}
.reports-ob-card__k{
display: block;
font-size: 0.6rem;
font-weight: 650;
letter-spacing: 0.08em;
color: rgba(100, 116, 139, 0.72);
margin-bottom: 9px;
text-transform: uppercase;
}
.reports-ob-card__v{
font-size: 0.94rem;
font-weight: 650;
color: rgba(15, 23, 42, 0.38);
line-height: 1.12;
word-break: break-word;
}
.reports-ob-card__big{
display: block;
font-size: clamp(1.05rem, 1.85vw + 0.54rem, 1.52rem);
font-weight: 820;
letter-spacing: -0.03em;
color: rgba(15, 23, 42, 0.95);
}
.reports-ob-card__sub{
display: block;
margin-top: 7px;
font-size: 0.72rem;
font-weight: 500;
line-height: 1.38;
color: rgba(100, 116, 139, 0.74);
letter-spacing: 0;
}
/* Pressure Points report — KPI: low-balance card only gets warning edge */
.reports-ob-card--pressure-alert{
border-color: rgba(225, 29, 72, 0.22);
background: linear-gradient(180deg, rgba(255, 250, 250, 0.95) 0%, rgba(255, 255, 255, 0.92) 100%);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.reports-ob-card--pressure-warn{
border-color: rgba(217, 119, 6, 0.34);
background: linear-gradient(180deg, rgba(255, 252, 245, 0.99) 0%, rgba(255, 246, 230, 0.94) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.82),
0 1px 0 rgba(217, 119, 6, 0.06);
}
.reports-ob-summary--pressure{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
margin-bottom: 10px;
}
.reports-ob-summary--pressure .reports-ob-card--pressure{
padding: 15px 16px 14px;
border-radius: 14px;
}
.reports-ob-summary--pressure .reports-ob-card__k{
margin-bottom: 11px;
letter-spacing: 0.06em;
}
.reports-ob-summary--pressure .reports-ob-card__big{
font-size: clamp(1.14rem, 2.1vw + 0.48rem, 1.62rem);
font-weight: 830;
letter-spacing: -0.035em;
line-height: 1.08;
}
.reports-ob-summary--pressure .reports-ob-card__sub{
margin-top: 8px;
font-size: 0.74rem;
color: rgba(100, 116, 139, 0.68);
}
.reports-ob-takeaway{
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(248, 250, 252, 0.8);
font-size: 0.82rem;
font-weight: 500;
line-height: 1.45;
color: rgba(51, 65, 85, 0.9);
}
.reports-ob-takeaway--strong{
border-color: rgba(217, 119, 6, 0.25);
background: rgba(255, 251, 235, 0.78);
color: rgba(120, 53, 15, 0.92);
}
/* Insights row — visualization + timing */
.reports-ob-insights{
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 13px;
margin: 0 0 12px;
}
@media (min-width: 980px){
.reports-ob-insights{
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 12px;
}
}
.reports-ob-insight{
padding: 11px 13px 12px;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.12);
background: rgba(252, 252, 253, 0.82);
}
.reports-ob-insight__title{
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.78);
margin-bottom: 4px;
}
.reports-ob-insight__desc{
font-size: 0.8rem;
line-height: 1.4;
color: rgba(51, 65, 85, 0.88);
margin-bottom: 8px;
}
.reports-ob-insight__desc:empty{
display: none;
}
.reports-ob-bars{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.reports-ob-bar{
display: grid;
grid-template-columns: minmax(122px, 32%) minmax(0, 1fr) 88px;
gap: 10px;
align-items: center;
font-size: 0.78rem;
}
.reports-ob-bar__label{
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(30, 41, 59, 0.88);
font-weight: 600;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reports-ob-bar__icon{
display: inline-block;
width: 1.1em;
text-align: center;
font-size: 0.95em;
opacity: 0.88;
color: var(--reports-ob-tone, var(--accent));
}
.reports-ob-bar__track{
display: block;
height: 13px;
border-radius: 999px;
background: rgba(241, 245, 249, 0.96);
border: 1px solid rgba(148, 163, 184, 0.35);
overflow: hidden;
box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.05);
}
.reports-ob-bar__fill{
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg,
color-mix(in srgb, var(--reports-ob-tone, var(--accent)) 78%, transparent) 0%,
color-mix(in srgb, var(--reports-ob-tone, var(--accent)) 54%, transparent) 100%);
}
.reports-ob-bar__value{
display: grid;
justify-items: end;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.reports-ob-bar__money{
font-weight: 720;
color: rgba(15, 23, 42, 0.92);
font-size: 0.8rem;
}
.reports-ob-bar__pct{
font-weight: 780;
color: rgba(30, 41, 59, 0.9);
font-size: 0.74rem;
letter-spacing: -0.01em;
}
/* Timing — upcoming pressure points */
.reports-ob-timing-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 13px;
}
.reports-ob-timing-item{
padding: 11px 12px 12px;
border-radius: 12px;
background: rgba(255, 252, 246, 0.88);
border: 1px solid rgba(217, 119, 6, 0.12);
}
.reports-ob-timing-stack{
display: flex;
flex-direction: column;
gap: 8px;
}
.reports-ob-timing-weekline{
font-weight: 750;
font-size: 0.88rem;
color: rgba(15, 23, 42, 0.94);
letter-spacing: -0.012em;
}
.reports-ob-timing-hero{
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 6px 12px;
}
.reports-ob-timing-hero__amt{
font-size: 1.14rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
color: rgba(124, 45, 18, 0.96);
}
.reports-ob-timing-hero__meta{
font-size: 0.76rem;
font-weight: 600;
color: rgba(71, 85, 105, 0.8);
}
.reports-ob-timing-sub{
list-style: none;
margin: 2px 0 0;
padding: 10px 0 0;
border-top: 1px dashed rgba(180, 83, 9, 0.12);
display: flex;
flex-direction: column;
gap: 9px;
}
.reports-ob-timing-line{
display: flex;
align-items: baseline;
gap: 10px;
font-size: 0.76rem;
color: rgba(51, 65, 85, 0.9);
line-height: 1.35;
}
.reports-ob-timing-line__name{
flex: 0 1 auto;
max-width: 56%;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reports-ob-timing-line__leader{
flex: 1 1 auto;
min-width: 8px;
border-bottom: 1px dotted rgba(148, 163, 184, 0.55);
height: 0.35em;
transform: translateY(-1px);
}
.reports-ob-timing-line__amt{
flex-shrink: 0;
font-variant-numeric: tabular-nums;
font-weight: 750;
color: rgba(127, 29, 29, 0.9);
}
/* Table title + compact toolbar */
.reports-ob-table-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
margin: 2px 0 6px;
padding-top: 2px;
border-top: 1px solid rgba(17, 24, 39, 0.045);
}
.reports-ob-table-head__title{
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.7);
}
.reports-obligation-toolbar{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px 18px;
margin-bottom: 12px;
padding-bottom: 4px;
}
.reports-obligation-toolbar--compact{
gap: 7px 10px;
margin: 0;
padding: 0;
align-items: center;
}
.reports-obligation-field{
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
min-width: 0;
}
.reports-obligation-field__k{
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.03em;
color: rgba(100, 116, 139, 0.7);
text-transform: none;
}
.reports-obligation-select{
font: inherit;
font-size: 0.76rem;
font-weight: 500;
padding: 3px 7px;
border-radius: 7px;
border: 1px solid rgba(17, 24, 39, 0.05);
background: rgba(255, 255, 255, 0.75);
color: rgba(51, 65, 85, 0.95);
min-width: 140px;
max-width: 100%;
}
.reports-obligation-check{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.74rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.82);
cursor: pointer;
user-select: none;
}
.reports-obligation-check input{
width: 13px;
height: 13px;
accent-color: var(--accent);
}
.reports-table-scroll--obligations{
margin-top: 5px;
}
.reports-table--obligations th,
.reports-table--obligations td{
padding: 9px 12px;
vertical-align: middle;
}
.reports-table--obligations thead th{
background: transparent;
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
color: rgba(100, 116, 139, 0.75);
font-size: 0.69rem;
font-weight: 650;
letter-spacing: 0.03em;
text-transform: none;
}
.reports-table--obligations .num{
text-align: right;
font-variant-numeric: tabular-nums;
}
.reports-table--obligations th.reports-ob-est-col{
background: transparent;
color: rgba(100, 116, 139, 0.62);
font-weight: 600;
font-size: 0.66rem;
}
.reports-table--obligations th.reports-ob-freq-col{
color: rgba(100, 116, 139, 0.72);
font-weight: 500;
font-size: 0.74rem;
}
.reports-table--obligations td.reports-ob-est,
.reports-table--obligations .reports-ob-est{
font-weight: 640;
color: rgba(41, 60, 55, 0.68);
background: transparent;
}
.reports-obligation-group-head th{
text-align: left;
padding: 16px 12px 7px;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
color: rgba(15, 23, 42, 0.9);
background: transparent;
border-bottom: none;
border-top: none;
}
.reports-obligation-group-head:not(:first-of-type) th{
padding-top: 21px;
margin-top: 4px;
border-top: 1px dashed rgba(148, 163, 184, 0.55);
}
.reports-obligation-group-head + .reports-obligation-row td{
box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.16);
}
.reports-obligation-group-head th .reports-obligation-group-head__icon{
display: inline-block;
margin-right: 7px;
font-size: 1.05em;
opacity: 0.85;
width: 1.1em;
text-align: center;
}
.reports-obligation-group-head th .reports-obligation-group-head__label{
font-weight: 700;
}
.reports-obligation-group-head th .reports-obligation-group-head__sub{
margin-left: 8px;
font-size: 0.69rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.62);
}
.reports-obligation-group-head:first-child th{
padding-top: 2px;
}
.reports-obligation-row{
transition: background 0.12s ease;
}
.reports-obligation-row:hover{
background: rgba(248, 250, 252, 0.56);
}
.reports-obligation-desc{
font-weight: 600;
color: rgba(15, 23, 42, 0.92);
}
.reports-obligation-desc__name{
font-weight: 600;
}
.reports-obligation-amt{
font-weight: 720;
color: rgba(15, 23, 42, 0.92);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.reports-obligation-row--large .reports-obligation-amt{
font-weight: 750;
color: rgba(15, 23, 42, 0.96);
}
.reports-obligation-row--large .reports-obligation-desc{
font-weight: 650;
}
.reports-obligation-pill{
display: inline-block;
margin-left: 7px;
padding: 2px 7px;
border-radius: 999px;
font-size: 0.56rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
vertical-align: middle;
color: rgba(124, 45, 18, 0.95);
background: linear-gradient(180deg, rgba(254, 215, 170, 0.55), rgba(253, 186, 116, 0.32));
border: 1px solid rgba(234, 88, 12, 0.42);
box-shadow: 0 1px 2px rgba(234, 88, 12, 0.12);
}
.reports-obligation-next{
font-size: 0.8rem;
color: rgba(30, 41, 59, 0.88);
font-weight: 550;
white-space: nowrap;
}
.reports-obligation-freq{
color: rgba(100, 116, 139, 0.64);
font-size: 0.72rem;
font-weight: 580;
white-space: nowrap;
}
.reports-obligation-subtotal td{
font-size: 0.72rem;
font-weight: 500;
background: transparent;
border-bottom: none;
color: rgba(100, 116, 139, 0.58);
}
.reports-obligation-subtotal__k{
color: rgba(100, 116, 139, 0.6);
text-align: right;
padding-right: 12px;
font-style: normal;
}
.reports-obligation-subtotal td.reports-ob-est{
font-weight: 620;
color: rgba(41, 60, 55, 0.72);
}
.reports-table--obligations tfoot .reports-obligation-grand td{
font-weight: 740;
font-size: 0.84rem;
background: transparent;
border-top: 1px solid rgba(148, 163, 184, 0.38);
padding-top: 11px;
padding-bottom: 8px;
color: rgba(15, 23, 42, 0.95);
}
.reports-obligation-grand__label{
color: rgba(51, 65, 85, 0.86);
}
body[data-bw-view="reports"] .bw-fb-launcher{
right: 14px;
bottom: 14px;
padding: 8px 12px;
font-size: 12.5px;
box-shadow:
0 1px 0 rgba(0,0,0,0.05),
0 10px 20px -14px rgba(11, 61, 46, 0.42);
opacity: 0.9;
}
.reports-pressure-hint{
margin: 0 0 4px;
font-size: 0.7rem;
color: rgba(100, 116, 139, 0.55);
}
.reports-pressure-hint:not([hidden]){
display: block;
}
.reports-card--pressure .reports-card__head{
margin-bottom: 8px;
}
.reports-ob-card--pressure-neutral{
border-color: rgba(17, 24, 39, 0.06) !important;
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.reports-ob-card--pressure-neutral .reports-ob-card__big{
font-weight: 700 !important;
color: rgba(30, 41, 59, 0.9) !important;
}
/* Narrative — analytical, not alarmist */
.reports-pressure-narrative{
margin: 0 0 8px;
padding: 8px 11px;
border-radius: 9px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(248, 250, 252, 0.9);
display: flex;
flex-direction: column;
gap: 4px;
}
.reports-pressure-narrative--clear{
background: rgba(248, 250, 252, 0.9);
border-color: rgba(17, 24, 39, 0.06);
}
.reports-pressure-narrative--caution{
background: rgba(255, 252, 245, 0.65);
border-color: rgba(217, 119, 6, 0.1);
}
.reports-pressure-narrative__lede{
font-size: 0.84rem;
line-height: 1.38;
font-weight: 580;
color: rgba(30, 41, 59, 0.9);
}
.reports-pressure-narrative__rec{
font-size: 0.72rem;
font-weight: 450;
color: rgba(100, 116, 139, 0.78);
line-height: 1.35;
}
.reports-pressure-narrative__rec:empty{ display: none; }
.reports-table-scroll--pressure{
margin-top: 0;
}
.reports-table--pressure th,
.reports-table--pressure td{
padding: 7px 10px;
vertical-align: middle;
}
.reports-table--pressure thead th{
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.62);
background: rgba(248, 250, 252, 0.65);
border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
/* Rows: neutral surface; severity = left accent only */
.reports-table--pressure tbody tr.reports-pressure-row--main{
background: #fff;
border-bottom: 1px solid rgba(17, 24, 39, 0.05);
transition: background 0.12s ease;
}
.reports-table--pressure tbody tr.reports-pressure-row--main:hover{
background: rgba(248, 250, 252, 0.85);
}
.reports-table--pressure tbody tr.reports-pressure-row--focus{
background: color-mix(in srgb, rgba(254, 243, 199, 0.45) 35%, #fff);
box-shadow: inset 4px 0 0 rgba(180, 83, 9, 0.42);
}
.reports-table--pressure tbody tr.reports-pressure-row--accent-unknown{
box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.45);
}
.reports-table--pressure tbody tr.reports-pressure-row--accent-comfortable{
box-shadow: inset 3px 0 0 rgba(34, 197, 94, 0.28);
}
.reports-table--pressure tbody tr.reports-pressure-row--accent-watch{
box-shadow: inset 3px 0 0 rgba(217, 119, 6, 0.38);
}
.reports-table--pressure tbody tr.reports-pressure-row--accent-tight{
box-shadow: inset 3px 0 0 rgba(234, 88, 12, 0.4);
}
.reports-table--pressure tbody tr.reports-pressure-row--accent-below{
box-shadow: inset 3px 0 0 rgba(185, 28, 28, 0.28);
}
.reports-table--pressure tbody tr.reports-pressure-row--focus.reports-pressure-row--accent-below{
box-shadow:
inset 5px 0 0 rgba(185, 28, 28, 0.55),
inset 0 0 0 1px rgba(185, 28, 28, 0.06);
background: color-mix(in srgb, rgba(254, 226, 226, 0.35) 40%, #fff);
}
.reports-pressure-date{
font-weight: 560;
color: rgba(30, 41, 59, 0.88);
white-space: nowrap;
font-size: 0.8rem;
font-variant-numeric: tabular-nums;
}
.reports-pressure-pay{
font-size: 0.8rem;
line-height: 1.28;
color: rgba(30, 41, 59, 0.9);
font-weight: 500;
min-width: 0;
}
.reports-pressure-pay__name{
font-weight: 600;
color: rgba(15, 23, 42, 0.9);
}
.reports-pressure-pay__cat{
display: block;
margin-top: 2px;
font-size: 0.68rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.72);
letter-spacing: 0.01em;
}
.reports-table--pressure .reports-pressure-amt{
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.reports-pressure-amt__v{
font-weight: 620;
font-size: 0.82rem;
color: rgba(30, 41, 59, 0.88);
}
.reports-pressure-bal-cell{
text-align: right !important;
font-variant-numeric: tabular-nums;
}
.reports-pressure-bal__num{
font-size: 0.86rem;
font-weight: 620;
letter-spacing: -0.02em;
color: rgba(30, 41, 59, 0.88);
}
.reports-pressure-bal__num--lead{
font-weight: 780;
font-size: 0.92rem;
}
.reports-pressure-bal__num--ok{
color: rgba(21, 90, 48, 0.85);
}
.reports-pressure-bal__num--amber{
color: rgba(146, 64, 14, 0.88);
}
.reports-pressure-bal__num--neg{
color: rgba(127, 29, 29, 0.82);
font-weight: 640;
}
.reports-pressure-bal__num--muted{
color: rgba(100, 116, 139, 0.55);
font-weight: 500;
}
.reports-pressure-status{
font-size: 0.76rem;
font-weight: 500;
line-height: 1.3;
color: rgba(71, 85, 105, 0.82);
}
.reports-pressure-status--ok{
color: rgba(22, 101, 52, 0.72);
}
.reports-pressure-status--date{
color: rgba(30, 41, 59, 0.82);
font-weight: 540;
}
.reports-pressure-status--stale{
color: rgba(120, 53, 15, 0.78);
font-weight: 540;
}
.reports-pressure-status--muted{
color: rgba(100, 116, 139, 0.62);
}
.reports-pressure-detail{
background: rgba(248, 250, 252, 0.65);
}
.reports-pressure-detail__cell{
padding: 0 10px 8px 14px !important;
border-bottom: 1px solid rgba(17, 24, 39, 0.05);
}
.reports-pressure-detail__body{
font-size: 0.74rem;
line-height: 1.42;
color: rgba(71, 85, 105, 0.82);
max-width: 72ch;
}
.reports-pressure-row--main{
cursor: pointer;
}
.reports-pressure-row--main:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: -2px;
}
.reports-pressure-row--main.is-open{
background: rgba(248, 250, 252, 0.92) !important;
}
.reports-table--pressure .reports-pressure-pay,
.reports-table--pressure .reports-pressure-bal-cell{
cursor: help;
}
/* Reports: narrow nav rail + wide chart workspace */
body[data-bw-view="reports"] .app-layout{
grid-template-columns: clamp(212px, 17vw, 244px) minmax(0, 1fr);
gap: clamp(18px, 2vw, 26px);
}
body[data-bw-view="reports"] .sidebar{
gap: 5px;
width: 100%;
min-width: 0;
padding-right: 0;
opacity: 1;
background: transparent;
/*
Avoid sticky/max-height clipping in the reports rail — navigation should
stay fully reachable while the chart column remains the focal column.
*/
position: relative;
top: auto;
max-height: none;
overflow-x: visible;
overflow-y: visible;
}
body[data-bw-view="reports"] .sidebar-sticky-head{
position: static;
padding-top: 6px;
gap: 8px;
background: transparent;
}
body[data-bw-view="reports"] .app-view--reports,
body[data-bw-view="reports"] .reports-hub,
body[data-bw-view="reports"] #chartPanel,
body[data-bw-view="reports"] .reports-chart-shell{
min-width: 0;
}
body[data-bw-view="reports"] .reports-hub{
gap: 8px;
padding-bottom: clamp(32px, 5vw, 56px);
}
body[data-bw-view="reports"] .sidebar .card{
border: 1px solid rgba(17, 24, 39, 0.018);
background: rgba(255, 255, 255, 0.42);
box-shadow: none;
}
body[data-bw-view="reports"] #reportsLeftNav{
padding: 3px 6px 4px;
border: 1px solid rgba(17, 24, 39, 0.022);
background: rgba(255, 255, 255, 0.48);
box-shadow: none;
}
body[data-bw-view="reports"] #sidebarBodyMonth.card{
padding: 4px 6px 5px;
border: 1px solid rgba(17, 24, 39, 0.016);
background: rgba(255, 255, 255, 0.38);
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar.is-high{
border-color: rgba(17, 24, 39, 0.03);
}
body[data-bw-view="reports"] .sidebar-section-head h2,
body[data-bw-view="reports"] .cash-outlook-title{
color: rgba(100, 116, 139, 0.68);
}
body[data-bw-view="reports"] #sidebarBodyMonth .sidebar-section-head{
margin-bottom: 3px;
}
body[data-bw-view="reports"] #sidebarBodyMonth .sidebar-section-head h2{
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(100, 116, 139, 0.78);
}
body[data-bw-view="reports"] #sidebarBodyMonth .sidebar-collapse-btn{
width: 28px;
height: 28px;
border-radius: 8px;
}
body[data-bw-view="reports"] #sidebarBodyMonth .sidebar-collapse-chevron{
width: 15px;
height: 15px;
}
body[data-bw-view="reports"] #sidebarBodyMonth label{
font-size: 10.5px;
}
body[data-bw-view="reports"] #sidebarBodyMonth input[type="month"]{
padding: 2px 5px;
min-height: 30px;
font-size: 11.75px;
}
body[data-bw-view="reports"] #sidebarBodyMonth .sidebar-month-spacer{
height: 4px !important;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar{
text-align: left;
align-items: stretch;
min-width: 0;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger{
border-color: rgba(185, 28, 28, 0.05);
background: rgba(254, 247, 247, 0.32);
color: rgba(120, 40, 40, 0.66);
padding: 4px 6px 5px;
line-height: 1.28;
box-shadow: none;
border-radius: 8px;
font-size: 11px;
}
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar.is-high{
padding: 4px 6px 5px;
line-height: 1.28;
box-shadow: none;
border-radius: 8px;
font-size: 11px;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar:has(.cash-outlook-card),
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar:has(.cash-outlook-card){
text-align: left;
padding: 7px 8px 6px;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__body,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__body{
max-width: 15.5rem;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__headline,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__headline{
font-size: 11px;
line-height: 1.28;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__line--secondary,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__line--secondary{
font-size: 10.25px;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__line--tertiary,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__line--tertiary{
font-size: 10px;
white-space: nowrap;
}
@media (max-width: 720px){
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__line--tertiary,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar .cash-outlook-card__line--tertiary{
white-space: normal;
}
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar strong,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar strong{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
gap: 5px 6px;
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.3;
white-space: normal;
overflow-wrap: anywhere;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar .cash-outlook-icon,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar .cash-outlook-icon{
flex: 0 0 auto;
margin-top: 1px;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar .cash-outlook-line,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar .cash-outlook-line{
flex-wrap: wrap;
gap: 4px 8px;
font-size: 11px;
margin-top: 2px;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar .cash-outlook-subhead--inline,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar .cash-outlook-subhead--inline{
display: inline;
margin-left: 0;
white-space: normal;
overflow-wrap: anywhere;
font-size: 11px;
font-weight: 650;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar .cash-outlook-details,
body[data-bw-view="reports"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar .cash-outlook-details{
margin-top: 4px;
width: 100%;
min-width: 0;
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-icon{
color: rgba(185, 28, 28, 0.42);
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-subhead--inline{
font-weight: 600;
color: rgba(120, 40, 40, 0.7);
}
body[data-bw-view="reports"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-line{
color: rgba(100, 50, 50, 0.62);
}
/* Pressure Points report open: avoid stacked “emergency” vibe with sidebar */
body[data-bw-view="reports"][data-bw-pressure-report="1"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger,
body[data-bw-view="reports"][data-bw-pressure-report="1"] #sidebarHighBalanceBanner.calendar-low-balance--sidebar{
background: rgba(248, 250, 252, 0.72);
border-color: rgba(17, 24, 39, 0.06);
color: rgba(71, 85, 105, 0.72);
}
body[data-bw-view="reports"][data-bw-pressure-report="1"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-icon{
color: rgba(148, 163, 184, 0.55);
}
body[data-bw-view="reports"][data-bw-pressure-report="1"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-subhead--inline{
font-weight: 600;
color: rgba(71, 85, 105, 0.82);
}
body[data-bw-view="reports"][data-bw-pressure-report="1"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-line{
color: rgba(100, 116, 139, 0.68);
}
body[data-bw-view="reports"][data-bw-pressure-report="1"] .calendar-low-balance--sidebar.is-danger .cash-outlook-subhead--inline{
font-weight: 600;
}
body[data-bw-view="reports"][data-bw-pressure-report="1"] .calendar-low-balance--sidebar.is-danger .cash-outlook-line{
font-size: 11px;
}
body[data-bw-view="reports"] .totals-compact__row{
border-bottom-color: rgba(17, 24, 39, 0.025);
}
body[data-bw-view="reports"] .totals-compact__row--net{
border-top-color: rgba(17, 24, 39, 0.045);
}
body[data-bw-view="reports"] .calendar-low-balance--sidebar.is-danger .cash-outlook-subhead--inline{
font-size: 11px;
font-weight: 700;
}
body[data-bw-view="reports"] .calendar-low-balance--sidebar.is-danger .cash-outlook-line{
font-size: 11px;
}
body[data-bw-view="reports"] .sidebar-balance-threshold-alerts .cash-outlook-title{
font-size: 10.5px;
font-weight: 650;
letter-spacing: 0.06em;
color: rgba(100, 116, 139, 0.68);
}
body[data-bw-view="reports"] .sidebar-balance-threshold-alerts .cash-outlook-head{
gap: 1px;
margin-bottom: 2px;
}
body[data-bw-view="reports"] .totals-compact{
gap: 2px;
padding: 0;
}
body[data-bw-view="reports"] .totals-compact__row{
padding: 1px 0;
border-bottom: 1px solid rgba(17, 24, 39, 0.04);
font-size: 11px;
}
body[data-bw-view="reports"] .totals-compact__row:last-of-type{
border-bottom: none;
}
body[data-bw-view="reports"] .totals-compact__row--net{
margin-top: 1px;
padding-top: 4px;
border-top: 1px solid rgba(17, 24, 39, 0.055);
border-bottom: none;
}
body[data-bw-view="reports"] .totals-compact__k{
font-weight: 500;
color: rgba(100, 116, 139, 0.72);
}
body[data-bw-view="reports"] .totals-compact__v{
font-size: 11.75px;
}
body[data-bw-view="reports"] #reportsViewPanel .reports-card--hero .reports-card__head{
min-width: 0;
}
body[data-bw-view="reports"] #reportsViewPanel .reports-card--hero .reports-card__desc{
max-width: none;
}
body[data-bw-view="reports"] .reports-mobile-nav{
display: none;
margin: 0 0 2px;
padding: 0;
}
body[data-bw-view="reports"] .reports-mobile-nav__inner{
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
body[data-bw-view="reports"] .reports-mobile-nav__label{
flex: 0 0 auto;
font-size: 10.5px;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.72);
}
body[data-bw-view="reports"] .reports-mobile-nav__select{
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
padding: 7px 10px;
border-radius: 9px;
border: 1px solid rgba(17, 24, 39, 0.08);
background: rgba(255, 255, 255, 0.92);
color: rgba(17, 24, 39, 0.88);
font-size: 13px;
font-weight: 550;
line-height: 1.2;
}
body[data-bw-view="reports"] .reports-mobile-nav__select:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
outline-offset: 1px;
}
@media (max-width: 900px){
body[data-bw-view="reports"] #chartPanel .projection-chart-wrap--reports{
min-width: 680px;
}
body[data-bw-view="reports"] .reports-mobile-nav{
display: block;
}
body[data-bw-view="reports"] #reportsLeftNav{
display: none !important;
}
}
@media (max-width: 720px){
body[data-bw-view="reports"] .app-layout{
grid-template-columns: 1fr;
}
}
/* Forecast (calendar): fixed narrow sidebar + fluid calendar (not 50/50 fr split) */
body[data-bw-view="calendar"] .app-layout{
grid-template-columns: clamp(218px, 18vw, 238px) minmax(0, 1fr);
gap: 14px;
}
body[data-bw-view="calendar"] .sidebar{
gap: 10px;
padding-right: 0;
width: 100%;
min-width: 0;
background: #f3f4f6;
border-radius: 0;
padding: 4px 8px 10px 4px;
box-shadow: none;
}
body[data-bw-view="calendar"] .sidebar-sticky-head{
gap: 12px;
padding-top: 8px;
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
background: transparent;
}
body[data-bw-view="calendar"] .sidebar-balance-threshold-alerts,
body[data-bw-view="transactions"] .sidebar-balance-threshold-alerts{
margin-bottom: 0;
gap: 6px;
border: none;
background: transparent;
border-radius: 0;
box-shadow: none;
padding: 0;
}
body[data-bw-view="calendar"] .sidebar .card,
body[data-bw-view="transactions"] .sidebar .card,
body[data-bw-view="settings"] .sidebar .card,
body[data-bw-view="reports"] .sidebar .card{
border: none;
background: #fafaf9;
border-radius: 12px;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.035),
0 0 0 1px rgba(15, 23, 42, 0.025);
padding: 9px 10px;
transition: box-shadow 0.16s ease, background 0.16s ease;
}
body[data-bw-view="calendar"] .sidebar .card + .card,
body[data-bw-view="calendar"] .sidebar-balance-threshold-alerts + .card,
body[data-bw-view="calendar"] .card + .sidebar-balance-threshold-alerts,
body[data-bw-view="transactions"] .sidebar .card + .card,
body[data-bw-view="transactions"] .sidebar-balance-threshold-alerts + .card,
body[data-bw-view="transactions"] .card + .sidebar-balance-threshold-alerts{
border-top: none;
margin-top: 0;
padding-top: 10px;
}
body[data-bw-view="calendar"] #sidebarPendingTxCard,
body[data-bw-view="transactions"] #sidebarPendingTxCard{
margin-top: 0;
}
body[data-bw-view="calendar"] #sidebarPendingTxCard:not(.sidebar-pending--empty):hover,
body[data-bw-view="calendar"] .sidebar .card[data-sidebar-key="month"]:hover,
body[data-bw-view="transactions"] #sidebarPendingTxCard:not(.sidebar-pending--empty):hover,
body[data-bw-view="transactions"] .sidebar .card[data-sidebar-key="month"]:hover{
background: #fff;
box-shadow:
0 2px 8px rgba(15, 23, 42, 0.06),
0 0 0 1px rgba(15, 23, 42, 0.04);
}
body[data-bw-view="calendar"] #sidebarPendingTxCard.sidebar-pending--empty,
body[data-bw-view="transactions"] #sidebarPendingTxCard.sidebar-pending--empty,
body[data-bw-view="settings"] #sidebarPendingTxCard.sidebar-pending--empty,
body[data-bw-view="reports"] #sidebarPendingTxCard.sidebar-pending--empty{
padding: 5px 10px 4px;
background: rgba(252, 252, 251, 0.86);
box-shadow: none;
}
body[data-bw-view="calendar"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg--lead,
body[data-bw-view="transactions"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg--lead,
body[data-bw-view="settings"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg--lead,
body[data-bw-view="reports"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg--lead{
font-size: 11px;
font-weight: 600;
color: rgba(71, 85, 105, 0.72);
}
body[data-bw-view="calendar"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg--sub,
body[data-bw-view="transactions"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg--sub,
body[data-bw-view="settings"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg--sub,
body[data-bw-view="reports"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg--sub{
font-size: 9.5px;
color: rgba(100, 116, 139, 0.78);
}
body[data-bw-view="calendar"] #sidebarPendingTxCard .sidebar-section-head,
body[data-bw-view="calendar"] .sidebar-section:not(.sidebar-section--collapsed) .sidebar-section-head,
body[data-bw-view="transactions"] #sidebarPendingTxCard .sidebar-section-head,
body[data-bw-view="transactions"] .sidebar-section:not(.sidebar-section--collapsed) .sidebar-section-head,
body[data-bw-view="settings"] #sidebarPendingTxCard .sidebar-section-head,
body[data-bw-view="settings"] .sidebar-section:not(.sidebar-section--collapsed) .sidebar-section-head,
body[data-bw-view="reports"] #sidebarPendingTxCard .sidebar-section-head,
body[data-bw-view="reports"] .sidebar-section:not(.sidebar-section--collapsed) .sidebar-section-head{
margin-bottom: 5px;
}
body[data-bw-view="calendar"] #sidebarPendingTitle,
body[data-bw-view="calendar"] .sidebar-section-head h2,
body[data-bw-view="transactions"] #sidebarPendingTitle,
body[data-bw-view="transactions"] .sidebar-section-head h2,
body[data-bw-view="settings"] #sidebarPendingTitle,
body[data-bw-view="settings"] .sidebar-section-head h2,
body[data-bw-view="reports"] #sidebarPendingTitle,
body[data-bw-view="reports"] .sidebar-section-head h2{
font-size: 10px;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.72);
}
body[data-bw-view="calendar"] .cash-outlook-title,
body[data-bw-view="transactions"] .cash-outlook-title,
body[data-bw-view="settings"] .cash-outlook-title,
body[data-bw-view="reports"] .cash-outlook-title{
font-size: 10px;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.72);
margin-top: 0;
}
body[data-bw-view="calendar"] .sidebar-balance-threshold-hint-inline,
body[data-bw-view="transactions"] .sidebar-balance-threshold-hint-inline,
body[data-bw-view="settings"] .sidebar-balance-threshold-hint-inline,
body[data-bw-view="reports"] .sidebar-balance-threshold-hint-inline{
font-size: 10px;
font-weight: 500;
line-height: 1.32;
color: rgba(148, 163, 184, 0.72);
margin-top: 2px;
}
body[data-bw-view="calendar"] .sidebar-collapse-btn,
body[data-bw-view="transactions"] .sidebar-collapse-btn{
width: 26px;
height: 26px;
border-radius: 7px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.7);
color: rgba(71, 85, 105, 0.65);
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
body[data-bw-view="calendar"] .sidebar-collapse-btn:hover,
body[data-bw-view="transactions"] .sidebar-collapse-btn:hover{
background: #fff;
border-color: rgba(17, 24, 39, 0.1);
color: rgba(51, 65, 85, 0.85);
}
body[data-bw-view="calendar"] .pending-attn-item,
body[data-bw-view="transactions"] .pending-attn-item{
padding: 7px 8px 7px 9px;
gap: 8px;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: #fff;
box-shadow: none;
cursor: pointer;
}
body[data-bw-view="calendar"] .pending-attn-name,
body[data-bw-view="transactions"] .pending-attn-name{
font-size: 12px;
font-weight: 650;
color: rgba(15, 23, 42, 0.92);
}
body[data-bw-view="calendar"] .pending-attn-meta,
body[data-bw-view="transactions"] .pending-attn-meta{
font-size: 10.5px;
letter-spacing: 0;
color: rgba(100, 116, 139, 0.62);
}
body[data-bw-view="calendar"] .pending-attn-indicator,
body[data-bw-view="transactions"] .pending-attn-indicator{
color: rgba(148, 163, 184, 0.55);
}
body[data-bw-view="calendar"] .pending-attn-item:hover,
body[data-bw-view="transactions"] .pending-attn-item:hover{
background: #fff;
border-color: rgba(11, 61, 46, 0.12);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
body[data-bw-view="calendar"] .pending-attn-item:hover .pending-attn-indicator,
body[data-bw-view="transactions"] .pending-attn-item:hover .pending-attn-indicator{
color: rgba(71, 85, 105, 0.82);
}
body[data-bw-view="calendar"] .pending-attn-item.is-critical,
body[data-bw-view="transactions"] .pending-attn-item.is-critical{
border-color: rgba(167, 55, 68, 0.1);
background: #fff;
}
body[data-bw-view="calendar"] .pending-attn-item.is-soon,
body[data-bw-view="transactions"] .pending-attn-item.is-soon{
border-color: rgba(180, 83, 9, 0.1);
background: #fff;
}
body[data-bw-view="calendar"] .pending-attn-item::before,
body[data-bw-view="transactions"] .pending-attn-item::before{
display: none;
}
body[data-bw-view="calendar"] .cash-outlook-icon,
body[data-bw-view="transactions"] .cash-outlook-icon{
width: 15px;
height: 15px;
}
body[data-bw-view="calendar"] .cash-outlook-icon svg,
body[data-bw-view="transactions"] .cash-outlook-icon svg{
width: 15px;
height: 15px;
stroke-width: 2.1;
}
body[data-bw-view="calendar"] .cash-outlook-hero,
body[data-bw-view="transactions"] .cash-outlook-hero{
margin: 1px 0 2px;
font-size: 12.5px;
line-height: 1.22;
font-weight: 650;
color: rgba(30, 41, 59, 0.88);
}
body[data-bw-view="calendar"] .cash-outlook-kv,
body[data-bw-view="transactions"] .cash-outlook-kv{
font-size: 10.35px;
line-height: 1.22;
gap: 8px;
}
body[data-bw-view="calendar"] .cash-outlook-k,
body[data-bw-view="transactions"] .cash-outlook-k{
color: rgba(71, 85, 105, 0.74);
font-weight: 500;
}
body[data-bw-view="calendar"] .cash-outlook-v,
body[data-bw-view="transactions"] .cash-outlook-v{
font-weight: 660;
font-size: 12.25px;
color: rgba(15, 23, 42, 0.9);
}
body[data-bw-view="calendar"] .cash-outlook-secondary,
body[data-bw-view="transactions"] .cash-outlook-secondary{
margin-top: 2px;
font-size: 10px;
line-height: 1.28;
font-weight: 500;
color: rgba(100, 116, 139, 0.52);
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion{
text-align: left;
align-items: stretch;
padding: 13px 15px 12px;
margin-top: 5px;
border-radius: 12px;
border: 1px solid rgba(11, 61, 46, 0.04);
background: rgba(236, 253, 245, 0.34);
box-shadow: none;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion strong,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion strong{
justify-content: flex-start;
font-size: 14px;
font-weight: 700;
line-height: 1.32;
letter-spacing: -0.015em;
white-space: normal;
color: rgba(11, 61, 46, 0.8);
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion .cash-outlook-hero,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion .cash-outlook-hero{
font-size: 14px;
font-weight: 700;
line-height: 1.32;
color: rgba(11, 61, 46, 0.8);
text-align: left;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion .cash-outlook-secondary,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion .cash-outlook-secondary{
text-align: left;
margin-top: 5px;
font-size: 10.5px;
line-height: 1.36;
color: rgba(100, 116, 139, 0.48);
}
body[data-bw-view="calendar"] .cash-outlook-head,
body[data-bw-view="transactions"] .cash-outlook-head{
gap: 1px;
margin-bottom: 2px;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger{
border-radius: 9px;
border: 1px solid rgba(180, 140, 70, 0.14);
background: linear-gradient(
180deg,
#fdfbf8 0%,
#f8f6f2 100%
);
padding: 12px 13px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 1px 2px rgba(15, 23, 42, 0.04);
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger:has(.cash-outlook-card),
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger:has(.cash-outlook-card){
padding: 12px 13px 11px;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-card__headline,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-card__headline{
font-size: 12.25px;
font-weight: 600;
color: rgba(55, 48, 42, 0.88);
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-card__row,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-card__row{
gap: 12px;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-icon--warn,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-icon--warn{
color: #b8860b;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-icon svg,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-icon svg{
stroke-width: 2.15;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger strong,
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-hero,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger strong,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-danger .cash-outlook-hero{
font-weight: 600;
color: rgba(55, 48, 42, 0.88);
}
body[data-bw-view="calendar"] .calendar-low-balance--sidebar strong,
body[data-bw-view="transactions"] .calendar-low-balance--sidebar strong{
font-size: 12.5px;
font-weight: 650;
letter-spacing: -0.01em;
line-height: 1.22;
}
body[data-bw-view="calendar"] .calendar-low-balance--sidebar,
body[data-bw-view="transactions"] .calendar-low-balance--sidebar{
padding: 0;
gap: 0;
}
body[data-bw-view="calendar"] .calendar-low-balance--sidebar .cash-outlook-hero,
body[data-bw-view="transactions"] .calendar-low-balance--sidebar .cash-outlook-hero{
margin: 0 0 2px;
}
body[data-bw-view="calendar"] #sidebarPendingTxList.list,
body[data-bw-view="transactions"] #sidebarPendingTxList.list{
gap: 6px;
margin-top: 4px;
}
/* Month summary amounts (Income / Expense / Net) — calendar tx rows match this size. */
body[data-bw-view="calendar"]{
--month-summary-amount-font-size: 12px;
--cal-tx-font-size: calc(var(--month-summary-amount-font-size) * 0.97 * 0.97);
--cal-tx-in-color: rgba(5, 118, 84, 0.74);
--cal-tx-out-color: rgba(168, 62, 62, 0.72);
}
body[data-bw-view="calendar"] .sidebar .card[data-sidebar-key="month"],
body[data-bw-view="transactions"] .sidebar .card[data-sidebar-key="month"]{
padding: 9px 10px 8px;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 0 0 1px rgba(15, 23, 42, 0.042);
transition: box-shadow 0.16s ease, background 0.16s ease;
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total,
body[data-bw-view="transactions"] #sidebarBodyMonth .total{
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 4px 2px;
border-radius: 0;
border: none;
background: transparent;
box-shadow: none;
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total--income,
body[data-bw-view="calendar"] #sidebarBodyMonth .total--expense,
body[data-bw-view="transactions"] #sidebarBodyMonth .total--income,
body[data-bw-view="transactions"] #sidebarBodyMonth .total--expense{
border-bottom: 1px solid rgba(17, 24, 39, 0.07);
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total--net,
body[data-bw-view="transactions"] #sidebarBodyMonth .total--net{
margin-top: 2px;
padding: 6px 2px;
border: none;
border-radius: 8px;
background: rgba(236, 253, 245, 0.35);
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total .k,
body[data-bw-view="transactions"] #sidebarBodyMonth .total .k{
flex: 1;
min-width: 0;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.72);
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total .v,
body[data-bw-view="transactions"] #sidebarBodyMonth .total .v{
flex: 0 0 auto;
min-width: 7.25ch;
font-size: var(--month-summary-amount-font-size, 12px);
font-weight: 620;
margin-top: 0;
text-align: right;
letter-spacing: -0.012em;
font-variant-numeric: tabular-nums;
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total--income .v.ok,
body[data-bw-view="transactions"] #sidebarBodyMonth .total--income .v.ok{
color: color-mix(in srgb, var(--ok) 72%, #64748b);
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total--expense .v.danger,
body[data-bw-view="transactions"] #sidebarBodyMonth .total--expense .v.danger{
color: color-mix(in srgb, var(--danger) 68%, #78716c);
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total--net .v.danger,
body[data-bw-view="transactions"] #sidebarBodyMonth .total--net .v.danger{
color: color-mix(in srgb, var(--danger) 82%, #57534e);
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total--net:has(.v.danger),
body[data-bw-view="transactions"] #sidebarBodyMonth .total--net:has(.v.danger){
background: rgba(254, 242, 242, 0.4);
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total--net .v.ok,
body[data-bw-view="transactions"] #sidebarBodyMonth .total--net .v.ok{
color: color-mix(in srgb, var(--ok) 90%, #1e293b);
}
body[data-bw-view="calendar"] #sidebarBodyMonth .totals,
body[data-bw-view="transactions"] #sidebarBodyMonth .totals{
flex-direction: column;
flex-wrap: nowrap;
gap: 0;
padding-top: 0;
}
body[data-bw-view="calendar"] #sidebarBodyMonth > div:nth-child(2),
body[data-bw-view="transactions"] #sidebarBodyMonth > div:nth-child(2){
height: 3px !important;
}
body[data-bw-view="calendar"] #sidebarBodyMonth label,
body[data-bw-view="transactions"] #sidebarBodyMonth label{
font-size: 10px;
font-weight: 500;
color: rgba(71, 85, 105, 0.68);
margin-bottom: 3px;
}
body[data-bw-view="calendar"] #sidebarBodyMonth input[type="month"],
body[data-bw-view="transactions"] #sidebarBodyMonth input[type="month"]{
font-size: 11.5px;
padding: 3px 8px;
min-height: 28px;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.09);
background: rgba(255, 255, 255, 0.85);
box-shadow: none;
transition: border-color 0.14s ease, background 0.16s ease;
}
body[data-bw-view="calendar"] #sidebarBodyMonth input[type="month"]:hover,
body[data-bw-view="transactions"] #sidebarBodyMonth input[type="month"]:hover{
border-color: rgba(17, 24, 39, 0.13);
background: #fff;
}
body[data-bw-view="calendar"] #sidebarBodyMonth input[type="month"]:focus-visible,
body[data-bw-view="transactions"] #sidebarBodyMonth input[type="month"]:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: 1px;
border-color: rgba(11, 61, 46, 0.18);
}
body[data-bw-view="calendar"] .card.calendar-panel{
padding-left: 10px;
padding-right: 10px;
}
body[data-bw-view="calendar"] .calendar-panel{
--cal-gap: 3px;
min-height: calc(
44px
+ var(--cal-week-rows) * var(--cal-day-min-h)
+ (var(--cal-week-rows) - 1) * var(--cal-gap)
+ 4px
);
}
body[data-bw-view="calendar"] .calendar-sticky-header > .row{
gap: 4px;
align-items: center;
}
body[data-bw-view="calendar"] .calendar-nav-bar{
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 3px 8px;
border-radius: 12px;
border-color: rgba(17, 24, 39, 0.065);
background: rgba(252, 253, 252, 0.97);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}
body[data-bw-view="calendar"] .cal-month-year{
gap: 2px;
justify-self: center;
align-items: center;
}
body[data-bw-view="calendar"] .calendar-sticky-header > div:nth-of-type(2){
height: 3px !important;
min-height: 0 !important;
}
body[data-bw-view="calendar"] .cal-today-btn{
padding: 4px 9px;
margin-left: 0;
font-size: 11px;
gap: 4px;
border-radius: 9px;
align-self: center;
font-weight: 630;
border-color: rgba(17, 24, 39, 0.1);
background: rgba(255, 255, 255, 0.72);
color: rgba(51, 65, 85, 0.88);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body[data-bw-view="calendar"] .cal-today-btn:hover{
border-color: rgba(11, 61, 46, 0.19);
background: rgba(4, 120, 87, 0.06);
color: rgba(11, 61, 46, 0.92);
}
body[data-bw-view="calendar"] .cal-today-ic{
width: 13px;
height: 13px;
}
body[data-bw-view="calendar"] .cal-select-wrap{
height: 30px;
}
body[data-bw-view="calendar"] .cal-select-wrap select{
height: 30px;
font-size: 15px;
font-weight: 780;
line-height: 1;
letter-spacing: -0.02em;
color: rgba(11, 61, 46, 0.98);
padding: 2px 15px 2px 2px;
}
body[data-bw-view="calendar"] #calendarMonthNum{
min-width: 66px;
}
body[data-bw-view="calendar"] #calendarYear{
min-width: 52px;
}
body[data-bw-view="calendar"] .cal-select-caret{
right: 4px;
font-size: 14px;
opacity: 0.84;
}
body[data-bw-view="calendar"] .cal-arrow-btn{
width: 26px;
height: 26px;
color: rgba(11, 61, 46, 0.82);
border-color: rgba(11, 61, 46, 0.12);
background: rgba(11, 61, 46, 0.04);
}
body[data-bw-view="calendar"] .cal-arrow-btn:hover{
background: rgba(11, 61, 46, 0.065);
border-color: rgba(11, 61, 46, 0.16);
color: rgba(11, 61, 46, 0.94);
}
body[data-bw-view="calendar"] .cal-arrow-btn svg{
width: 14px;
height: 14px;
}
body[data-bw-view="calendar"] .cal-nav-arrows{
gap: 1px;
margin-left: 2px;
}
body[data-bw-view="calendar"] .cal-detail-btn{
padding: 4px 7px;
font-size: 10.5px;
font-weight: 600;
color: rgba(75, 85, 99, 0.72);
border-radius: 8px;
}
body[data-bw-view="calendar"] .cal-detail-toggle{
justify-self: end;
margin-right: 0;
border-color: rgba(17, 24, 39, 0.06);
background: rgba(15, 23, 42, 0.025);
}
body[data-bw-view="calendar"] .cal-detail-btn:hover{
background: rgba(15, 23, 42, 0.035);
color: rgba(31, 41, 55, 0.86);
}
body[data-bw-view="calendar"] .cal-detail-btn.is-active{
background: rgba(11, 61, 46, 0.07);
color: rgba(11, 61, 46, 0.82);
}
@media (max-width: 900px) and (min-width: 769px){
body[data-bw-view="calendar"] .calendar-nav-bar{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
gap: 6px 8px;
align-items: center;
}
body[data-bw-view="calendar"] .cal-today-btn{
grid-column: 1;
grid-row: 1;
justify-self: start;
}
body[data-bw-view="calendar"] .cal-detail-toggle{
grid-column: 2;
grid-row: 1;
justify-self: end;
width: auto;
}
body[data-bw-view="calendar"] .cal-month-year{
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
}
}
@media (max-width: 720px){
body[data-bw-view="calendar"] .app-layout,
body[data-bw-view="transactions"] .app-layout{
grid-template-columns: 1fr;
}
body[data-bw-view="calendar"] .sidebar,
body[data-bw-view="transactions"] .sidebar{
position: static;
max-height: none;
align-items: stretch;
}
body[data-bw-view="calendar"] .sidebar .card,
body[data-bw-view="transactions"] .sidebar .card,
body[data-bw-view="calendar"] #sidebarPendingTxCard.sidebar-pending--empty,
body[data-bw-view="transactions"] #sidebarPendingTxCard.sidebar-pending--empty{
text-align: center;
}
body[data-bw-view="calendar"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty,
body[data-bw-view="transactions"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty,
body[data-bw-view="calendar"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg,
body[data-bw-view="transactions"] #sidebarPendingTxCard.sidebar-pending--empty .sidebar-pending-empty-msg{
text-align: center;
}
body[data-bw-view="calendar"] .cash-outlook-head,
body[data-bw-view="transactions"] .cash-outlook-head{
align-items: center;
text-align: center;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion{
text-align: center;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion strong,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion strong{
justify-content: center;
}
body[data-bw-view="calendar"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion .cash-outlook-secondary,
body[data-bw-view="transactions"] #sidebarLowBalanceBanner.calendar-low-balance--sidebar.is-suggestion .cash-outlook-secondary{
text-align: center;
}
body[data-bw-view="calendar"] .sidebar-section-head,
body[data-bw-view="transactions"] .sidebar-section-head{
justify-content: center;
}
body[data-bw-view="calendar"] #sidebarBodyMonth .total,
body[data-bw-view="transactions"] #sidebarBodyMonth .total{
text-align: left;
}
}
/* Calendar view: forecast sidebar + cash insights — data-dense, low chrome */
body[data-bw-view="calendar"] .cash-insights-panel{
margin-top: 8px;
border-top: 1px solid rgba(17, 24, 39, 0.04);
padding-top: 8px;
}
body[data-bw-view="calendar"] .cash-insights__intro{
margin-bottom: 7px;
font-size: 0.72rem;
line-height: 1.38;
}
body[data-bw-view="calendar"] .cash-insights--sidebar .cash-insights__stack{
gap: 6px;
}
body[data-bw-view="calendar"] .cash-insights__card{
padding: 7px 8px 8px;
border: none;
border-radius: 0;
background: rgba(255, 255, 255, 0.5);
box-shadow: none;
border-left: 2px solid rgba(17, 24, 39, 0.07);
}
body[data-bw-view="calendar"] .cash-insights__card--positive{
border-left-color: rgba(4, 120, 87, 0.32);
background: rgba(236, 253, 245, 0.35);
}
body[data-bw-view="calendar"] .cash-insights__card--info{
border-left-color: rgba(14, 116, 144, 0.28);
background: rgba(240, 249, 255, 0.32);
}
body[data-bw-view="calendar"] .cash-insights__card--watch{
border-left-color: rgba(180, 83, 9, 0.26);
background: rgba(255, 251, 235, 0.38);
}
body[data-bw-view="calendar"] .cash-insights__card--urgent{
border-left-color: rgba(185, 28, 28, 0.22);
background: rgba(254, 242, 242, 0.32);
}
body[data-bw-view="calendar"] .cash-insights__title{
margin-top: 4px;
font-size: 0.84rem;
font-weight: 650;
}
body[data-bw-view="calendar"] .cash-insights__message{
margin-top: 5px;
font-size: 0.74rem;
line-height: 1.42;
}
body[data-bw-view="calendar"] .cash-insights__eyebrow{
font-size: 0.62rem;
font-weight: 650;
letter-spacing: 0.06em;
}
body[data-bw-view="transactions"] #sidebarBodyMonth .sidebar-forecast-hints{
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid rgba(17, 24, 39, 0.04);
}
body[data-bw-view="transactions"] .sidebar-forecast-hints .sidebar-fqh{
gap: 4px;
}
body[data-bw-view="transactions"] .sidebar-fqh__row{
gap: 8px;
font-size: 9.5px;
line-height: 1.3;
}
body[data-bw-view="transactions"] .sidebar-fqh__k{
color: rgba(100, 116, 139, 0.68);
}
body[data-bw-view="transactions"] .sidebar-fqh__v{
font-weight: 520;
}
body[data-bw-view="transactions"] .sidebar-fqh__row--bill .sidebar-fqh__k{
color: rgba(100, 116, 139, 0.66);
}
body[data-bw-view="transactions"] .sidebar-fqh__row--bill .sidebar-fqh__v{
font-weight: 520;
color: rgba(55, 65, 81, 0.78);
}
body[data-bw-view="transactions"] .sidebar-fqh__d{
font-size: 9.25px;
color: rgba(100, 116, 139, 0.58);
}
body[data-bw-view="transactions"] .sidebar-fqh__d--inline{
display: inline;
margin-top: 0;
margin-left: 6px;
}
.sidebar-forecast-hints .sidebar-fqh{
display: flex;
flex-direction: column;
gap: 5px;
}
.sidebar-fqh__row{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
font-size: 10.25px;
line-height: 1.35;
}
.sidebar-fqh__k{
flex: 0 0 auto;
color: rgba(100, 116, 139, 0.82);
font-weight: 600;
}
.sidebar-fqh__v{
text-align: right;
font-weight: 600;
color: rgba(17, 24, 39, 0.88);
font-variant-numeric: tabular-nums;
min-width: 0;
}
.sidebar-fqh__d{
display: block;
margin-top: 2px;
font-weight: 500;
color: rgba(75, 85, 99, 0.65);
font-size: 9.75px;
line-height: 1.3;
}
.sidebar .reports-left-nav__list{
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
}
.sidebar .reports-left-nav__eyebrow{
margin: 0 0 8px;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.72);
}
.sidebar .reports-left-nav__section{
display: flex;
flex-direction: column;
gap: 6px;
}
.sidebar .reports-left-nav__section-title{
font-size: 0.68rem;
font-weight: 650;
letter-spacing: 0.02em;
color: rgba(100, 116, 139, 0.78);
}
.sidebar .reports-left-nav__group{
display: flex;
flex-direction: column;
gap: 4px;
}
.sidebar .reports-left-nav__item{
appearance: none;
width: 100%;
text-align: left;
border: 1px solid transparent;
background: transparent;
color: var(--text);
font: inherit;
padding: 7px 9px 7px 18px;
border-radius: 10px;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 600;
color: rgba(55, 65, 75, 0.88);
position: relative;
}
.sidebar .reports-left-nav__item::before{
content: "";
position: absolute;
left: 8px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(148, 163, 184, 0.9);
transform: translateY(-50%);
}
.sidebar .reports-left-nav__item:hover{
background: rgba(11, 61, 46, 0.04);
}
.sidebar .reports-left-nav__item.is-active{
border-color: rgba(11, 61, 46, 0.12);
background: rgba(11, 61, 46, 0.06);
color: rgba(11, 61, 46, 0.95);
box-shadow: inset 2px 0 0 rgba(11, 61, 46, 0.85);
}
.sidebar .reports-left-nav__item.is-active::before{
background: rgba(11, 61, 46, 0.92);
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__list{
gap: 6px;
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__section{
gap: 2px;
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__section + .reports-left-nav__section{
margin-top: 11px;
padding-top: 1px;
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__group{
gap: 1px;
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__item{
padding: 2px 6px 2px 14px;
border-radius: 7px;
font-size: 0.68rem;
font-weight: 600;
line-height: 1.26;
color: rgba(75, 85, 99, 0.82);
border-width: 1px;
border-color: transparent;
border-style: solid;
white-space: normal;
overflow-wrap: anywhere;
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__item::before{
left: 6px;
width: 3px;
height: 3px;
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__section-title{
font-size: 0.625rem;
font-weight: 640;
letter-spacing: 0.02em;
color: rgba(100, 116, 139, 0.74);
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__item:hover{
background: rgba(15, 23, 42, 0.03);
border-color: rgba(15, 23, 42, 0.04);
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__item.is-active{
border-color: rgba(11, 61, 46, 0.11);
background: rgba(11, 61, 46, 0.045);
color: rgba(11, 61, 46, 0.92);
font-weight: 640;
box-shadow:
inset 2px 0 0 rgba(11, 61, 46, 0.48),
inset 0 0 0 1px rgba(11, 61, 46, 0.03);
}
body[data-bw-view="reports"] .sidebar .reports-left-nav__item.is-active::before{
background: rgba(11, 61, 46, 0.55);
}
body[data-bw-view="reports"] .app-footer{
margin-top: 4px;
}
#reportsViewPanel .reports-card:not(.reports-card--hero) .reports-card__title{
font-size: 1.02rem;
font-weight: 650;
letter-spacing: -0.015em;
color: rgba(17, 24, 39, 0.88);
}
#reportsViewPanel .reports-card:not(.reports-card--hero) .reports-card__desc{
font-size: 0.76rem;
color: rgba(100, 116, 139, 0.76);
}
/* Settings View should match Calendar's white surface. */
#settingsViewPanel .card{
background: var(--cal-surface);
}
.card h2{
margin:0 0 10px;
font-size: 14px;
color: var(--muted);
font-weight: 600;
letter-spacing: 0.3px;
text-transform: none;
}
/* Projected balance chart: title row + collapse, then controls in body */
.chart-card .chart-panel-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.chart-card.chart-panel--collapsed .chart-panel-head{
margin-bottom: 0;
}
.chart-card .chart-panel-head h2{
margin: 0;
flex: 1;
min-width: 0;
}
.chart-card .chart-panel-body{
display: flex;
flex-direction: column;
min-width: 0;
}
/* Clickable balance range + date-range popover */
.chart-range-anchor{
position: relative;
align-self: stretch;
margin-bottom: 8px;
}
.chart-range-header{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.chart-range-header__kicker{
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: none;
color: var(--muted);
margin-bottom: 2px;
}
.chart-range-display{
display: block;
width: 100%;
max-width: 100%;
margin: 0;
padding: 4px 0 2px;
text-align: left;
font: inherit;
font-size: 15px;
font-weight: 600;
color: var(--text);
background: transparent;
border: none;
border-bottom: 1px dashed rgba(0,0,0,0.22);
cursor: pointer;
border-radius: 2px;
}
.chart-range-display:hover{
color: var(--accent);
border-bottom-color: var(--accent);
}
.chart-range-display:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.chart-range-popover{
position: absolute;
z-index: 30;
top: calc(100% + 6px);
right: 0;
left: auto;
width: min(360px, calc(100vw - 28px));
padding: 14px 14px 12px;
border-radius: 12px;
background: var(--cal-surface);
border: 1px solid var(--border);
box-shadow:
0 4px 18px rgba(0,0,0,0.12),
0 12px 40px rgba(0,0,0,0.08);
}
.chart-range-popover::before{
content: "";
position: absolute;
top: -7px;
right: 18px;
width: 12px;
height: 12px;
background: var(--cal-surface);
border-left: 1px solid var(--border);
border-top: 1px solid var(--border);
transform: rotate(45deg);
}
.chart-range-popover__grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
margin-bottom: 10px;
}
.chart-range-preset{
padding: 8px 6px;
font-size: 11px;
font-weight: 600;
text-align: center;
color: var(--muted);
background: rgba(0,0,0,0.04);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 8px;
cursor: pointer;
}
.chart-range-preset:hover{
background: rgba(11, 61, 46, 0.08);
color: var(--text);
}
.chart-range-preset.is-active{
border-color: var(--accent);
color: var(--accent);
background: rgba(11, 61, 46, 0.1);
}
.chart-range-popover__custom-block{
margin-bottom: 8px;
}
.chart-range-custom-toggle{
padding: 7px 12px;
font-size: 12px;
font-weight: 600;
color: #fff;
background: var(--accent);
border: none;
border-radius: 8px;
cursor: pointer;
}
.chart-range-custom-toggle:hover{
filter: brightness(1.08);
}
.chart-range-custom-fields{
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
margin-top: 10px;
}
.chart-range-custom-field{
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: var(--muted);
}
.chart-range-custom-field input[type="date"]{
padding: 6px 8px;
font-size: 12px;
border-radius: 8px;
border: 1px solid var(--border);
}
.chart-range-popover__summary{
margin: 0 0 10px;
font-size: 13px;
color: var(--text);
text-align: center;
min-height: 1.35em;
}
.chart-range-popover__summary strong{
font-weight: 700;
}
.chart-range-popover__actions{
display: flex;
align-items: center;
gap: 14px;
}
.chart-range-apply-btn{
padding: 8px 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: none;
color: #fff;
background: var(--accent);
border: none;
border-radius: 8px;
cursor: pointer;
}
.chart-range-apply-btn:hover{
filter: brightness(1.08);
}
.chart-range-cancel-btn{
padding: 8px 4px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: none;
color: #1d4ed8;
background: transparent;
border: none;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.chart-range-cancel-btn:hover{
color: #1e40af;
}
@media (max-width: 420px){
.chart-range-popover__grid{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.chart-card.chart-panel--collapsed .chart-panel-body{
display: none;
}
.chart-card.chart-panel--collapsed{
flex: 0 0 auto !important;
}
.chart-panel-controls{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 8px 10px;
justify-content: flex-end;
width: 100%;
min-width: 0;
}
.chart-ctrl{
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.chart-panel-controls label{
font-size: 10px;
margin-bottom: 0;
letter-spacing: 0.02em;
}
.chart-panel-controls input[type="date"]{
width: auto;
min-width: 118px;
max-width: 152px;
padding: 5px 8px;
font-size: 12px;
border-radius: 8px;
}
.chart-zoom-row{
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.chart-panel-controls input[type="range"]{
width: min(110px, 26vw);
min-width: 72px;
padding: 0;
margin: 0;
vertical-align: middle;
}
.chart-days-meta{
font-size: 11px;
white-space: nowrap;
}
.chart-update-btn{
padding: 6px 10px;
font-size: 12px;
border-radius: 8px;
align-self: flex-end;
white-space: nowrap;
}
@media (max-width: 520px){
.chart-panel-controls{
justify-content: flex-start;
flex-basis: 100%;
}
.chart-update-btn{
align-self: center;
}
}
/* Google Finance–style range bar */
.chart-duration-bar{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
padding: 4px 6px;
margin-bottom: 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.03);
width: fit-content;
max-width: 100%;
}
.chart-duration-btn{
border: none;
background: transparent;
color: var(--muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 6px 10px;
border-radius: 999px;
cursor: pointer;
line-height: 1;
}
.chart-duration-btn:hover{
color: var(--text);
background: rgba(255,255,255,0.06);
}
.chart-duration-btn.is-active{
color: var(--text);
background: color-mix(in srgb, var(--accent) 18%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.projection-chart-wrap{
position: relative;
width: 100%;
height: 168px;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px;
background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 52%);
box-sizing: border-box;
padding: 4px 4px 2px;
}
.projection-chart-empty{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--muted);
padding: 12px;
text-align: center;
z-index: 1;
pointer-events: none;
}
/* Chart.js canvas fills the frame */
.projection-chart-canvas{
display: block;
width: 100% !important;
height: 100% !important;
}
label{
display:block;
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
/* Horizontal label | field (settings, tx add/edit modal, reconcile) */
.form-row-h{
display: flex;
flex-direction: row;
align-items: center;
gap: 12px 14px;
width: 100%;
min-width: 0;
}
.form-row-h__label{
flex: 0 0 8.75rem;
max-width: 34%;
min-width: 0;
}
.form-row-h__label label{
display: block;
margin-bottom: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--muted);
line-height: 1.3;
}
.form-row-h__field{
flex: 1 1 auto;
min-width: 0;
}
.password-field{
position: relative;
display: block;
width: 100%;
}
.password-field > input[type="password"],
.password-field > input[type="text"]{
width: 100%;
max-width: none;
box-sizing: border-box;
padding-right: 2.85rem;
}
.password-field__toggle{
position: absolute;
right: 6px;
top: 50%;
z-index: 2;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 0;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: rgba(100, 116, 139, 0.78);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.password-field__toggle:hover{
color: rgba(51, 65, 85, 0.92);
background: rgba(15, 23, 42, 0.05);
}
.password-field__toggle:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
outline-offset: 1px;
background: rgba(15, 23, 42, 0.06);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.password-field__icon{
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.password-field__toggle[aria-pressed="true"] .password-field__icon--show{
display: none;
}
.password-field__toggle:not([aria-pressed="true"]) .password-field__icon--hide{
display: none;
}
.form-row-h__field > input:not([type="checkbox"]):not([type="radio"]),
.form-row-h__field > select,
.form-row-h__field > .money-input,
.form-row-h__field > .kind-toggle,
.form-row-h__field > .password-field{
width: 100%;
max-width: none;
}
.form-row-h__field > .password-field > input:not([type="checkbox"]):not([type="radio"]){
width: 100%;
max-width: none;
}
.form-row-h__field > input[type="checkbox"]{
width: auto;
margin: 0;
vertical-align: middle;
}
/* Recurring edit: variable amount uses .tx-edit-variable-form-row in expected-edit panel. */
.form-row-h__field .pill{
width: 100%;
justify-content: flex-start;
}
/* Settings → Account Details: give the stacked rows a little breathing room */
.settings-pane[data-settings-pane="preferences"] .form-row-h{
padding: 6px 0;
}
.settings-pane[data-settings-pane="preferences"] .form-row-h + .form-row-h{
margin-top: 6px;
}
.settings-pane[data-settings-pane="billing"]{
max-width: min(100%, 900px);
}
.billing-page{
--billing-space-1: 12px;
--billing-space-2: 18px;
--billing-space-3: 24px;
--billing-content-max: 100%;
--billing-rule: 1px solid rgba(17, 24, 39, 0.055);
display: flex;
flex-direction: column;
gap: var(--billing-space-2);
padding-bottom: clamp(16px, 3vw, 28px);
}
.billing-page__head{
margin-bottom: 0;
padding-bottom: 0;
}
.billing-page__title{
font-size: clamp(1.2rem, 1.05rem + 0.35vw, 1.42rem);
font-weight: 800;
letter-spacing: -0.02em;
color: rgba(15, 23, 42, 0.97);
}
.billing-page__lede{
margin-top: 5px !important;
max-width: 42ch;
font-size: 0.84rem;
color: rgba(100, 116, 139, 0.7) !important;
line-height: 1.42;
}
.billing-page__shell{
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--billing-space-3);
align-items: start;
}
@media (min-width: 900px){
.billing-page__shell{
grid-template-columns: minmax(0, 1.28fr) minmax(0, 0.72fr);
gap: var(--billing-space-3) 28px;
}
.billing-side{
margin-left: 8ch;
}
}
.billing-primary{
min-width: 0;
max-width: var(--billing-content-max);
}
.billing-overview{
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
padding: var(--billing-space-2) var(--billing-space-2) var(--billing-space-3);
border-radius: 14px;
border: var(--billing-rule);
background: rgba(255, 255, 255, 0.92);
box-shadow: none;
}
.billing-side{
display: flex;
flex-direction: column;
gap: var(--billing-space-2);
min-width: 0;
padding: var(--billing-space-2) var(--billing-space-2) var(--billing-space-3);
border-radius: 14px;
border: var(--billing-rule);
background: rgba(255, 255, 255, 0.92);
box-shadow: none;
}
.billing-side__block{
margin: 0;
padding: 0;
border: none;
}
.billing-side__block + .billing-side__block::before{
content: "";
display: block;
height: 1px;
margin: 0 0 var(--billing-space-2);
background: rgba(17, 24, 39, 0.05);
}
.billing-side__title{
margin: 0 0 8px;
font-size: 0.7rem;
font-weight: 780;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.68);
}
.billing-side__subtitle{
margin: 0 0 8px;
font-size: 0.7rem;
font-weight: 780;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.68);
}
.billing-side__support-copy{
margin: 0 0 10px;
font-size: 0.8rem;
line-height: 1.44;
color: rgba(100, 116, 139, 0.72);
}
.billing-side__support-cta{
margin: 0;
}
.billing-side__support-link{
font-size: 0.86rem;
font-weight: 650;
color: rgba(11, 61, 46, 0.92);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 28%, transparent);
text-underline-offset: 3px;
}
.billing-side__support-link:hover{
color: rgba(11, 61, 46, 1);
text-decoration-color: color-mix(in srgb, var(--accent) 48%, transparent);
}
.billing-hero{
padding: 0;
max-width: 52ch;
}
.billing-hero__eyebrow{
font-size: 0.62rem;
font-weight: 760;
letter-spacing: 0.11em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.55);
}
.billing-hero__title{
margin-top: 5px;
font-size: clamp(1.28rem, 1.1rem + 0.4vw, 1.44rem);
font-weight: 820;
line-height: 1.1;
letter-spacing: -0.028em;
color: rgba(15, 23, 42, 0.98);
}
.billing-hero__copy{
margin: 8px 0 0;
max-width: 44ch;
font-size: 0.82rem;
line-height: 1.44;
font-weight: 450;
color: rgba(100, 116, 139, 0.72);
}
.billing-hero__renewal{
display: inline-flex;
align-items: center;
gap: 7px;
width: fit-content;
max-width: 100%;
margin: 14px 0 0;
padding: 6px 13px;
border-radius: 999px;
border: 1px solid rgba(34, 197, 94, 0.14);
background: rgba(236, 253, 245, 0.65);
font-size: 0.77rem;
font-weight: 620;
line-height: 1.36;
color: rgba(21, 65, 48, 0.8);
}
.billing-hero__renewal--trial{
margin-top: 16px;
margin-bottom: 0;
padding: 7px 14px;
border-color: rgba(22, 163, 74, 0.22);
background: rgba(220, 252, 231, 0.82);
font-weight: 650;
color: rgba(20, 83, 45, 0.88);
}
.billing-hero__renewal::before{
content: "✓";
font-size: 0.78em;
color: rgba(22, 101, 52, 0.72);
font-weight: 700;
}
/* Plan details grid — equal rhythm, softer dividers */
.billing-meta{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin: var(--billing-space-2) 0 0;
padding: var(--billing-space-2) 0 0;
border-top: var(--billing-rule);
}
@media (min-width: 760px){
.billing-meta{
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.billing-meta__pair{
margin: 0;
padding: 11px 12px 10px;
min-width: 0;
}
@media (min-width: 760px){
.billing-meta__pair{
padding: 12px 14px 11px;
}
.billing-meta__pair + .billing-meta__pair{
border-left: 1px solid rgba(17, 24, 39, 0.05);
}
}
@media (max-width: 759px){
.billing-meta__pair:nth-child(-n + 2){
border-bottom: 1px solid rgba(17, 24, 39, 0.045);
}
.billing-meta__pair:nth-child(odd):not(:last-child){
border-right: 1px solid rgba(17, 24, 39, 0.045);
}
}
.billing-meta__term{
margin: 0;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.48);
}
.billing-meta__def{
margin: 6px 0 0;
font-size: 0.96rem;
font-weight: 720;
line-height: 1.28;
letter-spacing: -0.012em;
color: rgba(15, 23, 42, 0.93);
min-height: 1.3em;
}
.billing-meta__def .billing-status-pill{
margin-top: 2px;
}
.billing-status-pill{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 650;
letter-spacing: 0.02em;
}
.billing-status-pill--active{
color: rgba(21, 99, 55, 0.92);
background: rgba(240, 253, 244, 0.95);
border: 1px solid rgba(34, 197, 94, 0.22);
}
.billing-status-pill__icon{
font-size: 0.82em;
}
.billing-actions{
margin-top: 0;
padding-top: var(--billing-space-2);
border-top: var(--billing-rule);
max-width: 52ch;
}
.billing-actions__title{
margin: 0 0 4px;
font-size: 0.9rem;
font-weight: 800;
letter-spacing: -0.02em;
color: rgba(15, 23, 42, 0.95);
}
.billing-actions__hint{
margin: 0 0 var(--billing-space-2);
max-width: 42ch;
font-size: 0.78rem;
line-height: 1.4;
color: rgba(100, 116, 139, 0.66);
}
.billing-actions__primary{
margin-bottom: var(--billing-space-1);
}
.billing-actions__secondary{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: var(--billing-space-1);
}
.billing-actions__secondary--inline{
flex-wrap: nowrap;
gap: 6px;
align-items: baseline;
}
@media (max-width: 420px){
.billing-actions__secondary--inline{
flex-wrap: wrap;
}
}
.billing-actions__sep{
color: rgba(148, 163, 184, 0.9);
font-weight: 600;
flex-shrink: 0;
}
.billing-action-btn{
appearance: none;
border: 1px solid rgba(11, 61, 46, 0.14);
border-radius: 10px;
background: rgba(11, 61, 46, 0.04);
color: rgba(11, 61, 46, 0.9);
padding: 10px 18px;
font-size: 0.86rem;
font-weight: 650;
line-height: 1.15;
transition: background-color 0.14s ease, border-color 0.14s ease;
}
.billing-action-btn--primary{
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 17.5rem;
border-color: rgba(11, 61, 46, 0.92);
background: color-mix(in srgb, var(--accent) 92%, #0a1a14 8%);
color: rgba(255, 255, 255, 0.98);
box-shadow: 0 1px 2px rgba(11, 61, 46, 0.1);
padding: 11px 20px;
font-size: 0.875rem;
font-weight: 700;
}
.billing-action-btn--primary:hover{
background: color-mix(in srgb, var(--accent) 96%, #000 4%);
border-color: rgba(11, 61, 46, 0.98);
}
.billing-action-link{
appearance: none;
padding: 0;
border: 0;
background: transparent;
font-family: inherit;
font-size: 0.77rem;
font-weight: 540;
line-height: 1.35;
color: rgba(71, 85, 105, 0.72);
cursor: pointer;
text-decoration: underline;
text-decoration-color: rgba(148, 163, 184, 0.45);
text-underline-offset: 3px;
}
.billing-action-link:hover{
color: rgba(11, 61, 46, 0.88);
text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.billing-reassurance-list{
list-style: none;
margin: 0 0 var(--billing-space-2);
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 5px 14px;
}
.billing-reassurance-list li{
position: relative;
padding-left: 13px;
font-size: 0.72rem;
line-height: 1.36;
color: rgba(100, 116, 139, 0.62);
}
.billing-reassurance-list li::before{
content: "✓";
position: absolute;
left: 0;
top: 0;
color: rgba(22, 101, 52, 0.65);
font-weight: 800;
font-size: 0.72em;
}
.billing-cancel{
margin-top: 0;
padding: var(--billing-space-2) 0 0;
border-top: 1px solid rgba(17, 24, 39, 0.04);
max-width: 42ch;
}
.billing-cancel__title{
margin: 0 0 3px;
font-size: 0.68rem;
font-weight: 720;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.58);
}
.billing-cancel__lede{
margin: 0 0 7px;
max-width: 40ch;
font-size: 0.76rem;
line-height: 1.4;
color: rgba(100, 116, 139, 0.62);
}
.billing-cancel__request{
appearance: none;
margin: 0;
padding: 0;
border: none;
background: none;
font: inherit;
font-size: 0.77rem;
font-weight: 560;
line-height: 1.35;
color: rgba(185, 75, 85, 0.78);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(200, 100, 110, 0.28);
cursor: pointer;
}
.billing-cancel__request:hover{
color: rgba(150, 50, 60, 0.9);
text-decoration-color: rgba(180, 80, 90, 0.4);
}
/* Legacy footer copy (removed from markup; harmless if reused) */
.billing-section__note,
.billing-section__support{
margin: 12px 0 0;
font-size: 0.74rem;
line-height: 1.45;
color: rgba(100, 116, 139, 0.78);
}
.billing-section__support .settings-text-btn{
display: inline;
font-weight: 600;
}
.billing-feature-list,
.billing-note-list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.billing-feature-list li,
.billing-note-list li{
position: relative;
padding-left: 16px;
font-size: 0.79rem;
line-height: 1.4;
color: rgba(30, 41, 59, 0.82);
}
.billing-feature-list li::before{
content: "✓";
position: absolute;
left: 0;
top: 1px;
color: rgba(22, 101, 52, 0.72);
font-weight: 800;
font-size: 0.75em;
}
.billing-note-list li::before{
content: "•";
position: absolute;
left: 2px;
top: 1px;
color: rgba(148, 163, 184, 0.8);
font-weight: 700;
}
.billing-note-list li{
font-size: 0.77rem;
color: rgba(100, 116, 139, 0.7);
}
/* Optional blocks when payment method / invoice history are added to markup */
.billing-section{
margin: 0;
padding: var(--billing-space-2) 0 0;
border-top: var(--billing-rule);
max-width: 52ch;
}
.billing-section__title{
margin: 0 0 4px;
font-size: 0.9rem;
font-weight: 800;
letter-spacing: -0.02em;
color: rgba(15, 23, 42, 0.95);
}
.billing-section__hint{
margin: 0 0 var(--billing-space-2);
max-width: 42ch;
font-size: 0.78rem;
line-height: 1.4;
color: rgba(100, 116, 139, 0.66);
}
.billing-payment__row{
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px 14px;
padding: 11px 0;
}
.billing-payment__brand{
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.35rem;
height: 1.55rem;
border-radius: 6px;
border: 1px solid rgba(17, 24, 39, 0.07);
background: rgba(248, 250, 252, 0.9);
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.7);
}
.billing-payment__details{
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 12px;
font-size: 0.84rem;
font-weight: 650;
letter-spacing: -0.01em;
color: rgba(15, 23, 42, 0.92);
}
.billing-payment__meta{
font-size: 0.76rem;
font-weight: 520;
color: rgba(100, 116, 139, 0.62);
}
.billing-payment__edit{
appearance: none;
padding: 0;
border: 0;
background: transparent;
font: inherit;
font-size: 0.77rem;
font-weight: 560;
color: rgba(11, 61, 46, 0.72);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--accent) 24%, transparent);
cursor: pointer;
}
.billing-payment__edit:hover{
color: rgba(11, 61, 46, 0.92);
}
.billing-history{
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
.billing-history__row{
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) auto;
align-items: center;
gap: 10px 16px;
padding: 10px 0;
border-bottom: 1px solid rgba(17, 24, 39, 0.045);
font-size: 0.8rem;
line-height: 1.35;
color: rgba(30, 41, 59, 0.84);
}
.billing-history__row:last-child{
border-bottom: 0;
padding-bottom: 0;
}
.billing-history__row:first-child{
padding-top: 2px;
}
.billing-history__label{
font-weight: 640;
color: rgba(15, 23, 42, 0.9);
}
.billing-history__meta{
color: rgba(100, 116, 139, 0.62);
font-size: 0.76rem;
}
.billing-history__amount{
justify-self: end;
font-variant-numeric: tabular-nums;
font-weight: 650;
color: rgba(15, 23, 42, 0.88);
}
/* Stand-alone “good to know” variant (embedded in sidebar blocks now) */
.billing-good-to-know{
margin-top: 0;
padding: 0;
border: none;
background: transparent;
}
.billing-good-to-know__title{
margin: 0 0 12px;
font-size: 0.76rem;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.8);
}
/* Legacy class names kept for any older markup paths */
.billing-section__title,
.billing-section__copy,
.billing-panel__copy{
margin: 0;
}
.billing-side__section + .billing-side__section{
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(17, 24, 39, 0.05);
}
/* Settings hub: section chrome + compact accounts */
.settings-content--hub.card{
border: 1px solid rgba(17, 24, 39, 0.07);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.035);
background: var(--cal-surface);
border-radius: 12px;
padding: 16px 18px 18px;
}
.settings-section-head{
margin: 0 0 12px;
}
.settings-section-title{
margin: 0;
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.02em;
color: rgba(17, 24, 39, 0.92);
}
.settings-section-lede{
margin: 4px 0 0;
font-size: 0.8125rem;
line-height: 1.45;
color: rgba(75, 85, 99, 0.78);
max-width: 52ch;
}
.settings-section-body{
margin-top: 2px;
}
.settings-actions-row{
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.balance-threshold-box--panel{
margin-top: 0;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.55);
}
.balance-threshold-box--panel.balance-threshold-box--compact{
padding: 10px 12px 12px;
}
/* Used when the threshold box sits inside a Settings subsection that already
provides the surrounding card; we drop the redundant border/background. */
.balance-threshold-box--panel.balance-threshold-box--flush{
border: 0;
background: transparent;
padding: 0;
margin: 0;
}
.settings-pane[data-settings-pane="preferences"] .settings-subhead--thresholds{
margin: 0 0 8px;
font-size: 0.8125rem;
font-weight: 650;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(75, 85, 99, 0.62);
}
.settings-pane[data-settings-pane="preferences"] .balance-threshold-lede{
margin: 0 0 8px;
font-size: 0.72rem;
line-height: 1.35;
color: rgba(100, 116, 139, 0.82);
max-width: 40ch;
}
.balance-threshold-fields{
display: flex;
flex-direction: column;
gap: 2px;
}
.balance-threshold-intro{
margin: 0 0 12px;
max-width: 46rem;
}
.settings-callout--muted{
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(0, 0, 0, 0.02);
}
.settings-text-btn{
margin: 0;
padding: 0;
border: none;
background: none;
font: inherit;
font-weight: 650;
color: color-mix(in srgb, var(--accent) 88%, #000);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.settings-text-btn:hover{
color: var(--accent);
}
.settings-select-muted{
opacity: 0.85;
}
.settings-pref-note{
margin-top: 12px;
}
#settingsAccountsPane .settings-account-list{
margin-top: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
#settingsAccountsPane .settings-account-list .item.settings-account-row{
display: block;
padding: 8px 10px;
border-radius: 9px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.75);
}
#settingsAccountsPane .settings-account-row__top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#settingsAccountsPane .settings-account-row__name{
font-size: 14px;
font-weight: 600;
color: rgba(17, 24, 39, 0.92);
min-width: 0;
}
#settingsAccountsPane .settings-account-row__detail{
margin-top: 3px;
font-size: 11.5px;
line-height: 1.35;
color: rgba(100, 116, 139, 0.88);
}
#settingsAccountsPane .settings-account-edit-btn{
appearance: none;
font: inherit;
font-size: 12px;
font-weight: 600;
padding: 4px 8px;
border-radius: 7px;
border: 1px solid rgba(17, 24, 39, 0.08);
background: rgba(255, 255, 255, 0.9);
color: rgba(75, 85, 99, 0.92);
cursor: pointer;
flex-shrink: 0;
}
#settingsAccountsPane .settings-account-edit-btn:hover{
color: rgba(11, 61, 46, 0.95);
border-color: rgba(11, 61, 46, 0.18);
background: rgba(11, 61, 46, 0.05);
}
.settings-add-account-btn{
padding: 6px 12px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
}
body[data-bw-view="settings"] #sidebarBalanceThresholdAlerts{
display: none !important;
}
body[data-bw-view="settings"] .app-layout{
grid-template-columns: clamp(112px, 10.5vw, 152px) minmax(0, 1fr);
gap: 12px 24px;
}
body[data-bw-view="settings"] .sidebar{
gap: 6px;
background: transparent;
padding-right: 4px;
}
body[data-bw-view="settings"] .sidebar .card.sidebar-section[data-sidebar-key="month"]{
display: none !important;
}
body[data-bw-view="settings"] #settingsViewPanel{
padding-top: 4px;
max-width: min(1180px, 100%);
width: 100%;
}
body[data-bw-view="settings"] .settings-content--hub.card{
padding: 16px clamp(14px, 2.2vw, 28px) 24px;
background: linear-gradient(180deg, rgba(245, 247, 250, 0.72) 0%, rgba(238, 242, 247, 0.48) 48%, rgba(248, 250, 252, 0.32) 100%);
border: 1px solid rgba(148, 163, 184, 0.16);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035), 0 8px 24px rgba(15, 23, 42, 0.04);
border-radius: 14px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-group{
border-color: rgba(11, 61, 46, 0.11);
box-shadow: var(--cats-card-shadow);
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .categories-manager__shell{
max-width: min(1120px, 100%);
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 0 clamp(8px, 1.8vw, 24px) 4px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__head,
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .categories-manager__head{
gap: 1px;
margin-bottom: 3px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__helper,
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .categories-manager .settings-section-lede.cats-pane__helper{
max-width: 36rem;
line-height: 1.36;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__intro{
max-width: 36rem;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__intro p{
margin: 0;
font-size: 0.76rem;
line-height: 1.38;
color: rgba(75, 85, 99, 0.78);
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__intro p + p{
margin-top: 2px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__scan-tips{
margin: 5px 0 7px;
font-size: 0.7rem;
line-height: 1.35;
color: rgba(100, 116, 139, 0.58);
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-group:not(:hover):not(:focus-within) .cats-group__add-trigger{
opacity: 0.62;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-group__add-trigger{
color: rgba(11, 61, 46, 0.82);
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-group__add-trigger:hover{
background: rgba(11, 61, 46, 0.07);
color: rgba(8, 48, 35, 0.96);
opacity: 1;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-group__add-plus{
color: rgba(11, 61, 46, 0.9);
font-weight: 750;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .categories-manager__summary{
gap: 5px;
margin: 0 0 4px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .categories-stat-card{
padding: 3px 9px 3px 8px;
gap: 6px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .categories-stat-card__label{
font-size: 9px;
font-weight: 680;
letter-spacing: 0.05em;
color: rgba(71, 85, 105, 0.7);
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .categories-stat-card__value{
font-size: 13px;
font-weight: 720;
color: rgba(15, 23, 42, 0.88);
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__toolbar{
margin-bottom: 5px;
gap: 5px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane{
--cats-row-pad-y: 2px;
--cats-row-pad-x: 8px;
--cats-row-min-h: 36px;
--cats-head-min-h: 40px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-cat{
min-height: var(--cats-row-min-h);
max-height: 40px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-group__head{
min-height: var(--cats-head-min-h);
padding: 5px 10px 4px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-tree{
gap: 6px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__scan-tips{
color: rgba(100, 116, 139, 0.48);
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__intro p{
color: rgba(100, 116, 139, 0.52);
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-group__add-row{
padding: 2px 8px 3px;
min-height: 32px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-group__add-trigger{
padding: 2px 4px;
font-size: 11.5px;
}
body[data-bw-view="settings"] .settings-section-head{
margin: 0 0 6px;
}
body[data-bw-view="settings"] .settings-section-title{
font-size: 1.06rem;
font-weight: 700;
}
body[data-bw-view="settings"] .billing-page__head .settings-section-title{
font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.48rem);
font-weight: 780;
letter-spacing: -0.025em;
color: rgba(15, 23, 42, 0.96);
}
body[data-bw-view="settings"] .settings-section-lede{
margin-top: 2px;
font-size: 0.76rem;
line-height: 1.35;
max-width: 48ch;
}
body[data-bw-view="settings"] .billing-page__head .settings-section-lede{
margin-top: 5px;
font-size: 0.84rem;
line-height: 1.42;
max-width: 42ch;
color: rgba(100, 116, 139, 0.68);
}
body[data-bw-view="settings"] .settings-nav--flat .settings-nav-item:not(.is-active){
color: rgba(55, 65, 81, 0.8);
}
body[data-bw-view="settings"] .settings-section-body{
margin-top: 8px;
}
body[data-bw-view="settings"] .settings-actions-row{
margin-top: 8px;
}
/* Threshold input styling now lives inside Forecast Preferences (.prefs-card)
instead of a forecastSetup pane; keep these selectors intentionally empty
so legacy callers don't suddenly get a different layout. */
.settings-nav.settings-nav--rail{
padding: 6px;
gap: 3px;
border: 1px solid rgba(17, 24, 39, 0.05);
border-radius: 10px;
background: rgba(255, 255, 255, 0.52);
box-shadow: none;
}
.settings-nav--rail .settings-nav-item{
font-weight: 580;
font-size: 11px;
padding: 7px 9px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
box-shadow: none;
}
.settings-nav--rail .settings-nav-item:hover{
background: rgba(0, 0, 0, 0.025);
}
.settings-nav--rail .settings-nav-item.is-active{
background: rgba(11, 61, 46, 0.065);
border-color: rgba(11, 61, 46, 0.09);
box-shadow: none;
}
body[data-bw-view="settings"] .settings-nav.settings-nav--rail{
padding: 8px 6px;
gap: 4px;
}
body[data-bw-view="settings"] .settings-nav--rail .settings-nav-item{
padding: 10px 12px 10px 15px;
font-size: 12.5px;
font-weight: 590;
color: rgba(71, 85, 105, 0.88);
border-radius: 9px;
position: relative;
transition: background-color 140ms ease, color 140ms ease;
}
body[data-bw-view="settings"] .settings-nav--rail .settings-nav-item:hover{
background: color-mix(in srgb, var(--accent) 8%, rgba(255, 255, 255, 0.85));
color: rgba(15, 23, 42, 0.94);
}
body[data-bw-view="settings"] .settings-nav--rail .settings-nav-item.is-active{
font-weight: 720;
color: rgba(15, 23, 42, 0.96);
background: color-mix(in srgb, var(--accent) 12%, #fff);
border-color: transparent;
box-shadow: inset 0 0 0 1px rgba(11, 61, 46, 0.1);
}
body[data-bw-view="settings"] .settings-nav--rail .settings-nav-item.is-active::before{
content: "";
position: absolute;
left: 5px;
top: 20%;
bottom: 20%;
width: 3px;
border-radius: 3px;
background: color-mix(in srgb, var(--accent) 78%, #1e3a2f);
}
.settings-nav--rail .settings-nav-item__chev{
opacity: 0.32;
border: none;
background: transparent;
width: auto;
height: auto;
font-size: 9px;
}
/* Flat rail variant: consolidated nav (no chevrons, no boxed active state).
The selected item is signaled by a soft left rule + slightly darker text,
so the rail reads as part of the page rather than a tray of buttons. */
.settings-nav.settings-nav--flat{
border: 0;
background: transparent;
padding: 0;
gap: 0;
}
.settings-nav--flat .settings-nav-item{
position: relative;
border: 0;
background: transparent;
border-radius: 0;
padding: 7px 10px 7px 14px;
margin: 0;
box-shadow: none;
font-size: 11.5px;
font-weight: 500;
letter-spacing: 0.1px;
color: rgba(55, 65, 75, 0.74);
justify-content: flex-start;
}
.settings-nav--flat .settings-nav-item:hover{
background: rgba(11, 61, 46, 0.035);
color: rgba(31, 41, 55, 0.92);
}
.settings-nav--flat .settings-nav-item.is-active{
background: transparent;
color: rgba(11, 61, 46, 0.96);
font-weight: 700;
box-shadow: none;
border-color: transparent;
}
.settings-nav--flat .settings-nav-item.is-active::before{
content: "";
position: absolute;
left: 4px;
top: 6px;
bottom: 6px;
width: 2px;
border-radius: 2px;
background: color-mix(in srgb, var(--accent) 78%, transparent);
}
.settings-nav--flat .settings-nav-item__chev{
display: none;
}
body[data-bw-view="settings"] .settings-nav.settings-nav--flat{
padding: 2px 0;
gap: 0;
}
body[data-bw-view="settings"] .settings-nav--flat .settings-nav-item{
padding: 5px 8px 5px 13px;
font-size: 11px;
}
body[data-bw-view="settings"] .settings-nav--flat .settings-nav-item.is-active{
background: rgba(255, 255, 255, 0.55);
color: rgba(15, 23, 42, 0.94);
font-weight: 650;
box-shadow: none;
}
body[data-bw-view="settings"] .settings-nav--flat .settings-nav-item.is-active::before{
top: 5px;
bottom: 5px;
left: 2px;
width: 2px;
background: color-mix(in srgb, var(--accent) 55%, transparent);
}
body[data-bw-view="settings"] .settings-nav--rail .settings-nav-item.is-active{
font-weight: 650;
background: rgba(255, 255, 255, 0.55);
box-shadow: none;
}
body[data-bw-view="settings"] .settings-nav--rail .settings-nav-item.is-active::before{
width: 2px;
left: 3px;
background: color-mix(in srgb, var(--accent) 55%, transparent);
}
.tx-edit-top .form-row-h__label label{
color: rgba(255, 255, 255, 0.92);
}
input, select{
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--input-border);
background: rgba(0,0,0,0.02);
color: var(--text);
}
input::placeholder,
textarea::placeholder{
color: #b4bcc8;
opacity: 1;
}
.money-input{
display: flex;
align-items: center;
border-radius: 10px;
border: 1px solid var(--input-border);
background: rgba(0,0,0,0.02);
overflow: hidden;
}
.money-input__prefix{
padding: 10px 10px 10px 12px;
color: var(--muted);
font-weight: 400;
font-size: 13px;
}
.money-input input{
border: none;
background: transparent;
border-radius: 0;
padding-left: 0;
font-size: 14px;
padding-top: 9px;
padding-bottom: 9px;
}
.money-input input:focus{
outline: none;
}
/* Segmented toggle: Expense | Income (inside .kind-toggle only) */
.kind-toggle{
display: flex;
flex-wrap: nowrap;
width: 100%;
max-width: 360px;
padding: 0;
gap: 0;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.035);
overflow: hidden;
}
.kind-toggle .kind-opt{
position: relative;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 0;
padding: 10px 12px;
min-height: 40px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
cursor: pointer;
user-select: none;
background: transparent;
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.kind-toggle .kind-opt + .kind-opt{
border-left: 1px solid var(--border);
}
.kind-toggle .kind-opt::after{
display: none;
}
.kind-toggle .kind-opt input[type="radio"]{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.kind-toggle .kind-opt:hover{
background: rgba(0, 0, 0, 0.045);
}
.kind-toggle .kind-opt:has(input[value="expense"]:checked){
background: color-mix(in srgb, #dc2626 22%, #fff);
color: #991b1b;
font-weight: 600;
box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.2);
}
.kind-toggle .kind-opt:has(input[value="expense"]:checked):hover{
background: color-mix(in srgb, #dc2626 28%, #fff);
color: #7f1d1d;
}
.kind-toggle .kind-opt:has(input[value="income"]:checked){
background: color-mix(in srgb, var(--accent) 24%, #fff);
color: color-mix(in srgb, var(--accent) 82%, #0a1f18);
font-weight: 600;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}
.kind-toggle .kind-opt:has(input[value="income"]:checked):hover{
background: color-mix(in srgb, var(--accent) 30%, #fff);
color: color-mix(in srgb, var(--accent) 88%, #000);
}
.kind-toggle .kind-opt:has(input:focus-visible){
outline: 2px solid var(--accent);
outline-offset: -2px;
z-index: 1;
}
/* kind-opt used outside .kind-toggle (category report mode radios) */
.category-report-mode .kind-opt{
position: static;
flex: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0;
min-height: unset;
font-weight: 400;
font-size: 13px;
color: var(--text);
justify-content: flex-start;
}
.category-report-mode .kind-opt + .kind-opt{
border-left: none;
}
.category-report-mode .kind-opt input[type="radio"]{
position: static;
inset: auto;
width: auto;
height: auto;
opacity: 1;
cursor: pointer;
accent-color: var(--accent);
}
.row-desc-notes{
display: flex;
flex-wrap: nowrap;
gap: 12px;
align-items: flex-end;
min-width: 0;
}
.row-desc-notes .field-desc-short{
flex: 0 0 12ch;
width: 12ch;
max-width: 12ch;
min-width: 0;
}
.row-desc-notes .field-notes-flex{
flex: 1 1 0;
min-width: 0;
}
.row-desc-notes label{
display: block;
margin-bottom: 4px;
font-size: 13px;
color: var(--muted);
}
.input-desc-short,
.input-notes-flex{
width: 100%;
}
.input-notes-readonly{
opacity: 0.88;
cursor: default;
}
.tx-desc-link{
text-decoration: none;
cursor: pointer;
}
.tx-desc-link.tx-kind-fg--income{ color: var(--ok); }
.tx-desc-link.tx-kind-fg--expense{ color: var(--danger); }
.tx-desc-link:hover{
text-decoration: underline;
}
.item .desc.tx-kind-fg--income{ color: var(--ok); }
.item .desc.tx-kind-fg--expense{ color: var(--danger); }
.cat-pill.tx-kind-fg--income{ color: var(--ok); }
.cat-pill.tx-kind-fg--expense{ color: var(--danger); }
.cal-tx-label.tx-kind-fg--income{ color: var(--text); }
.cal-tx-label.tx-kind-fg--expense{ color: var(--text); }
.reimbursable-field{
display: flex;
flex-direction: column;
gap: 3px;
align-items: flex-start;
cursor: pointer;
user-select: none;
}
.reimbursable-field__lead{
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.75em;
max-width: 100%;
flex-wrap: wrap;
}
.reimbursable-field__label{
/* Match other form field labels */
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--muted);
line-height: 1.3;
}
.reimbursable-field__hint{
font-size: 10px;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
color: var(--muted);
opacity: 0.72;
line-height: 1.25;
width: 100%;
max-width: 100%;
}
.reimbursable-field input[type="checkbox"]{
width: auto;
margin: 0;
flex-shrink: 0;
accent-color: var(--accent);
}
.row{
display:grid;
grid-template-columns: 1fr;
gap:10px;
}
@media (min-width: 520px){
.row.two{ grid-template-columns: 1fr 1fr; }
.row.three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row.four{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Upcoming transactions filters: allow selects to shrink so all 3 fields stay on one line */
#transactionViewPanel .row.three > div,
#reportsViewPanel .row.three > div{
min-width: 0;
}
#transactionViewPanel .row.four > div{
min-width: 0;
}
#transactionViewPanel .row.three select,
#transactionViewPanel .row.three input[type="date"],
#reportsViewPanel .row.three select,
#reportsViewPanel .row.three input[type="date"]{
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
#transactionViewPanel .row.four select,
#transactionViewPanel .row.four input[type="date"]{
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
/* Add recurring: start + recurrence + last txn on one row in narrow sidebar */
.row.row-recurring-head{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
align-items: end;
}
.row.row-recurring-head > div{
min-width: 0;
}
.row.row-recurring-head label{
font-size: 12px;
margin-bottom: 4px;
display: block;
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.row.row-recurring-head input[type="date"],
.row.row-recurring-head select{
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
font-size: 13px;
padding: 8px 6px;
}
.btn-center-row{
display:flex;
justify-content:center;
}
.categories-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.categories-grid .cat-chip{
border: 1px solid var(--border);
background: rgba(255,255,255,0.02);
padding: 8px 10px;
border-radius: 12px;
font-size: 13px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.categories-actions{
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
align-items: flex-end;
}
.categories-new-field{
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 auto;
min-width: 140px;
}
.categories-new-field label{
display: block;
margin-bottom: 4px;
font-size: 13px;
color: var(--muted);
}
.expected-second-day-row{
margin-top: 4px;
display: grid;
grid-template-columns: minmax(5.5rem, 6.75rem) minmax(0, 1fr);
gap: 2px 8px;
align-items: start;
}
.modal--expected-edit .expected-second-day-row{
grid-template-columns: minmax(4.75rem, 5.5rem) minmax(0, 1fr);
gap: 1px 8px;
}
.expected-second-day-row label{
display: block;
margin-bottom: 0;
padding-top: 7px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
color: rgba(100, 116, 139, 0.68);
line-height: 1.26;
}
.expected-second-day-row input[type="date"]{
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 8px 10px;
font-size: 14px;
font-weight: 500;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 8px;
background: var(--panel, #fff);
color: var(--text);
}
.expected-second-day-row input[type="date"]:focus{
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.expected-second-day-row > p,
.expected-second-day-row__hint{
grid-column: 2;
margin: 0;
max-width: 22rem;
font-size: 9.5px;
line-height: 1.28;
font-weight: 400;
color: rgba(100, 116, 139, 0.52);
}
.modal--expected-edit .expected-second-day-row__hint{
max-width: 18rem;
}
.totals{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.totals.totals--compact{
display: block;
}
.totals-compact{
display: flex;
flex-direction: column;
gap: 6px;
padding: 2px 0 1px;
}
.totals-compact__row{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-size: 12px;
line-height: 1.28;
padding: 1px 0;
}
.totals-compact__row--net{
margin-top: 4px;
padding-top: 8px;
border-top: 1px solid rgba(17, 24, 39, 0.08);
}
.totals-compact__k{
color: rgba(100, 116, 139, 0.58);
font-weight: 500;
font-size: 11px;
letter-spacing: 0.01em;
}
.totals-compact__v{
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 15px;
letter-spacing: -0.012em;
color: rgba(17, 24, 39, 0.95);
}
.totals-compact__v.ok{
color: color-mix(in srgb, var(--ok) 78%, #64748b);
}
.totals-compact__v.danger{
color: color-mix(in srgb, var(--danger) 72%, #78716c);
}
.totals-compact__row--net .totals-compact__v{
font-size: 16px;
font-weight: 780;
letter-spacing: -0.018em;
}
.totals-compact__row--net .totals-compact__v.ok{
color: color-mix(in srgb, var(--ok) 90%, #1e293b);
}
.totals-compact__row--net .totals-compact__v.danger{
color: color-mix(in srgb, var(--danger) 82%, #57534e);
}
.total{
flex: 1 1 160px;
border: 1px solid var(--border);
background: rgba(0,0,0,0.02);
padding: 10px 12px;
border-radius: 12px;
}
.total .k{ color: var(--muted); font-size: 12px; }
.total .v{ font-size: 18px; margin-top: 4px; }
.v.ok{
color: color-mix(in srgb, var(--ok) 78%, #64748b);
}
.v.danger{
color: color-mix(in srgb, var(--danger) 72%, #78716c);
}
.list{
margin-top: 10px;
display:flex;
flex-direction:column;
gap:10px;
}
.variable-todo-list{
margin-top: 10px;
display:flex;
flex-direction:column;
gap: 10px;
}
.item{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
border: 1px solid var(--border);
background: rgba(0,0,0,0.015);
padding: 12px;
border-radius: 12px;
}
.item .left{
display:flex;
flex-direction:column;
gap:3px;
}
.item .desc{
font-weight: 500;
font-size: 17px;
}
.item .meta{
font-size: 17px;
color: var(--muted);
font-weight: 500;
}
.cat-pill{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(0,0,0,0.02);
color: var(--text);
font-size: 17px;
line-height: 1.25;
white-space: nowrap;
}
/* All Upcoming Transactions (#txListMain): one size, regular weight, no italics */
#txListMain .item .desc,
#txListMain .item .meta,
#txListMain .item .amt,
#txListMain .item .amt.expected-amt-link,
#txListMain .item .cat-pill,
#txListMain .item a.tx-desc-link{
font-size: 14px;
font-weight: 400;
font-style: normal;
}
#txListMain .expected-item--dense .meta,
#txListMain .expected-item--dense .desc{
font-size: 14px;
font-weight: 400;
font-style: normal;
}
#txListMain .expected-item--variable .desc,
#txListMain .expected-item--variable .expected-amt-link{
font-style: normal;
}
.categories-toolbar{
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.add-group-inline{
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.add-group-inline input{
width: min(320px, 70vw);
}
/* Category color picker (tx add/edit modals) */
.cat-color-row{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
padding: 4px 0 2px;
margin-top: 6px;
}
.cat-color-row__label{
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--muted);
white-space: nowrap;
line-height: 1.3;
display: block;
}
.cat-color-row__optional{
display: block;
margin-top: 2px;
font-size: 10px;
letter-spacing: 0.03em;
opacity: 0.9;
}
/* Match tx edit header label color */
.tx-edit-top .cat-color-row__label{
color: rgba(255, 255, 255, 0.92);
}
.cat-color-row__swatches{
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
min-width: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.cat-swatch{
width: 18px;
height: 18px;
border-radius: 999px;
border: 1px solid rgba(0,0,0,0.12);
cursor: pointer;
position: relative;
flex: 0 0 auto;
}
.cat-swatch:hover{
filter: brightness(1.03);
}
.cat-swatch.is-active{
outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: 2px;
}
.cat-swatch--custom{
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.02);
}
.cat-swatch--custom::before{
content:"+";
font-weight: 900;
color: var(--muted);
line-height: 1;
}
.cat-swatch--custom input[type="color"]{
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.categories-toolbar-hint{
margin: 0 0 8px;
font-size: 0.72rem !important;
line-height: 1.4;
color: rgba(100, 116, 139, 0.78) !important;
}
.settings-pane[data-settings-pane="categories"] .categories-actions{
gap: 8px 10px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px solid rgba(17, 24, 39, 0.05);
}
.settings-pane[data-settings-pane="categories"] .categories-new-field label{
font-size: 11px;
}
.settings-pane[data-settings-pane="categories"] #addCategoryBtn{
padding: 6px 12px;
font-size: 0.78rem;
}
.settings-pane[data-settings-pane="categories"] .categories-toolbar.categories-toolbar--lite{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px 10px;
padding: 0;
margin: 0 0 6px;
border-radius: 0;
background: transparent;
border: none;
}
.settings-pane[data-settings-pane="categories"] .categories-toolbar .add-group-inline{
flex: 1 1 220px;
}
.settings-pane[data-settings-pane="categories"] .categories-toolbar .add-group-inline input{
background: #fff;
}
.settings-cat-toolbar__btn{
appearance: none;
font: inherit;
font-size: 0.75rem;
font-weight: 600;
padding: 5px 10px;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.1);
background: rgba(255, 255, 255, 0.85);
color: rgba(17, 24, 39, 0.78);
cursor: pointer;
}
.settings-cat-toolbar__btn:hover{
border-color: rgba(11, 61, 46, 0.22);
background: rgba(4, 120, 87, 0.05);
color: rgba(11, 61, 46, 0.9);
}
.settings-cat-toolbar__btn:focus-visible{
outline: 2px solid rgba(4, 120, 87, 0.28);
outline-offset: 2px;
}
.settings-pane[data-settings-pane="categories"] .cat-tree{
display: flex;
flex-direction: column;
gap: 20px;
}
.settings-pane[data-settings-pane="categories"] .cat-group{
border: none;
border-radius: 0;
background: transparent;
overflow: visible;
}
.cat-group.is-dragging{
opacity: 0.88;
}
.settings-pane[data-settings-pane="categories"] .cat-group-head{
display: flex;
align-items: center;
gap: 8px;
padding: 2px 2px 8px;
margin-bottom: 2px;
border: none;
border-bottom: 1px solid rgba(17, 24, 39, 0.06);
background: transparent;
}
.settings-pane[data-settings-pane="categories"] .cat-group-head::before{
content: "";
width: 14px;
height: 14px;
flex: 0 0 auto;
border-radius: 4px;
background:
radial-gradient(circle at 35% 28%, rgba(100,116,139,0.28) 1.1px, transparent 1.5px),
radial-gradient(circle at 35% 50%, rgba(100,116,139,0.28) 1.1px, transparent 1.5px),
radial-gradient(circle at 35% 72%, rgba(100,116,139,0.28) 1.1px, transparent 1.5px),
radial-gradient(circle at 62% 28%, rgba(100,116,139,0.28) 1.1px, transparent 1.5px),
radial-gradient(circle at 62% 50%, rgba(100,116,139,0.28) 1.1px, transparent 1.5px),
radial-gradient(circle at 62% 72%, rgba(100,116,139,0.28) 1.1px, transparent 1.5px);
opacity: 0.55;
transform: translateY(0.5px);
}
.settings-pane[data-settings-pane="categories"] .cat-group-head::after{
content: none;
}
.cat-group-edit-btn{
margin-left: auto;
border: 1px solid rgba(17, 24, 39, 0.08);
background: rgba(255, 255, 255, 0.7);
padding: 4px 7px;
border-radius: 7px;
font: inherit;
color: rgba(75, 85, 99, 0.72);
font-weight: 500;
font-size: 11px;
cursor: pointer;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cat-group-edit-btn:hover{
color: rgba(17, 24, 39, 0.88);
border-color: rgba(11, 61, 46, 0.18);
background: rgba(4, 120, 87, 0.05);
}
.cat-group-edit-btn:focus-visible{
outline: 2px solid rgba(11, 61, 46, 0.25);
outline-offset: 2px;
}
.cat-group-head.is-drag-over{
outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: -2px;
}
.settings-pane[data-settings-pane="categories"] .cat-move-controls{
display: none;
}
.cat-move-btn{
width: 26px;
height: 26px;
padding: 0;
border-radius: 7px;
border: 1px solid rgba(17, 24, 39, 0.08);
background: rgba(255, 255, 255, 0.75);
color: rgba(100, 116, 139, 0.75);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cat-move-btn:hover{
background: rgba(0,0,0,0.05);
filter: none;
}
.cat-move-btn svg{
width: 14px;
height: 14px;
stroke: currentColor;
stroke-width: 2.2;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Category picker (combobox): group headers + indented categories */
.category-combobox__group{
padding: 8px 10px 4px;
font-size: 12px;
font-weight: 700;
color: rgba(255, 255, 255, 0.82);
letter-spacing: 0.2px;
}
.category-combobox__option--child{
padding-left: 22px;
}
/* (moved lower) */
.cat-group-name-input{
flex: 1;
min-width: 0;
font-weight: 600;
font-size: 14px;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
}
.cat-group-name-input{
display: none;
}
.cat-group-name-display{
flex: 1;
min-width: 0;
font-weight: 650;
font-size: 15px;
padding: 0;
border-radius: 0;
border: none;
background: transparent;
color: rgba(17, 24, 39, 0.9);
cursor: pointer;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.settings-pane[data-settings-pane="categories"] .cat-group-body{
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 4px;
align-items: center;
padding: 0;
}
.cat-group-body.is-drag-over{
background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.cat-group-body .cat-name{
font-size: 13.5px;
font-weight: 500;
color: rgba(17, 24, 39, 0.88);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.settings-pane[data-settings-pane="categories"] .cat-group-body .cat-row,
.settings-pane[data-settings-pane="categories"] .cat-row{
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.88);
box-shadow: none;
}
.settings-pane[data-settings-pane="categories"] .cat-row::before{
content: "";
width: 14px;
height: 14px;
flex: 0 0 auto;
border-radius: 4px;
background:
radial-gradient(circle at 35% 28%, rgba(100,116,139,0.22) 1.1px, transparent 1.5px),
radial-gradient(circle at 35% 50%, rgba(100,116,139,0.22) 1.1px, transparent 1.5px),
radial-gradient(circle at 35% 72%, rgba(100,116,139,0.22) 1.1px, transparent 1.5px),
radial-gradient(circle at 62% 28%, rgba(100,116,139,0.22) 1.1px, transparent 1.5px),
radial-gradient(circle at 62% 50%, rgba(100,116,139,0.22) 1.1px, transparent 1.5px),
radial-gradient(circle at 62% 72%, rgba(100,116,139,0.22) 1.1px, transparent 1.5px);
opacity: 0.5;
}
.settings-pane[data-settings-pane="categories"] .cat-row:hover{
border-color: rgba(11, 61, 46, 0.14);
background: rgba(249, 250, 251, 0.95);
}
.settings-pane[data-settings-pane="categories"] .cat-row.is-dragging{
opacity: 0.72;
}
.settings-pane[data-settings-pane="categories"] .cat-row.is-drag-over{
outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: 2px;
}
.cat-drag-handle{
cursor: grab;
}
.cat-row.is-dragging .cat-drag-handle{
cursor: grabbing;
opacity: 0.7;
}
.cat-row.is-drag-over .cat-drag-handle{
text-decoration: underline;
}
/* ============================================================
Categories & Groups (redesign)
============================================================
Goals:
- Lightweight organization, not database admin.
- Group cards with tight internal rhythm and generous space
between groups.
- Hover-only controls (drag handle + kebab menu); no permanent
up/down arrows or edit pencils.
- Inline rename on click for both groups and categories.
- Empty state with friendly defaults / first-group prompt.
Class prefix: .cats-pane / .cats-tree / .cats-group / .cats-cat
New layout coexists with the legacy .cat-tree styles above so
any not-yet-migrated surface keeps rendering.
============================================================ */
.cats-pane{
/* token-ish locals so the visual rhythm stays cohesive */
--cats-card-bg: #fff;
--cats-card-border: rgba(11, 61, 46, 0.11);
--cats-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
--cats-menu-shadow: 0 1px 2px rgba(15, 23, 42, 0.035), 0 8px 20px rgba(15, 23, 42, 0.08);
--cats-row-divider: rgba(17, 24, 39, 0.055);
--cats-row-hover: rgba(11, 61, 46, 0.04);
--cats-muted: rgba(71, 85, 105, 0.82);
--cats-fg: rgba(15, 23, 42, 0.94);
--cats-fg-soft: rgba(31, 41, 55, 0.84);
--cats-radius-card: 10px;
--cats-radius-row: 7px;
--cats-radius-menu: 10px;
--cats-row-pad-y: 2px;
--cats-row-pad-x: 8px;
--cats-row-min-h: 38px;
--cats-head-min-h: 42px;
}
/* Header / IA */
.cats-pane__head{
margin: 0 0 5px;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
border: none;
background: transparent;
}
.cats-pane__title{
margin: 0;
/* inherit settings-subhead/section-title sizing where present;
this keeps weight consistent across the two surfaces it lives on. */
}
.cats-pane__helper{
margin: 0;
font-size: 13.5px;
line-height: 1.38;
color: var(--cats-muted);
max-width: 36rem;
}
.cats-pane__note{
margin: 0;
font-size: 12px;
line-height: 1.38;
color: rgba(100, 116, 139, 0.68);
font-style: normal;
}
/* Categories manager (Settings + embedded settings shells) */
.categories-manager__shell{
max-width: min(1120px, 100%);
margin: 0 auto;
padding: 0 clamp(4px, 1.5vw, 20px) 6px;
}
.categories-manager__head{
margin-top: 0;
margin-bottom: 4px;
padding-top: 0;
}
.categories-manager__head .settings-section-title,
.categories-manager__head .cats-pane__title{
font-weight: 750;
letter-spacing: -0.02em;
color: rgba(15, 23, 42, 0.94);
}
.categories-manager__note{
color: rgba(71, 85, 105, 0.74);
margin-bottom: 2px;
}
.categories-manager .settings-section-lede.cats-pane__helper{
max-width: 36rem;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .categories-manager__summary{
margin-bottom: 5px;
}
body[data-bw-view="settings"] .settings-pane[data-settings-pane="categories"] .cats-pane__toolbar{
margin-bottom: 7px;
}
.categories-manager__summary{
display: none !important;
}
.cats-pane__scan-tips{
margin: 0 0 6px;
padding: 0;
font-size: 11.5px;
line-height: 1.35;
color: rgba(100, 116, 139, 0.5);
max-width: 42rem;
}
.cats-pane__scan-tips-sep{
margin: 0 0.35em;
color: rgba(148, 163, 184, 0.55);
}
@media (max-width: 720px){
.categories-manager__summary{
flex-direction: column;
align-items: stretch;
}
}
.categories-stat-card{
display: inline-flex;
align-items: baseline;
justify-content: space-between;
gap: 7px;
min-width: 0;
flex: 0 1 auto;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(11, 61, 46, 0.14);
border-radius: 999px;
padding: 3px 10px 3px 9px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.categories-stat-card--wide{
display: none !important;
}
.categories-stat-card__label{
display: block;
font-size: 9px;
font-weight: 680;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.72);
margin: 0;
white-space: nowrap;
}
.categories-stat-card__value{
font-size: 13px;
font-weight: 720;
color: rgba(15, 23, 42, 0.88);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.categories-stat-card__value--soft{
font-size: 14px;
font-weight: 600;
color: rgba(11, 61, 46, 0.88);
}
.categories-callout{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 14px;
margin: 0 0 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(180, 120, 40, 0.28);
background: linear-gradient(180deg, rgba(255, 251, 235, 0.95), rgba(255, 248, 230, 0.88));
}
.categories-callout__text{
font-size: 13px;
font-weight: 600;
color: rgba(90, 60, 20, 0.92);
}
.categories-callout__btn{
appearance: none;
font: inherit;
font-size: 12.5px;
font-weight: 600;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid rgba(11, 61, 46, 0.22);
background: #fff;
color: rgba(11, 61, 46, 0.92);
cursor: pointer;
}
.categories-callout__btn:hover{
background: rgba(11, 61, 46, 0.06);
}
.categories-manager__forecast-p{
margin: 10px 0 0;
font-size: 13px;
line-height: 1.5;
color: rgba(51, 65, 85, 0.88);
}
.category-delete-modal .modal,
.category-simple-delete-modal .modal,
.group-simple-delete-modal .modal,
.category-move-modal .modal,
.bw-confirm-modal .modal{
width: 100%;
max-width: 440px;
border: 1px solid var(--border);
background: var(--cal-surface);
border-radius: 14px;
padding: 16px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
box-sizing: border-box;
}
.category-delete-modal .modal{
max-width: 420px;
color: var(--text);
}
.category-delete-modal__msg{
margin: 0 0 12px;
font-size: 13px;
line-height: 1.45;
color: rgba(51, 65, 85, 0.9);
}
.category-delete-modal__label{
display: block;
font-size: 12px;
font-weight: 600;
margin-bottom: 6px;
color: rgba(30, 41, 59, 0.88);
}
.category-delete-modal__select{
width: 100%;
margin-bottom: 14px;
padding: 8px 10px;
font: inherit;
font-size: 14px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.14);
}
.category-delete-modal__actions,
.category-simple-delete-modal__actions,
.group-simple-delete-modal__actions,
.category-move-modal__actions,
.bw-confirm-modal .category-simple-delete-modal__actions{
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
margin-top: 11px;
padding-top: 11px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.btn-category-delete{
appearance: none;
font: inherit;
font-size: 13.5px;
font-weight: 580;
padding: 8px 14px;
border-radius: 9px;
cursor: pointer;
border: 1px solid rgba(185, 28, 28, 0.35);
background: rgba(255, 255, 255, 0.9);
color: rgba(161, 38, 38, 0.78);
box-shadow: none;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.btn-category-delete:hover{
background: rgba(185, 28, 28, 0.1);
border-color: rgba(185, 28, 28, 0.5);
color: rgba(127, 29, 29, 0.96);
}
.category-delete-modal__choices{
margin: 0 0 12px;
padding: 0;
border: none;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.category-delete-modal__legend{
float: none;
width: auto;
margin: 0 0 6px;
padding: 0;
font-size: 11.5px;
font-weight: 650;
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.78);
}
.category-delete-modal__radio{
display: flex;
align-items: flex-start;
gap: 8px;
width: 100%;
margin: 0;
font-size: 13px;
line-height: 1.4;
color: rgba(51, 65, 85, 0.92);
cursor: pointer;
}
.category-delete-modal__radio input{
margin-top: 3px;
flex-shrink: 0;
}
.category-delete-modal__radio-label{
display: block;
flex: 1 1 auto;
min-width: 0;
font-size: 13px;
line-height: 1.4;
font-weight: 450;
color: rgba(51, 65, 85, 0.92);
}
.category-delete-modal__note{
margin: 0 0 12px;
font-size: 12.5px;
line-height: 1.45;
color: rgba(71, 85, 105, 0.82);
}
.category-simple-delete-modal__body{
margin: 0 0 4px;
font-size: 13.5px;
line-height: 1.5;
color: rgba(51, 65, 85, 0.9);
}
.bw-confirm-modal .modal h3{
margin: 0 0 8px;
font-size: 1.05rem;
font-weight: 700;
color: var(--text);
letter-spacing: -0.01em;
}
.category-move-modal__hint{
margin: 0 0 10px;
font-size: 13px;
line-height: 1.45;
color: rgba(71, 85, 105, 0.86);
}
.category-move-modal__label{
display: block;
font-size: 12px;
font-weight: 600;
margin-bottom: 6px;
color: rgba(30, 41, 59, 0.88);
}
.category-move-modal__select{
width: 100%;
margin-bottom: 14px;
padding: 8px 10px;
font: inherit;
font-size: 14px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.14);
}
/* Toolbar (top-level + Add group / + Add category) */
.cats-pane__toolbar{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 8px;
}
.cats-pane__action{
appearance: none;
-webkit-appearance: none;
font: inherit;
font-size: 12.5px;
font-weight: 600;
line-height: 1.2;
padding: 5px 10px;
min-height: 30px;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(11, 61, 46, 0.16);
color: rgba(11, 61, 46, 0.9);
cursor: pointer;
box-shadow: var(--cats-card-shadow);
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cats-pane__action:hover{
background: color-mix(in srgb, var(--accent) 5%, #fff);
border-color: rgba(11, 61, 46, 0.32);
color: rgba(11, 61, 46, 1);
}
.cats-pane__action:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
outline-offset: 2px;
}
/* Inline "new group" form (legacy id #addGroupInline) */
.cats-pane__inline-add{
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 14px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--cats-card-border);
border-radius: var(--cats-radius-card);
box-shadow: var(--cats-card-shadow);
}
.cats-pane__inline-add input{
flex: 1 1 200px;
min-width: 0;
padding: 8px 10px;
font: inherit;
font-size: 13.5px;
border-radius: 8px;
border: 1px solid var(--input-border, rgba(0, 0, 0, 0.16));
background: #fff;
}
.cats-pane__inline-add input:focus{
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 1px;
border-color: color-mix(in srgb, var(--accent) 40%, var(--input-border, rgba(0,0,0,0.16)));
}
.cats-pane__inline-add button{
padding: 8px 14px;
font: inherit;
font-size: 13px;
font-weight: 600;
}
/* Empty state */
.cats-pane__empty{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin: 12px 0;
padding: 18px 18px 18px;
background: #fff;
border: 1px dashed rgba(11, 61, 46, 0.18);
border-radius: var(--cats-radius-card);
}
.cats-pane__empty-title{
margin: 0;
font-size: 15px;
font-weight: 700;
color: var(--cats-fg);
}
.cats-pane__empty-sub{
margin: 0;
font-size: 13px;
color: var(--cats-muted);
line-height: 1.45;
max-width: 50ch;
}
.cats-pane__empty-actions{
display: flex;
gap: 8px;
margin-top: 8px;
flex-wrap: wrap;
}
/* Tree: stack of group cards. */
.cats-tree{
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
}
/* === Group card === */
.cats-group{
background: var(--cats-card-bg);
border: 1px solid var(--cats-card-border);
border-radius: var(--cats-radius-card);
box-shadow: var(--cats-card-shadow);
overflow: visible;
transition: box-shadow 0.16s ease, border-color 0.16s ease;
}
.cats-group.is-dragging{
opacity: 0.85;
box-shadow: 0 1px 2px rgba(11, 61, 46, 0.06), 0 16px 40px rgba(11, 61, 46, 0.12);
}
.cats-group.is-drag-over{
border-color: color-mix(in srgb, var(--accent) 38%, var(--cats-card-border));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), var(--cats-card-shadow);
}
.cats-group__panel{
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.cats-group.is-collapsed .cats-group__panel{
grid-template-rows: 0fr;
}
.cats-group__panel-inner{
min-height: 0;
overflow: hidden;
}
.cats-group.is-collapsed .cats-group__head{
border-bottom-color: transparent;
border-radius: var(--cats-radius-card);
}
@media (prefers-reduced-motion: reduce){
.cats-group__panel{
transition: none;
}
}
.cats-group__head{
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: 6px;
min-height: var(--cats-head-min-h, 42px);
padding: 5px 10px 4px;
border-bottom: 1px solid rgba(17, 24, 39, 0.08);
background: linear-gradient(180deg, rgba(224, 236, 229, 0.62), rgba(248, 250, 249, 0.98));
cursor: default;
border-radius: var(--cats-radius-card) var(--cats-radius-card) 0 0;
position: relative;
z-index: 0;
}
.cats-group__head.is-group-menu-open,
.cats-group__head:has(.cats-group__menu[open]){
z-index: 30;
isolation: isolate;
}
.cats-group.is-empty-group .cats-group__head{
background: linear-gradient(180deg, rgba(254, 243, 199, 0.35), rgba(255, 255, 255, 0.98));
}
.cats-group__collapse{
appearance: none;
background: transparent;
border: 1px solid transparent;
width: 24px;
height: 24px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(71, 85, 105, 0.72);
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.cats-group__collapse:hover{
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.94);
}
.cats-group__collapse:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: 1px;
}
.cats-group__collapse svg{
width: 12px;
height: 12px;
display: block;
}
.cats-group.is-collapsed .cats-group__collapse svg{
transform: rotate(-90deg);
}
.cats-group__head.is-dragging{ cursor: grabbing; }
.cats-group__head:hover .cats-group__drag,
.cats-group:focus-within .cats-group__drag,
.cats-group__head.is-dragging .cats-group__drag{
opacity: 1;
color: rgba(51, 65, 85, 0.88);
}
.cats-group__drag{
width: 18px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(100, 116, 139, 0.55);
font-size: 14px;
line-height: 1;
cursor: grab;
user-select: none;
opacity: 0.26;
transition: opacity 0.14s ease, color 0.14s ease;
}
.cats-group__drag::before{
content: "";
width: 8px;
height: 14px;
background-image:
radial-gradient(circle, currentColor 1px, transparent 1.4px),
radial-gradient(circle, currentColor 1px, transparent 1.4px);
background-size: 4px 4px;
background-position: 0 0, 4px 0;
background-repeat: repeat-y;
display: block;
}
.cats-group__name{
margin: 0;
font-size: 15px;
font-weight: 780;
letter-spacing: -0.02em;
color: rgba(15, 23, 42, 0.97);
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.cats-group__name-text{
display: inline-block;
border-radius: 4px;
padding: 2px 4px;
margin: -2px -4px;
cursor: text;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.cats-group__name-text:hover{
background: rgba(11, 61, 46, 0.05);
}
.cats-group__name-text:focus{
outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: 1px;
background: #fff;
}
.cats-group__count{
font-size: 10px;
font-weight: 480;
color: rgba(100, 116, 139, 0.42);
letter-spacing: 0.01em;
text-transform: none;
}
.cats-group.is-collapsed .cats-group__count{
color: rgba(100, 116, 139, 0.55);
}
.cats-group[data-system-group="1"] .cats-group__name::after{
content: "System";
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(11, 61, 46, 0.84);
background: rgba(11, 61, 46, 0.08);
}
.cats-group[data-system-group="1"] .cats-group__name-text{
cursor: default;
}
.cats-group[data-system-group="1"] .cats-group__name-text:hover{
background: transparent;
}
.cats-group__action{
appearance: none;
background: transparent;
border: 1px solid transparent;
width: 24px;
height: 24px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(71, 85, 105, 0.74);
cursor: pointer;
opacity: 0;
transition: opacity 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.cats-group__action:hover{
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.94);
}
.cats-group__action--delete:hover{
background: rgba(167, 55, 68, 0.08);
color: rgba(140, 42, 42, 0.94);
}
.cats-group__action:focus-visible{
opacity: 1;
outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: 1px;
}
.cats-group__action svg{
width: 14px;
height: 14px;
display: block;
}
/* Kebab menu (native ) */
.cats-group__menu{
position: relative;
display: inline-flex;
align-items: center;
justify-self: end;
}
.cats-group__menu summary{
list-style: none;
}
.cats-group__menu summary::-webkit-details-marker{
display: none;
}
.cats-group__menu-summary{
appearance: none;
width: 34px;
height: 32px;
border-radius: 8px;
border: 1px solid transparent;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
color: rgba(71, 85, 105, 0.68);
cursor: pointer;
background: transparent;
opacity: 0.42;
transition: opacity 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.cats-group__menu-summary:hover{
background: rgba(15, 23, 42, 0.05);
opacity: 1;
}
.cats-group__head:hover .cats-group__menu-summary{
opacity: 1;
}
.cats-group__menu[open] .cats-group__menu-summary{
opacity: 1;
background: rgba(15, 23, 42, 0.06);
border-color: rgba(11, 61, 46, 0.18);
}
/* Divider between destructive and normal actions inside category/group menus */
.cats-menu-divider{
flex-shrink: 0;
height: 1px;
margin: 3px 6px;
padding: 0;
border: none;
background: rgba(17, 24, 39, 0.07);
pointer-events: none;
}
.cats-group__menu-panel{
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 152px;
margin: 0;
padding: 4px 3px;
background: rgba(255, 255, 255, 0.99);
border: 1px solid rgba(17, 24, 39, 0.09);
border-radius: var(--cats-radius-menu);
box-shadow: var(--cats-menu-shadow);
z-index: 14000;
pointer-events: auto;
display: flex;
flex-direction: column;
gap: 1px;
}
.cats-menu-panel--floating.cats-group__menu-panel{
z-index: 14000;
}
.cats-group__menu-btn{
appearance: none;
background: transparent;
border: 1px solid transparent;
width: 26px;
height: 26px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
color: rgba(71, 85, 105, 0.78);
cursor: pointer;
opacity: 0;
transition: opacity 0.14s ease, background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.cats-group__menu-btn:hover{
background: rgba(15, 23, 42, 0.05);
color: rgba(15, 23, 42, 0.92);
}
.cats-group__menu-btn[aria-expanded="true"]{
opacity: 1;
background: rgba(15, 23, 42, 0.06);
border-color: rgba(11, 61, 46, 0.18);
}
.cats-group__menu-btn:focus-visible{
opacity: 1;
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 1px;
}
.cats-group__menu-list{
position: absolute;
top: calc(100% + 4px);
right: 0;
min-width: 180px;
margin: 0;
padding: 4px;
list-style: none;
background: #fff;
border: 1px solid rgba(11, 61, 46, 0.14);
border-radius: 10px;
box-shadow: 0 1px 3px rgba(11, 61, 46, 0.06), 0 14px 36px rgba(11, 61, 46, 0.16);
z-index: 30;
display: none;
}
.cats-group__menu-list.is-open{ display: block; }
.cats-group__menu-item{
appearance: none;
width: 100%;
text-align: left;
background: transparent;
border: none;
border-radius: 6px;
padding: 4px 8px;
margin: 0;
font: inherit;
font-size: 11.5px;
font-weight: 480;
line-height: 1.3;
color: var(--cats-fg);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: background 0.17s ease, color 0.17s ease;
}
.cats-group__menu-item:hover{
background: rgba(11, 61, 46, 0.045);
}
.cats-group__menu-item:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: 1px;
}
.cats-group__menu-item--danger{
color: rgba(180, 52, 64, 0.92);
font-weight: 480;
}
.cats-group__menu-item--danger:hover{
background: rgba(180, 52, 64, 0.07);
color: rgba(150, 40, 50, 0.96);
}
/* Group body: tight stack of category rows */
.cats-group__body{
list-style: none;
margin: 0;
padding: 1px 0 0;
display: flex;
flex-direction: column;
background: rgba(252, 253, 252, 0.72);
}
.cats-group__body.is-drag-over{
background: color-mix(in srgb, var(--accent) 4%, #fff);
}
.cats-group__body.is-empty{
padding: 0;
}
.cats-group__empty-row{
padding: 7px 12px 8px;
font-size: 12px;
color: var(--cats-muted);
font-style: normal;
}
/* Category row */
.cats-cat{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 6px;
padding: var(--cats-row-pad-y) var(--cats-row-pad-x) var(--cats-row-pad-y) 6px;
border-radius: 0;
cursor: pointer;
position: relative;
min-height: var(--cats-row-min-h, 38px);
max-height: 42px;
transition: background 0.14s ease, box-shadow 0.14s ease, opacity 0.12s ease;
}
.cats-cat + .cats-cat{
border-top: 1px solid var(--cats-row-divider);
}
.cats-cat:hover,
.cats-cat:focus-within{
background: color-mix(in srgb, var(--accent) 6%, rgba(248, 250, 252, 0.98));
box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 42%, transparent);
}
.cats-cat.is-cat-menu-open,
.cats-cat:has(.cats-cat__menu[open]){
z-index: 30;
isolation: isolate;
}
.cats-group__body:has(.cats-cat__menu[open]) .cats-cat:not(:has(.cats-cat__menu[open])):hover,
.cats-group__body:has(.cats-cat__menu[open]) .cats-cat:not(:has(.cats-cat__menu[open])):focus-within{
background: transparent;
}
.cats-cat.is-unused{
opacity: 0.72;
}
.cats-cat.is-unused .cats-cat__name{
color: rgba(71, 85, 105, 0.78);
}
.cats-cat.is-frequent .cats-cat__name{
font-weight: 600;
color: var(--cats-fg);
}
.cats-cat.is-dragging{
opacity: 0.7;
}
.cats-cat.is-drag-over::before{
content: "";
position: absolute;
left: 8px;
right: 8px;
top: -1px;
height: 2px;
background: color-mix(in srgb, var(--accent) 55%, transparent);
border-radius: 2px;
}
.cats-cat__handle{
width: 14px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(100, 116, 139, 0.55);
cursor: grab;
opacity: 0.28;
transition: opacity 0.14s ease, color 0.14s ease;
user-select: none;
flex: 0 0 auto;
}
.cats-cat:hover .cats-cat__handle,
.cats-cat:focus-within .cats-cat__handle,
.cats-cat.is-dragging .cats-cat__handle{
opacity: 1;
color: rgba(51, 65, 85, 0.88);
}
.cats-cat__handle::before{
content: "";
width: 8px;
height: 12px;
background-image:
radial-gradient(circle, currentColor 1px, transparent 1.4px),
radial-gradient(circle, currentColor 1px, transparent 1.4px);
background-size: 4px 4px;
background-position: 0 0, 4px 0;
background-repeat: repeat-y;
display: block;
}
.cats-cat.is-dragging .cats-cat__handle{ cursor: grabbing; }
.cats-cat__name{
display: inline-block;
font-size: 12.5px;
font-weight: 460;
color: rgba(51, 65, 85, 0.82);
border-radius: 4px;
padding: 2px 4px;
margin: -2px -4px;
cursor: text;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
min-width: 0;
flex: 1 1 140px;
}
.cats-cat__name:hover{
background: rgba(11, 61, 46, 0.05);
}
.cats-cat__name:focus{
outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: 1px;
background: #fff;
color: var(--cats-fg);
}
.cats-cat__meta{
font-size: 9px;
font-weight: 500;
color: rgba(100, 116, 139, 0.55);
flex: 0 0 auto;
margin-left: auto;
margin-right: 0;
min-width: 0;
max-width: none;
text-align: right;
align-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
line-height: 1.2;
padding: 1px 5px;
border-radius: 999px;
background: rgba(241, 245, 249, 0.85);
border: 1px solid rgba(17, 24, 39, 0.05);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.12s ease, visibility 0.12s ease;
}
.cats-cat__meta:empty{
display: none;
}
.cats-cat:hover .cats-cat__meta:not(:empty),
.cats-cat:focus-within .cats-cat__meta:not(:empty){
opacity: 1;
visibility: visible;
}
.cats-cat__edit-hint{
appearance: none;
flex: 0 0 auto;
width: 24px;
height: 24px;
margin: 0 0 0 2px;
padding: 0;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: rgba(71, 85, 105, 0.5);
cursor: pointer;
opacity: 0;
transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.cats-cat__edit-hint svg{
width: 13px;
height: 13px;
display: block;
margin: auto;
}
.cats-cat:hover .cats-cat__edit-hint,
.cats-cat:focus-within .cats-cat__edit-hint{
opacity: 1;
}
.cats-cat__edit-hint:hover{
background: rgba(11, 61, 46, 0.06);
border-color: rgba(11, 61, 46, 0.12);
color: rgba(11, 61, 46, 0.88);
}
.cats-cat__edit-hint:focus-visible{
opacity: 1;
outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
outline-offset: 1px;
}
.cats-cat__menu{
position: relative;
flex: 0 0 auto;
margin-left: 4px;
z-index: 2;
}
.cats-cat__menu summary::-webkit-details-marker{
display: none;
}
.cats-cat__menu-summary{
list-style: none;
width: 28px;
height: 26px;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid transparent;
color: rgba(71, 85, 105, 0.42);
cursor: pointer;
opacity: 0;
transition: opacity 0.14s ease, color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.cats-cat:hover .cats-cat__menu-summary,
.cats-cat:focus-within .cats-cat__menu-summary,
.cats-cat__menu[open] .cats-cat__menu-summary{
opacity: 1;
}
.cats-cat__menu-summary:hover{
background: rgba(15, 23, 42, 0.05);
border-color: rgba(17, 24, 39, 0.06);
color: rgba(51, 65, 85, 0.72);
}
.cats-cat__menu[open] .cats-cat__menu-summary{
background: rgba(15, 23, 42, 0.05);
border-color: rgba(17, 24, 39, 0.07);
color: rgba(51, 65, 85, 0.88);
}
.cats-cat__menu-summary:focus-visible{
opacity: 1;
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 1px;
}
.cats-cat__menu-panel{
position: absolute;
right: 0;
top: calc(100% + 8px);
min-width: 152px;
padding: 4px 3px;
border-radius: var(--cats-radius-menu);
border: 1px solid rgba(17, 24, 39, 0.09);
background: rgba(255, 255, 255, 0.99);
backdrop-filter: blur(8px);
box-shadow: var(--cats-menu-shadow);
display: flex;
flex-direction: column;
gap: 1px;
z-index: 14000;
pointer-events: auto;
}
.cats-menu-panel--floating.cats-cat__menu-panel{
z-index: 14000;
}
.cats-cat__menu-item{
display: block;
width: 100%;
text-align: left;
margin: 0;
padding: 4px 8px;
border: none;
border-radius: 6px;
background: transparent;
font: inherit;
font-size: 11.5px;
font-weight: 480;
line-height: 1.3;
color: rgba(30, 41, 59, 0.9);
cursor: pointer;
transition:
background 0.17s ease,
color 0.17s ease;
}
.cats-cat__menu-item:hover{
background: rgba(11, 61, 46, 0.044);
}
.cats-cat__menu-item:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
outline-offset: 1px;
}
.cats-cat__menu-item--danger{
color: rgba(180, 52, 64, 0.92);
font-weight: 480;
}
.cats-cat__menu-item--danger:hover{
background: rgba(180, 52, 64, 0.07);
color: rgba(150, 40, 50, 0.96);
}
.cats-cat__handle--pulse{
animation: cats-handle-pulse 1.2s ease-in-out 1;
}
@keyframes cats-handle-pulse{
0%, 100%{ box-shadow: none; }
35%{ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
}
.cats-cat{
flex-wrap: nowrap;
align-items: center;
}
.cats-cat__name{
flex: 1 1 auto;
}
/* In-card "+ Add category" affordance at the bottom of each group */
.cats-group__add-row{
display: flex;
align-items: center;
gap: 6px;
padding: 2px 8px 3px;
min-height: 32px;
border-top: 1px solid rgba(17, 24, 39, 0.04);
background: transparent;
border-radius: 0 0 var(--cats-radius-card) var(--cats-radius-card);
}
.cats-group:not(:hover):not(:focus-within) .cats-group__add-trigger{
opacity: 0.55;
}
.cats-group__add-form{
flex: 1 1 auto;
display: flex;
gap: 6px;
align-items: center;
}
.cats-group__add-input{
flex: 1 1 auto;
min-width: 0;
padding: 6px 8px;
font: inherit;
font-size: 13px;
border-radius: 6px;
border: 1px solid var(--input-border, rgba(0, 0, 0, 0.16));
background: #fff;
}
.cats-group__add-input:focus{
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 1px;
}
.cats-group__add-trigger{
appearance: none;
background: transparent;
border: none;
color: rgba(11, 61, 46, 0.72);
font: inherit;
font-size: 11.5px;
font-weight: 600;
padding: 2px 4px;
border-radius: 4px;
cursor: pointer;
transition: background 0.14s ease, color 0.14s ease, opacity 0.14s ease;
width: auto;
max-width: 100%;
text-align: left;
display: inline-flex;
align-items: center;
gap: 4px;
}
.cats-group__add-trigger:hover{
background: rgba(11, 61, 46, 0.06);
color: rgba(11, 61, 46, 0.95);
opacity: 1;
}
.cats-group__add-trigger:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 1px;
}
.cats-group__add-plus{
display: inline;
font-size: 13px;
line-height: 1;
font-weight: 700;
color: rgba(11, 61, 46, 0.78);
}
.cats-group__add-submit{
appearance: none;
background: var(--accent);
color: #fff;
border: 1px solid color-mix(in srgb, var(--accent) 82%, #000 18%);
font: inherit;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
}
.cats-group__add-submit:hover{
background: color-mix(in srgb, var(--accent) 92%, #000);
}
.cats-group__add-cancel{
appearance: none;
background: transparent;
border: 1px solid transparent;
color: rgba(71, 85, 105, 0.8);
font: inherit;
font-size: 12.5px;
font-weight: 600;
padding: 7px 8px;
border-radius: 6px;
cursor: pointer;
}
.cats-group__add-cancel:hover{
background: rgba(15, 23, 42, 0.04);
color: rgba(15, 23, 42, 0.92);
}
.cats-group__add-cancel:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
outline-offset: 1px;
}
/* Hide the legacy bottom add-category footer + per-row move arrows
anywhere they might still leak into the new design surfaces. */
.cats-pane .categories-actions,
.cats-pane .categories-toolbar,
.cats-pane .categories-toolbar-hint,
.cats-pane .cat-move-controls{
display: none !important;
}
.low-balance-result{
border: 1px solid var(--border);
background: rgba(0,0,0,0.02);
border-radius: 12px;
padding: 10px 12px;
color: var(--text);
font-size: 13px;
line-height: 1.35;
}
.low-balance-result.is-empty{
color: var(--muted);
}
.low-balance-result .k{
color: var(--muted);
font-size: 12px;
font-weight: 600;
text-transform: none;
letter-spacing: 0.3px;
}
.low-balance-result .v{
margin-top: 6px;
font-weight: 700;
}
.low-balance-result .v.danger{
color: var(--danger);
}
.balance-threshold-result-block + .balance-threshold-result-block{
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.row-actions{
display:flex;
flex-direction:column;
gap:8px;
align-items:flex-end;
}
.amt{
white-space:nowrap;
font-weight: 500;
font-size: 17px;
}
.amt.income{ color: var(--ok); }
.amt.expense{ color: var(--danger); }
.expected-item--dense{
padding: 8px 10px;
}
.expected-item--dense .meta{
font-size: 11px;
}
.expected-item--dense .desc{
font-size: 13px;
}
.expected-amt-link{
background: transparent;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
text-decoration: underline dotted;
text-underline-offset: 2px;
}
.error{
margin-top:10px;
color: #7f1d1d;
border: 1px solid rgba(255,107,107,0.35);
background: rgba(255,107,107,0.14);
padding: 10px 12px;
border-radius: 10px;
display:none;
}
.success{
margin-top:10px;
color: #14532d;
border: 1px solid rgba(76,209,123,0.35);
background: rgba(76,209,123,0.14);
padding: 10px 12px;
border-radius: 10px;
display:none;
}
.info{
margin-top:10px;
color: #1e3a8a;
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
background: color-mix(in srgb, var(--accent) 12%, transparent);
padding: 10px 12px;
border-radius: 10px;
display:none;
font-size: 13px;
line-height: 1.35;
}
.info.pending{
color: #d8e8ff;
}
.info.ok{
color: #d9ffe8;
border-color: rgba(76,209,123,0.35);
background: rgba(76,209,123,0.10);
}
.callout{
margin-top: 12px;
border-radius: 14px;
padding: 18px 18px;
border: 1px solid rgba(0,0,0,0.10);
background: rgba(0,0,0,0.035);
color: var(--text);
font-size: 16px;
line-height: 1.45;
display: none;
}
.callout--pending{
border-color: color-mix(in srgb, var(--accent) 26%, rgba(0,0,0,0.10));
background: color-mix(in srgb, var(--accent) 10%, rgba(0,0,0,0.03));
}
.callout--ok{
border-color: rgba(76,209,123,0.35);
background: rgba(76,209,123,0.10);
}
.callout--error{
color: #7f1d1d;
border-color: rgba(255,107,107,0.35);
background: rgba(255,107,107,0.14);
}
.callout--muted{
color: var(--muted);
border-color: rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
font-size: 13px;
}
/* Signup: plan / invite banner in card header (replaces “Create Account” title). */
body.signup-page .auth-section__head--signup-plan{
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
margin: 0;
background: transparent;
border: none;
border-bottom: none;
border-radius: 14px 14px 0 0;
cursor: default;
overflow: hidden;
}
body.signup-page .auth-section:has(#signupBannerHead[hidden]) .auth-section__body{
border-radius: 14px;
}
body.signup-page #signupPlanNote.callout--muted{
margin-top: 0;
margin-bottom: 0;
padding: 18px 22px 16px;
text-align: center;
color: #fff;
font-size: clamp(17px, 1.35vw, 20px);
font-weight: 800;
letter-spacing: 0.2px;
line-height: 1.3;
border: none;
border-radius: 14px 14px 0 0;
background: var(--accent);
box-shadow: none;
width: 100%;
}
body.signup-page #signupPlanNote.callout--muted.signup-plan-note--pro{
background: #5b67b6;
}
/* Login page accordion */
.auth-section{
padding: 0;
overflow: hidden;
}
.auth-section + .auth-section{
margin-top: 14px;
}
.auth-section__head{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: none;
border-bottom: 1px solid rgba(0,0,0,0.08);
background: rgba(0,0,0,0.02);
padding: 14px 16px;
border-radius: 14px 14px 0 0;
cursor: pointer;
font: inherit;
}
.auth-section__title{
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: none;
color: rgba(17, 24, 39, 0.70);
}
.auth-section__chev{
font-weight: 900;
opacity: 0.7;
transition: transform 160ms ease;
}
.auth-section--open .auth-section__chev{
transform: rotate(180deg);
}
.auth-section__body{
padding: 16px;
}
.auth-section__head + .auth-section__body{
border-radius: 0 0 14px 14px;
}
/* Login page: stack Email/Password and slightly larger text */
body.login-page #loginSectionBody .row.two{
grid-template-columns: 1fr;
gap: 8px;
}
body.login-page #email,
body.login-page #password,
body.login-page #pwForgotEmail,
body.login-page #pwResetNew,
body.login-page #pwResetConfirm{
font-size: 0.98rem;
}
body.login-page:not(.signup-page) #loginSectionBody #email,
body.login-page:not(.signup-page) #loginSectionBody #password,
body.login-page:not(.signup-page) #loginSectionBody #pwForgotEmail,
body.login-page:not(.signup-page) #loginSectionBody #pwResetNew,
body.login-page:not(.signup-page) #loginSectionBody #pwResetConfirm{
padding: 7px 11px;
min-height: 0;
line-height: 1.35;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(17, 24, 39, 0.18);
border-radius: 9px;
transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
body.login-page:not(.signup-page) #loginSectionBody #email:hover,
body.login-page:not(.signup-page) #loginSectionBody #password:hover,
body.login-page:not(.signup-page) #loginSectionBody #pwForgotEmail:hover,
body.login-page:not(.signup-page) #loginSectionBody #pwResetNew:hover,
body.login-page:not(.signup-page) #loginSectionBody #pwResetConfirm:hover{
border-color: rgba(11, 61, 46, 0.28);
box-shadow: 0 0 0 1px rgba(11, 61, 46, 0.08);
}
body.login-page:not(.signup-page) #loginSectionBody #email:focus,
body.login-page:not(.signup-page) #loginSectionBody #password:focus,
body.login-page:not(.signup-page) #loginSectionBody #pwForgotEmail:focus,
body.login-page:not(.signup-page) #loginSectionBody #pwResetNew:focus,
body.login-page:not(.signup-page) #loginSectionBody #pwResetConfirm:focus{
outline: none;
border-color: rgba(4, 120, 87, 0.58);
box-shadow:
0 0 0 4px rgba(4, 120, 87, 0.16),
0 0 0 1px rgba(4, 120, 87, 0.24),
0 1px 0 rgba(255, 255, 255, 0.75) inset;
background: rgba(255, 255, 255, 0.99);
}
body.login-page:not(.signup-page) #loginSectionBody #email:focus-visible,
body.login-page:not(.signup-page) #loginSectionBody #password:focus-visible,
body.login-page:not(.signup-page) #loginSectionBody #pwForgotEmail:focus-visible,
body.login-page:not(.signup-page) #loginSectionBody #pwResetNew:focus-visible,
body.login-page:not(.signup-page) #loginSectionBody #pwResetConfirm:focus-visible{
outline: none;
}
body.login-page:not(.signup-page) #loginSectionBody{
text-align: left;
}
body.login-page:not(.signup-page) #loginSectionBody .row.two > div{
text-align: left;
}
body.login-page:not(.signup-page) #loginSectionBody #loginBtn,
body.login-page:not(.signup-page) #loginSectionBody .login-flow .top-nav__logout{
width: 100%;
margin-top: 6px;
padding: 0 16px;
min-height: 48px;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.012em;
border-radius: 13px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 4px 14px rgba(11, 61, 46, 0.16),
0 1px 3px rgba(0, 0, 0, 0.05);
transition:
transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 180ms ease,
filter 180ms ease,
border-color 180ms ease;
}
body.login-page:not(.signup-page) #loginSectionBody #loginBtn:hover,
body.login-page:not(.signup-page) #loginSectionBody .login-flow .top-nav__logout:hover{
transform: translateY(-1px);
background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff) 0%, color-mix(in srgb, var(--accent) 72%, #0a1f18) 100%);
border-color: rgba(0, 0, 0, 0.22);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 8px 22px rgba(11, 61, 46, 0.22),
0 2px 5px rgba(0, 0, 0, 0.08);
filter: saturate(1.03);
}
body.login-page:not(.signup-page) #loginSectionBody #loginBtn:active,
body.login-page:not(.signup-page) #loginSectionBody .login-flow .top-nav__logout:active{
transform: translateY(0);
filter: brightness(0.97) saturate(1.02);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.12) inset,
0 4px 14px rgba(11, 61, 46, 0.18);
}
body.login-page:not(.signup-page) #loginSectionBody #loginBtn:focus-visible,
body.login-page:not(.signup-page) #loginSectionBody .login-flow .top-nav__logout:focus-visible{
outline: 3px solid rgba(4, 120, 87, 0.35);
outline-offset: 2px;
}
body.login-page:not(.signup-page) .login-page__forgot-link{
display: block;
margin: 5px 0 0;
width: fit-content;
font-size: 0.78rem;
font-weight: 600;
color: rgba(51, 65, 85, 0.88);
text-decoration: none;
text-underline-offset: 2px;
transition: color 160ms ease, opacity 160ms ease;
}
body.login-page:not(.signup-page) .login-page__forgot-link:hover{
color: rgba(11, 61, 46, 0.95);
text-decoration: underline;
opacity: 1;
}
body.login-page:not(.signup-page) .login-page__forgot-link:focus-visible{
color: var(--accent);
text-decoration: underline;
outline: 2px solid rgba(11, 61, 46, 0.35);
outline-offset: 2px;
border-radius: 2px;
}
/* Combined reassurance microcopy: shield icon + three concise pieces of
trust info on a single calm line directly under the Login button. */
body.login-page:not(.signup-page) .login-page__reassure{
margin: 5px 0 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
width: 100%;
font-size: 0.72rem;
font-weight: 450;
letter-spacing: 0.01em;
color: rgba(100, 116, 139, 0.72);
text-align: center;
line-height: 1.4;
max-width: 100%;
}
body.login-page:not(.signup-page) .login-page__reassure-text{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.32rem 1rem;
max-width: 22rem;
color: rgba(100, 116, 139, 0.76);
}
body.login-page:not(.signup-page) .login-page__reassure-item{
display: inline;
white-space: nowrap;
}
body.login-page:not(.signup-page) .login-page__reassure-item--primary{
font-weight: 500;
color: rgba(71, 85, 105, 0.82);
}
body.login-page:not(.signup-page) .login-page__reassure-dot{
display: none;
}
body.login-page:not(.signup-page) .login-page__signup-prompt{
margin-top: 11px;
padding-top: 10px;
border-top: 1px solid rgba(17, 24, 39, 0.04);
font-size: 0.92rem;
line-height: 1.45;
text-align: center;
color: rgba(71, 85, 105, 0.82);
}
body.login-page:not(.signup-page) .login-page__signup-cta{
display: inline-block;
margin-top: 0;
margin-left: 0.4rem;
font-size: 0.88rem;
font-weight: 650;
letter-spacing: -0.005em;
color: color-mix(in srgb, var(--accent) 78%, #334155);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 28%, transparent);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
transition: color 160ms ease, text-decoration-color 160ms ease, opacity 160ms ease;
}
body.login-page:not(.signup-page) .login-page__signup-cta:hover{
color: color-mix(in srgb, var(--accent) 78%, #000);
text-decoration-color: color-mix(in srgb, var(--accent) 78%, #000);
opacity: 1;
}
body.login-page:not(.signup-page) .login-page__signup-cta:focus-visible{
text-decoration: underline;
outline: 2px solid rgba(11, 61, 46, 0.35);
outline-offset: 2px;
border-radius: 2px;
}
body.login-page:not(.signup-page) .login-flow{
display: flex;
flex-direction: column;
gap: 10px;
text-align: left;
}
body.login-page:not(.signup-page) .login-flow[hidden]{
display: none !important;
}
/* Polished primary login flow: slightly tighter rhythm so the card
feels cohesive without losing air. */
body.login-page:not(.signup-page) .login-flow.login-flow--polished{
gap: 7px;
}
body.login-page:not(.signup-page) .login-flow__helper{
margin: 0 0 2px;
font-size: 0.84rem;
line-height: 1.45;
font-weight: 500;
color: rgba(71, 85, 105, 0.82);
}
body.login-page:not(.signup-page) .login-flow__lede{
margin: 0 0 4px;
font-size: 1.02rem;
font-weight: 800;
letter-spacing: -0.02em;
color: rgba(15, 23, 32, 0.94);
}
body.login-page:not(.signup-page) .login-flow__busy{
margin: 0;
font-size: 0.88rem;
font-weight: 500;
color: rgba(71, 85, 105, 0.78);
}
body.login-page:not(.signup-page) .login-flow__helper--muted{
font-size: 0.78rem;
color: rgba(100, 116, 139, 0.78);
margin-top: -2px;
}
body.login-page:not(.signup-page) .login-flow__helper--muted a{
color: var(--accent);
font-weight: 600;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 38%, transparent);
text-underline-offset: 3px;
}
body.login-page:not(.signup-page) .login-flow__helper--muted a:hover{
text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent);
}
/* Soft inline alert directly under the Send button. Used for transient,
recoverable problems (empty field, malformed email, rate limit). */
body.login-page:not(.signup-page) .login-flow__alert{
margin: 8px 0 0;
padding: 9px 12px;
border-radius: 10px;
background: #fff7f4;
border: 1px solid #f7d3c4;
color: #8a3a1d;
font-size: 0.82rem;
line-height: 1.45;
}
body.login-page:not(.signup-page) .login-flow__alert[hidden]{
display: none;
}
/* Larger "help card" for substantive failures — soft pink/red bg with a
small icon, suggestions, and a clear path forward (signup or back).
Designed to feel supportive, not alarming. */
body.login-page:not(.signup-page) .login-flow__help{
margin: 10px 0 0;
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
border-radius: 12px;
background: linear-gradient(180deg, #fff5f2 0%, #fffafa 100%);
border: 1px solid #f5d2c3;
color: rgba(51, 65, 85, 0.94);
}
body.login-page:not(.signup-page) .login-flow__help[hidden]{
display: none;
}
body.login-page:not(.signup-page) .login-flow__help-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
flex: 0 0 28px;
margin-top: 2px;
border-radius: 999px;
background: rgba(194, 65, 12, 0.1);
color: #c2410c;
}
body.login-page:not(.signup-page) .login-flow__help-body{
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
flex: 1;
}
body.login-page:not(.signup-page) .login-flow__help-title{
margin: 0;
font-size: 0.92rem;
font-weight: 700;
letter-spacing: -0.005em;
color: rgba(31, 41, 55, 0.96);
}
body.login-page:not(.signup-page) .login-flow__help-text{
margin: 0;
font-size: 0.82rem;
line-height: 1.5;
color: rgba(71, 85, 105, 0.88);
}
body.login-page:not(.signup-page) .login-flow__help-hints{
list-style: none;
margin: 2px 0 4px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-size: 0.75rem;
color: rgba(100, 116, 139, 0.84);
}
body.login-page:not(.signup-page) .login-flow__help-hints li{
position: relative;
padding-left: 12px;
}
body.login-page:not(.signup-page) .login-flow__help-hints li::before{
content: "";
position: absolute;
left: 2px;
top: 50%;
width: 4px;
height: 4px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.7);
transform: translateY(-50%);
}
body.login-page:not(.signup-page) .login-flow__help-actions{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 6px;
}
body.login-page:not(.signup-page) .login-flow__help-cta{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 14px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 0.84rem;
font-weight: 600;
text-decoration: none;
letter-spacing: 0.005em;
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 10px 22px -12px rgba(11, 61, 46, 0.5);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
body.login-page:not(.signup-page) .login-flow__help-cta:hover{
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 14px 26px -12px rgba(11, 61, 46, 0.55);
}
body.login-page:not(.signup-page) .login-flow__help-back{
background: transparent;
border: 0;
padding: 0;
font: inherit;
font-size: 0.8rem;
font-weight: 500;
color: rgba(71, 85, 105, 0.84);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(71, 85, 105, 0.25);
cursor: pointer;
}
body.login-page:not(.signup-page) .login-flow__help-back:hover{
color: var(--accent);
text-decoration-color: var(--accent);
}
/* Inline variant of the signup CTA used in the success page link. */
body.login-page:not(.signup-page) .login-page__signup-cta--inline{
margin-left: 0;
font-size: inherit;
font-weight: 600;
}
body.login-page:not(.signup-page) .login-flow__field label{
font-size: 0.8125rem;
font-weight: 600;
color: rgba(51, 65, 85, 0.78);
}
body.login-page:not(.signup-page) .login-flow__pw-row{
grid-template-columns: 1fr;
gap: 10px;
}
body.login-page:not(.signup-page) .login-page__forgot-btn{
display: block;
margin: 5px auto 0;
width: fit-content;
max-width: 100%;
padding: 0;
border: none;
background: none;
font: inherit;
font-size: 0.82rem;
font-weight: 550;
color: rgba(55, 65, 81, 0.84);
text-align: center;
text-decoration: none;
text-underline-offset: 3px;
cursor: pointer;
transition: color 160ms ease, text-decoration-color 160ms ease, opacity 160ms ease;
}
/* Attach the "Forgot password?" link to the reassurance row when both
are present (the primary login flow), reducing the vertical gap. */
body.login-page:not(.signup-page) .login-page__reassure + .login-page__forgot-btn{
margin-top: 1px;
}
body.login-page:not(.signup-page) .login-page__forgot-btn:hover{
color: rgba(11, 61, 46, 0.92);
text-decoration: underline;
opacity: 1;
}
body.login-page:not(.signup-page) .login-page__forgot-btn:focus-visible{
color: var(--accent);
text-decoration: underline;
outline: 2px solid rgba(11, 61, 46, 0.35);
outline-offset: 2px;
border-radius: 2px;
}
body.login-page:not(.signup-page) .login-page__forgot-btn--quiet{
margin-top: 14px;
font-size: 0.78rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.62);
}
/* Password-reset flows: calmer vertical rhythm inside the card */
body.login-page:not(.signup-page) .login-flow--forgot{
gap: 0;
}
body.login-page:not(.signup-page) .login-flow--forgot .login-flow__helper--intro{
margin: 0 0 16px;
font-size: 0.8125rem;
font-weight: 450;
line-height: 1.5;
color: rgba(71, 85, 105, 0.74);
}
body.login-page:not(.signup-page) .login-flow--forgot .login-flow__field{
margin: 0 0 16px;
}
body.login-page:not(.signup-page) .login-flow--forgot .login-flow__field label{
display: block;
margin: 0 0 7px;
}
body.login-page:not(.signup-page) .login-flow--forgot .login-flow__primary-btn{
margin-top: 0;
}
body.login-page:not(.signup-page) #loginSection.auth-section--pw-alt > .auth-section__head{
padding: 18px 22px 12px;
}
body.login-page:not(.signup-page) #loginSection.auth-section--pw-alt #loginSectionBody.auth-section__body{
padding: 4px 22px 20px;
}
/* Hide sign-in chrome on password-reset / confirmation flows */
body.login-page:not([data-auth-flow="login"]) #loginForgotBtn,
body.login-page:not([data-auth-flow="login"]) .login-page__signup-prompt,
body.login-page:not([data-auth-flow="login"]) #loginFlowLogin{
display: none !important;
}
/* Calm confirmation states (email sent, password updated) */
body.login-page:not(.signup-page) .login-flow--confirm{
gap: 0;
}
body.login-page:not(.signup-page) .login-flow--confirm .login-flow__confirm-msg{
margin: 0 0 14px;
max-width: 22rem;
font-size: 0.875rem;
font-weight: 450;
line-height: 1.55;
color: rgba(51, 65, 85, 0.8);
}
body.login-page:not(.signup-page) .login-flow--confirm .login-flow__confirm-note{
margin: 0 0 22px;
max-width: 22rem;
font-size: 0.78rem;
font-weight: 400;
line-height: 1.5;
color: rgba(100, 116, 139, 0.68);
}
body.login-page:not(.signup-page) .login-flow--confirm .login-flow__confirm-note .login-page__signup-cta--inline{
font-weight: 550;
}
body.login-page:not(.signup-page) .login-flow--confirm .login-flow__confirm-btn{
margin-top: 2px;
}
body.login-page:not(.signup-page) #loginSection.auth-section--pw-confirm > .auth-section__head{
padding: 20px 22px 14px;
}
body.login-page:not(.signup-page) #loginSection.auth-section--pw-confirm #loginSectionBody.auth-section__body{
padding: 8px 22px 24px;
}
/* Login card title (no green bar; matches in-card lede tone) */
body.login-page:not(.signup-page) #loginSection > .auth-section__head{
justify-content: flex-start;
gap: 0;
padding: 16px 22px 8px;
background: transparent;
border: none;
border-bottom: 1px solid rgba(17, 24, 39, 0.07);
box-shadow: none;
border-radius: 18px 18px 0 0;
cursor: default;
pointer-events: none;
}
body.login-page:not(.signup-page) #loginSection > .auth-section__head .auth-section__title{
color: rgba(15, 23, 32, 0.98);
font-size: 1.24rem;
font-weight: 800;
letter-spacing: -0.02em;
text-transform: none;
text-align: left;
width: 100%;
}
body.login-page:not(.signup-page):not(.invite-page) #loginSectionBody.auth-section__body{
padding: 14px 22px 16px;
}
body.login-page:not(.signup-page):not(.invite-page) #loginSection .auth-section__head + .auth-section__body{
border-radius: 0 0 18px 18px;
}
body.login-page:not(.signup-page):not(.invite-page) .container > .app-footer{
margin-top: auto;
flex-shrink: 0;
}
/* Signup page: field row — smaller type than login (login-page alone bumps .auth-section) */
body.login-page.signup-page .auth-section{
font-size: 100%;
}
body.login-page.signup-page .auth-section label{
font-size: 0.8125rem;
font-weight: 600;
}
/* Signup page: keep Name/Email/Password/Confirm visually identical */
body.login-page.signup-page #name,
body.login-page.signup-page #email,
body.login-page.signup-page #password,
body.login-page.signup-page #password2{
font-size: 0.9375rem;
line-height: 1.3;
}
/* Account setup: sliding step wizard */
body.account-setup-page .account-setup-wizard{
width: 100%;
max-width: var(--as-wizard-column);
margin-left: auto;
margin-right: auto;
margin-top: clamp(0px, 1.5vh, 8px);
margin-bottom: 8px;
--as-wizard-subeyebrow-size: clamp(0.92rem, 1.55vw, 1.05rem);
--as-wizard-title-subtitle-gap: clamp(0.34rem, 0.65vw, 0.48rem);
--as-wizard-progress-pct: 25%;
}
body.account-setup-page .account-setup-wizard__stepHead{
margin: 0 0 clamp(0.35rem, 0.75vw, 0.5rem);
padding: 0;
box-sizing: border-box;
}
body.account-setup-page .account-setup-wizard__stepLabel{
margin: 0 0 0.22rem;
text-align: center;
font-size: 0.625rem;
font-weight: 650;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.72);
}
body.account-setup-page .account-setup-wizard__progress{
box-sizing: border-box;
max-width: min(220px, 88%);
margin-left: auto;
margin-right: auto;
}
body.account-setup-page .account-setup-wizard__progressTrack{
height: 4px;
border-radius: 999px;
background: rgba(11, 61, 46, 0.09);
overflow: hidden;
}
body.account-setup-page .account-setup-wizard__progressFill{
display: block;
height: 100%;
width: var(--as-wizard-progress-pct, 25%);
max-width: 100%;
border-radius: inherit;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--accent) 72%, #1a4736),
color-mix(in srgb, var(--accent) 82%, #2d7a54)
);
transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.account-setup-page .account-setup-wizard__eyebrow{
margin: 0;
text-align: center;
font-size: clamp(1.42rem, 2.65vw, 1.72rem);
font-weight: 780;
color: var(--accent);
letter-spacing: -0.025em;
line-height: 1.1;
text-wrap: balance;
}
@media (min-width: 480px){
body.account-setup-page .account-setup-wizard__eyebrow{
white-space: nowrap;
}
}
body.account-setup-page .account-setup-wizard__reassurance{
margin: 0;
text-align: center;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.03em;
line-height: 1.25;
color: rgba(11, 61, 46, 0.46);
}
body.account-setup-page .account-setup-wizard__reassurance:not([hidden]){
margin-top: calc(var(--as-wizard-title-subtitle-gap) * 0.72);
}
body.account-setup-page .account-setup-wizard__subeyebrow{
margin: var(--as-wizard-title-subtitle-gap) 0 clamp(0.22rem, 0.45vw, 0.3rem);
text-align: center;
font-size: clamp(0.88rem, 1.35vw, 0.94rem);
font-weight: 500;
color: rgba(17, 24, 39, 0.64);
line-height: 1.35;
letter-spacing: 0.002em;
max-width: 30ch;
margin-left: auto;
margin-right: auto;
text-wrap: balance;
}
body.account-setup-page .account-setup-wizard__roadmap{
margin: 0 0 14px;
padding: 0 12px;
text-align: center;
font-size: clamp(0.8rem, 1.45vw, 0.92rem);
font-weight: 500;
color: rgba(17, 24, 39, 0.48);
line-height: 1.45;
letter-spacing: 0.02em;
}
body.account-setup-page .account-setup-wizard__roadmap-kicker{
font-weight: 600;
color: rgba(17, 24, 39, 0.55);
margin-right: 0.28em;
}
body.account-setup-page .account-setup-wizard__shell.auth-section.card{
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: var(--as-shell-min-height);
background: linear-gradient(180deg, #fff 0%, #fcfdfc 48%, #f8faf9 100%);
border: 1px solid rgba(11, 61, 46, 0.22);
border-radius: 17px;
box-shadow: var(--as-ultra-soft-card-shadow);
}
body.account-setup-page .account-setup-wizard__viewport{
overflow-x: hidden;
overflow-y: auto;
width: 100%;
flex: 1 1 auto;
min-height: calc(var(--as-shell-min-height) - var(--as-shell-actions-minh));
}
body.account-setup-page .account-setup-wizard__track{
min-height: 100%;
}
body.account-setup-page .account-setup-wizard__shell .account-setup-actions--shell{
flex-shrink: 0;
padding: 10px var(--as-card-pad-x) 12px;
margin: 0;
margin-top: auto;
border-top: 1px solid rgba(11, 61, 46, 0.08);
background: linear-gradient(180deg, rgba(248, 250, 249, 0.98) 0%, rgba(252, 253, 252, 1) 100%);
min-height: var(--as-shell-actions-minh);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: center;
column-gap: 16px;
row-gap: 0;
}
body.account-setup-page .account-setup-wizard__shell .account-setup-actions--shell.account-setup-actions--step3-success{
display: none;
}
/* Account setup wizard footers: canonical secondary + flex centering (colors from button.secondary) */
body.account-setup-page .account-setup-actions--shell #accountSetupBackBtn.secondary,
body.account-setup-page .account-setup-actions--shell #asTxCancelIncomeBtn.secondary,
body.account-setup-page .account-setup-actions--shell #asExpCancelBtn.secondary,
body.account-setup-page .account-setup-actions--shell #accountSetupSkipBtn.secondary{
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
flex-shrink: 0;
min-height: 44px;
padding: 10px 22px;
border-radius: 12px;
font-family: inherit;
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
cursor: pointer;
filter: none;
}
body.account-setup-page .account-setup-actions--shell #accountSetupBackBtn.secondary{
min-width: 5.75rem;
}
body.account-setup-page .account-setup-actions--shell #accountSetupBackBtn.secondary:hover,
body.account-setup-page .account-setup-actions--shell #asTxCancelIncomeBtn.secondary:hover,
body.account-setup-page .account-setup-actions--shell #asExpCancelBtn.secondary:hover,
body.account-setup-page .account-setup-actions--shell #accountSetupSkipBtn.secondary:hover{
filter: none;
}
body.account-setup-page .account-setup-trust-note{
margin: 0 0 12px;
text-align: center;
}
body.account-setup-page .account-setup-trust-note > :first-child{
font-size: 1.05em;
font-weight: 650;
color: #252525;
}
body.account-setup-page .account-setup-trust-note > * + *{
margin-top: 4px;
color: #5f6368;
font-weight: 500;
}
/* Onboarding refinement (2026-05): trust strip, quick chips,
success summary, slim footer, stronger survey selection, overlay messages. */
/* --- Trust microcopy strip under the wizard --- */
body.account-setup-page .account-setup-trust-strip-spacer{
height: clamp(0.12rem, 0.9vw, 0.35rem);
}
body.account-setup-page .account-setup-trust-strip{
display: none;
align-items: center;
gap: 6px;
margin: 8px auto 0;
padding: 3px 9px;
border-radius: 999px;
background: transparent;
border: none;
color: rgba(51, 65, 85, 0.78);
font-size: 0.78rem;
font-weight: 550;
letter-spacing: 0.012em;
line-height: 1.35;
}
body.account-setup-page .account-setup-trust-strip__icon{
width: 12px;
height: 12px;
color: rgba(71, 85, 105, 0.72);
display: inline-flex;
align-items: center;
}
body.account-setup-page .account-setup-trust-strip__icon svg{
width: 12px;
height: 12px;
stroke-width: 1.8;
}
body.account-setup-page .account-setup-trust-strip__items{
display: inline-flex;
align-items: center;
gap: 3px;
flex-wrap: wrap;
justify-content: center;
}
body.account-setup-page .account-setup-trust-strip__items > span[aria-hidden="true"]{
opacity: 0.55;
margin: 0 1px;
}
body.account-setup-page .grid > .account-setup-trust-strip{
display: flex;
}
@media (max-width: 520px){
body.account-setup-page .account-setup-trust-strip{
font-size: 0.68rem;
padding: 2px 6px;
}
}
/* --- Quick category chips above the search combobox --- */
body.account-setup-page .as-quick-chips{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 8px;
}
body.account-setup-page .as-quick-chip{
appearance: none;
border: 1px solid rgba(0,0,0,0.10);
background: #fff;
color: rgba(17, 24, 39, 0.78);
font: inherit;
font-size: 0.82rem;
font-weight: 500;
padding: 5px 11px;
border-radius: 999px;
cursor: pointer;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
body.account-setup-page .as-quick-chip:hover{
background: rgba(0,0,0,0.025);
border-color: rgba(0,0,0,0.16);
}
body.account-setup-page .as-quick-chip.is-active{
background: color-mix(in srgb, var(--accent) 10%, #fff);
border-color: color-mix(in srgb, var(--accent) 45%, rgba(0,0,0,0.10));
color: color-mix(in srgb, var(--accent) 80%, #000);
}
body.account-setup-page .as-quick-chip:focus-visible{
outline: 3px solid rgba(11, 61, 46, 0.18);
outline-offset: 2px;
}
/* Briefly highlight the category search after a chip selection. */
body.account-setup-page .category-search__input--prefilled{
background: color-mix(in srgb, var(--accent) 6%, #fff);
transition: background 600ms ease;
}
/* --- Success summary list (✓ N income / ✓ N expenses) --- */
body.account-setup-page .account-setup-success-summary{
list-style: none;
padding: 0;
margin: 0 auto 10px;
display: flex;
flex-direction: column;
gap: 5px;
max-width: 320px;
text-align: left;
}
body.account-setup-page .account-setup-success-summary > li{
display: flex;
align-items: center;
gap: 8px;
font-size: 0.94rem;
font-weight: 600;
color: rgba(17, 24, 39, 0.82);
}
body.account-setup-page .account-setup-success-summary__check{
display: inline-flex;
width: 18px;
height: 18px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 14%, #fff);
color: color-mix(in srgb, var(--accent) 80%, #000);
font-weight: 800;
font-size: 0.80rem;
flex: 0 0 auto;
}
body.account-setup-page .account-setup-success-summary__empty{
color: rgba(17, 24, 39, 0.55);
font-style: italic;
justify-content: center;
}
/* --- Loading overlay: rotating message + subtle shimmer on the bar --- */
.bw-build-overlay__message{
margin: 8px 0 0;
font-size: 0.92rem;
font-weight: 500;
color: rgba(17, 24, 39, 0.62);
letter-spacing: 0.01em;
min-height: 1.2em;
opacity: 0;
transform: translateY(2px);
transition: opacity 220ms ease, transform 220ms ease;
}
.bw-build-overlay__message--show{
opacity: 1;
transform: translateY(0);
}
.bw-build-overlay__barFill{
background-image: linear-gradient(
90deg,
color-mix(in srgb, var(--accent) 70%, #fff) 0%,
color-mix(in srgb, var(--accent) 88%, #fff) 50%,
color-mix(in srgb, var(--accent) 70%, #fff) 100%
);
background-size: 200% 100%;
animation: bw-build-shimmer 1600ms linear infinite;
}
@keyframes bw-build-shimmer{
from { background-position: 200% 0; }
to { background-position: 0 0; }
}
/* Steady fill uses inline width from signup.js (no sliding indeterminate bar). */
/* --- Slim onboarding footer --- */
.onboarding-footer{
margin: 12px auto 10px;
padding: 10px 16px 8px;
text-align: center;
border-top: 1px solid rgba(0, 0, 0, 0.07);
color: rgba(51, 65, 85, 0.72);
font-size: 0.84rem;
}
.onboarding-footer__brand{
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
text-decoration: none;
opacity: 0.88;
}
.onboarding-footer__logo{
height: 30px;
width: auto;
display: block;
}
.onboarding-footer__line{
margin: 0 0 3px;
font-weight: 500;
color: rgba(51, 65, 85, 0.76);
font-size: 0.84rem;
}
.onboarding-footer__legal{
margin: 0;
font-size: 0.8rem;
}
.onboarding-footer__legal a{
color: rgba(51, 65, 85, 0.68);
text-decoration: none;
margin: 0 2px;
}
.onboarding-footer__legal a:hover{
color: var(--accent);
text-decoration: underline;
}
.onboarding-footer__legal > span[aria-hidden="true"]{
opacity: 0.5;
}
/* --- Subtle polish: tighten form spacing + soften labels in onboarding only --- */
body.account-setup-page .account-setup-wizard__panel .form-row-h__label label{
font-size: 0.875rem;
font-weight: 600;
color: rgba(17, 24, 39, 0.78);
letter-spacing: 0.002em;
}
body.account-setup-page .account-setup-wizard__panel .form-row-h__field input::placeholder{
color: rgba(17, 24, 39, 0.46);
font-weight: 400;
}
body.account-setup-page .account-setup-wizard__panel .tx-add-vspace{
height: 7px;
}
body.account-setup-page .account-setup-wizard__panel .tx-add-vspace--lg{
height: 11px;
}
body.account-setup-page .account-setup-step3-intro-hint{
color: rgba(17, 24, 39, 0.58);
font-size: 0.95rem;
line-height: 1.5;
margin: 0 auto 14px;
max-width: 480px;
text-align: center;
}
body.account-setup-page .account-setup-duplicate-email__body{
margin: 0;
font-size: 1rem;
line-height: 1.55;
color: var(--text);
text-align: center;
}
body.account-setup-page .account-setup-duplicate-email__line{
display: block;
}
body.account-setup-page .account-setup-duplicate-email__login{
display: inline-block;
margin-top: 8px;
}
body.account-setup-page .account-setup-duplicate-email__body a{
font-weight: 700;
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
body.account-setup-page .account-setup-duplicate-email__body a:hover{
color: color-mix(in srgb, var(--accent) 88%, #000);
}
body.account-setup-page .account-setup-wizard__track{
display: block;
width: 100%;
}
body.account-setup-page .account-setup-wizard__panel{
display: none;
width: 100%;
box-sizing: border-box;
min-width: 0;
padding: var(--as-card-pad-y) var(--as-card-pad-x) calc(var(--as-card-pad-y) - 4px);
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
body.account-setup-page .account-setup-wizard__panel.account-setup-wizard__panel--active{
display: flex;
flex-direction: column;
min-height: 100%;
box-sizing: border-box;
}
body.account-setup-page .account-setup-wizard__panel > *{
width: 100%;
max-width: 100%;
}
body.account-setup-page .account-setup-wizard__panel.auth-section__body{
padding: var(--as-card-pad-y) var(--as-card-pad-x) calc(var(--as-card-pad-y) - 4px);
}
body.account-setup-page #accountSetupWizardPanel4.account-setup-wizard__panel.auth-section__body{
padding: var(--as-card-pad-y) var(--as-card-pad-x) calc(var(--as-card-pad-y) - 6px);
}
/* Step 1: title + fields from top (matches checking-account step) */
body.account-setup-page #accountSetupWizardPanel0{
justify-content: flex-start;
}
body.account-setup-page #accountSetupWizardPanel1,
body.account-setup-page #accountSetupWizardPanel2{
justify-content: flex-start;
}
/* Step panels: fill stable shell viewport (success / non-compact phases only) */
body.account-setup-page #accountSetupWizardPanel2.account-setup-wizard__panel[data-step3-phase="success"]{
min-height: 100%;
}
/* Step 0 login: hug content — no forced shell stretch */
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel0.account-setup-wizard__panel--active){
min-height: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel0.account-setup-wizard__panel--active) .account-setup-wizard__track{
min-height: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel0.account-setup-wizard__panel--active) .account-setup-wizard__viewport{
flex: 0 0 auto;
min-height: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel0.account-setup-wizard__panel--active) .account-setup-actions--shell{
margin-top: 0;
--as-shell-actions-minh: 0;
min-height: 0;
}
body.account-setup-page #accountSetupWizardPanel0.account-setup-wizard__panel--active{
min-height: 0;
flex: 0 0 auto;
padding: var(--as-card-pad-y) var(--as-card-pad-x) 2px;
}
/* Step 2 checking balance: hug content — no forced shell stretch */
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel1.account-setup-wizard__panel--active){
min-height: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel1.account-setup-wizard__panel--active) .account-setup-wizard__track{
min-height: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel1.account-setup-wizard__panel--active) .account-setup-wizard__viewport{
flex: 0 0 auto;
min-height: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel1.account-setup-wizard__panel--active) .account-setup-actions--shell{
margin-top: 0;
--as-shell-actions-minh: 0;
min-height: 0;
}
body.account-setup-page #accountSetupWizardPanel1.account-setup-wizard__panel--active{
min-height: 0;
flex: 0 0 auto;
padding: var(--as-card-pad-y) var(--as-card-pad-x) 2px;
}
/* Account setup: stacked accordion cards (legacy) */
body.account-setup-page .account-setup-cards{
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: min-content;
gap: 8px;
align-items: start;
}
body.account-setup-page .account-setup-card{
width: 100%;
}
/* Account setup: make fields more spacious */
body.account-setup-page .account-setup-card{
padding: 18px 14px;
}
body.account-setup-page .account-setup-card__toggle{
padding: 12px 14px;
}
body.account-setup-page .account-setup-card__body{
max-height: 5000px; /* avoid clipping when expanded */
}
body.account-setup-page .auth-section__body.account-setup-card__body{
padding: 18px 6px 10px;
}
body.account-setup-page .form-row-h__field input:not([type="checkbox"]):not([type="radio"]),
body.account-setup-page .form-row-h__field select{
padding: 12px 14px;
min-height: 48px;
font-size: 1rem;
font-weight: 500;
color: rgba(17, 24, 39, 0.94);
line-height: 1.35;
background: #fff;
border: 1px solid rgba(17, 24, 39, 0.34);
border-radius: 11px;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background-color 160ms ease;
}
body.account-setup-page .form-row-h__field input:not([type="checkbox"]):not([type="radio"]):hover,
body.account-setup-page .form-row-h__field select:hover{
border-color: rgba(11, 61, 46, 0.36);
box-shadow: 0 0 0 1px rgba(11, 61, 46, 0.1);
}
body.account-setup-page .form-row-h__field input:not([type="checkbox"]):not([type="radio"]):focus,
body.account-setup-page .form-row-h__field select:focus{
outline: none;
border-color: color-mix(in srgb, var(--accent) 52%, rgba(17, 24, 39, 0.22));
box-shadow: 0 0 0 3px rgba(11, 61, 46, 0.1);
background: #fff;
}
body.account-setup-page #accountSetupWizardPanel0 #email,
body.account-setup-page #accountSetupWizardPanel0 #password,
body.account-setup-page #accountSetupWizardPanel0 #password2{
font-size: 0.95rem;
line-height: 1.35;
min-height: 48px;
padding-top: 12px;
padding-bottom: 12px;
}
body.account-setup-page #accountSetupWizardPanel0 .password-field > #password,
body.account-setup-page #accountSetupWizardPanel0 .password-field > #password2{
padding-right: 2.85rem;
}
body.login-page.signup-page .auth-section__body .password-field > input{
width: 100%;
box-sizing: border-box;
padding-right: 2.85rem;
}
/* Integrated currency field: $ inset inside input, single border */
body.account-setup-page .form-row-h__field .money-input.money-input--currency{
--money-prefix-inset: 14px;
--money-prefix-gap: 5px;
position: relative;
display: block;
background: #fff;
border: 1px solid rgba(17, 24, 39, 0.34);
border-radius: 11px;
overflow: hidden;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background-color 160ms ease;
}
body.account-setup-page .form-row-h__field .money-input:not(.money-input--currency){
position: relative;
display: block;
background: #fff;
border: 1px solid rgba(17, 24, 39, 0.34);
border-radius: 11px;
overflow: hidden;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background-color 160ms ease;
}
body.account-setup-page .form-row-h__field .money-input:hover{
border-color: rgba(11, 61, 46, 0.36);
box-shadow: 0 0 0 1px rgba(11, 61, 46, 0.08);
}
body.account-setup-page .form-row-h__field .money-input:focus-within{
border-color: color-mix(in srgb, var(--accent) 52%, rgba(17, 24, 39, 0.22));
box-shadow: 0 0 0 3px rgba(11, 61, 46, 0.1);
background: #fff;
}
body.account-setup-page .form-row-h__field .money-input.money-input--currency .money-input__prefix{
position: absolute;
left: var(--money-prefix-inset);
top: 50%;
transform: translateY(-50%);
padding: 0;
margin: 0;
border: 0;
background: transparent;
color: rgba(71, 85, 105, 0.62);
font-size: 1.0625rem;
font-weight: 500;
line-height: 1;
pointer-events: none;
z-index: 1;
}
body.account-setup-page .form-row-h__field .money-input__prefix{
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-52%);
padding: 0;
margin: 0;
border: 0;
background: transparent;
color: rgba(100, 116, 139, 0.78);
font-size: 1rem;
font-weight: 500;
line-height: 1;
pointer-events: none;
z-index: 1;
}
body.account-setup-page .form-row-h__field .money-input.money-input--currency input{
display: block;
width: 100%;
box-sizing: border-box;
min-height: 48px;
padding: 12px 14px 12px calc(var(--money-prefix-inset) + 0.58rem + var(--money-prefix-gap));
border: none;
border-radius: 0;
background: transparent;
font-size: 1rem;
font-weight: 500;
line-height: 1.35;
font-variant-numeric: tabular-nums;
color: rgba(17, 24, 39, 0.94);
}
body.account-setup-page .form-row-h__field .money-input.money-input--currency input::placeholder{
color: rgba(148, 163, 184, 0.95);
font-weight: 400;
}
body.account-setup-page .form-row-h__field .money-input input{
display: block;
width: 100%;
box-sizing: border-box;
min-height: 54px;
padding: 15px 14px 15px 2rem;
border: none;
border-radius: 0;
background: transparent;
font-size: 1rem;
font-weight: 500;
line-height: 1.35;
color: rgba(17, 24, 39, 0.94);
}
body.account-setup-page .form-row-h__field .money-input input::placeholder{
color: rgba(17, 24, 39, 0.44);
font-weight: 400;
}
body.account-setup-page .form-row-h__field .money-input input:focus{
outline: none;
box-shadow: none;
}
body.account-setup-page .account-setup-step3-form .tx-add-schedule-toolbar input:not([type="radio"]):not([type="checkbox"]),
body.account-setup-page .account-setup-step3-form .tx-add-schedule-toolbar select{
min-height: 38px;
padding: 6px 11px;
font-size: 0.9375rem;
line-height: 1.3;
}
body.account-setup-page .account-setup-step3-form .tx-add-schedule-toolbar__left .tx-add-schedule-field--end-mode .tx-add-recurrence-select{
max-width: 9.5rem;
width: 100%;
}
body.account-setup-page .form-row-h__field > .category-search{
width: 100%;
max-width: none;
}
body.account-setup-page .category-search{
position: relative;
width: 100%;
}
body.account-setup-page .category-search__list{
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
z-index: 50;
margin: 0;
padding: 6px 0;
list-style: none;
max-height: min(280px, 45vh);
overflow-y: auto;
background: var(--cal-surface);
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
body.account-setup-page .category-search__group-label{
padding: calc(8px * 0.92) calc(12px * 0.92) calc(4px * 0.92);
font-size: calc(10px * 0.92);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted);
pointer-events: none;
}
body.account-setup-page .category-search__option{
padding: calc(9px * 0.92) calc(12px * 0.92);
font-size: calc(16px * 0.92);
cursor: pointer;
color: var(--text);
line-height: 1.35;
}
body.account-setup-page .category-search__option:hover,
body.account-setup-page .category-search__option.category-search__option--active{
background: rgba(11, 61, 46, 0.1);
}
body.account-setup-page .category-search__option mark{
background: transparent;
color: var(--accent);
font-weight: 700;
}
body.account-setup-page .category-search__option--create{
display: flex;
align-items: baseline;
gap: 6px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
margin-top: 2px;
padding-top: calc(10px * 0.92);
font-weight: 500;
}
body.account-setup-page .category-search__option--create:hover,
body.account-setup-page .category-search__option--create.category-search__option--active{
background: color-mix(in srgb, rgb(34, 120, 72) 10%, transparent);
}
body.account-setup-page .category-search__plus{
flex-shrink: 0;
font-weight: 600;
color: color-mix(in srgb, rgb(34, 120, 72) 75%, var(--muted));
}
body.account-setup-page .category-search__create-text{
color: color-mix(in srgb, rgb(34, 120, 72) 55%, var(--muted));
font-size: calc(14px * 0.92);
}
/* Account setup: slightly larger Expense/Income toggle text */
body.account-setup-page .kind-toggle .kind-opt{
font-size: calc(16px * 0.92);
}
/* Account setup: tighten label → field spacing (e.g., Last Name) */
body.account-setup-page .form-row-h{
gap: 10px 10px;
}
body.account-setup-page .form-row-h__label{
flex: 0 0 6.75rem;
max-width: 28%;
}
body.account-setup-page .form-row-h__label label{
font-size: calc(11px * 1.12);
}
/* Step 1: one column; widest label sets column so all inputs share one vertical edge */
body.account-setup-page #accountSetupWizardPanel0 .form-row-h__label{
flex: 0 0 11.25rem;
max-width: 44%;
}
body.account-setup-page #accountSetupWizardPanel0 .form-row-h__label label{
white-space: nowrap;
color: rgba(17, 24, 39, 0.64);
font-weight: 560;
text-align: left;
}
/* Account setup: Step 1 uses top-stacked labels */
body.account-setup-page #accountSetupWizardPanel0 .form-row-h{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
}
body.account-setup-page .account-setup-field-spacer{
height: 7px;
flex-shrink: 0;
}
body.account-setup-page .account-setup-step2-groups{
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
}
body.account-setup-page .account-setup-field-group{
margin: 0;
padding: 0;
border: 0;
}
body.account-setup-page .account-setup-field-group + .account-setup-field-group{
margin-top: 0.8rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(11, 61, 46, 0.08);
}
body.account-setup-page .account-setup-field-group__title{
margin: 0 0 0.38rem;
font-size: 0.625rem;
font-weight: 750;
letter-spacing: 0.078em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.78);
line-height: 1.25;
}
body.account-setup-page .account-setup-field-group__fields{
display: flex;
flex-direction: column;
}
body.account-setup-page .account-setup-field-group--buffer .account-setup-field-group__title{
margin-bottom: 0.32rem;
}
body.account-setup-page #accountSetupWizardPanel0 .form-row-h__label{
flex: 0 0 auto;
max-width: none;
}
body.account-setup-page #accountSetupWizardPanel0 .form-row-h__label label{
text-align: left;
font-size: 0.8125rem;
font-weight: 650;
color: rgba(17, 24, 39, 0.8);
}
/* Step 2: full-width rows + wider label column so uppercase labels stay on one line */
body.account-setup-page #accountSetupWizardPanel1 .form-row-h{
align-items: center;
}
body.account-setup-page #accountSetupWizardPanel1 .form-row-h__label{
flex: 0 0 12.25rem;
max-width: 42%;
}
body.account-setup-page #accountSetupWizardPanel1 .form-row-h__label label{
white-space: nowrap;
color: #556173;
font-weight: 400;
}
/* Account setup: Step 2 uses top-stacked labels */
body.account-setup-page #accountSetupWizardPanel1 .form-row-h{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 5px;
margin-bottom: 0;
}
body.account-setup-page #accountSetupWizardPanel1 .form-row-h__label label{
font-size: 0.875rem;
font-weight: 600;
color: rgba(17, 24, 39, 0.78);
}
body.account-setup-page #accountSetupWizardPanel1 .account-setup-field-spacer{
height: 6px;
}
body.account-setup-page #accountSetupWizardPanel1 .form-row-h__label{
flex: 0 0 auto;
max-width: none;
}
/* Account setup: Step 3/4 transaction forms use top-stacked labels */
body.account-setup-page #accountSetupWizardPanel2 .account-setup-step3-form__body .form-row-h,
body.account-setup-page #accountSetupWizardPanel3 .account-setup-step3-form__body .form-row-h{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
}
body.account-setup-page #accountSetupWizardPanel2 .account-setup-step3-form__body .form-row-h__label,
body.account-setup-page #accountSetupWizardPanel3 .account-setup-step3-form__body .form-row-h__label{
flex: 0 0 auto;
max-width: none;
}
body.account-setup-page #accountSetupWizardPanel2 .account-setup-step3-form__body .form-row-h__label label,
body.account-setup-page #accountSetupWizardPanel3 .account-setup-step3-form__body .form-row-h__label label{
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--as-label-primary-color);
line-height: 1.3;
text-align: left;
}
body.account-setup-page .account-setup-step3-form .account-setup-repeat-duo__label{
font-size: var(--as-helper-size);
font-weight: 400;
letter-spacing: 0.01em;
text-transform: none;
color: var(--as-label-secondary-color);
line-height: 1.35;
text-align: left;
}
body.account-setup-page #accountSetupWizardPanel2 .account-setup-step3-form__body .form-row-h__field,
body.account-setup-page #accountSetupWizardPanel3 .account-setup-step3-form__body .form-row-h__field{
width: 100%;
}
body.account-setup-page .account-setup-step2-lede{
display: none;
}
body.account-setup-page #accountSetupWizardPanel1 .form-row-h__field input#accountName{
cursor: text;
}
body.account-setup-page .account-setup-field-hint{
margin: 4px 0 0;
font-size: var(--as-helper-size);
line-height: var(--as-helper-line);
font-weight: 400;
color: var(--as-helper-color);
}
body.account-setup-page #accountSetupWizardPanel0 .account-setup-field-hint{
font-size: 0.74rem;
font-weight: 400;
line-height: 1.38;
color: rgba(100, 116, 139, 0.7);
}
body.account-setup-page #accountSetupWizardPanel1 .account-setup-field-hint--micro{
margin: 2px 0 0;
font-size: 0.65rem;
line-height: 1.32;
font-weight: 400;
color: rgba(100, 116, 139, 0.52);
}
body.account-setup-page .account-setup-field-hint--tight{
margin: 0;
}
body.account-setup-page .account-setup-field-hint--micro{
margin: 1px 0 0;
font-size: 0.67rem;
line-height: 1.28;
font-weight: 400;
color: rgba(100, 116, 139, 0.58);
}
body.account-setup-page .account-setup-category-picker{
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px 12px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
background: rgba(17, 24, 39, 0.018);
}
body.account-setup-page .account-setup-category-picker .as-quick-chips{
margin: 0;
}
body.account-setup-page .account-setup-step3-intro{
width: 100%;
max-width: 100%;
}
body.account-setup-page .account-setup-step3-q{
margin: 0 0 14px;
font-size: 1rem;
line-height: 1.45;
text-align: center;
color: var(--text);
font-weight: 700;
}
body.account-setup-page .account-setup-step3-q.account-setup-step3-q--success{
color: var(--ok);
font-weight: 750;
}
body.account-setup-page .account-setup-step3-intro-hint{
margin: 0 auto 16px;
max-width: 460px;
font-size: 0.92rem;
line-height: 1.52;
text-align: center;
color: rgba(0, 0, 0, 0.66);
}
body.account-setup-page .account-setup-step3-radios{
display: flex;
flex-wrap: wrap;
gap: 16px 24px;
justify-content: center;
align-items: center;
margin-top: 6px;
}
body.account-setup-page .account-setup-step3-radio{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
}
body.account-setup-page .account-setup-step3-radio input{
width: 1.1rem;
height: 1.1rem;
accent-color: var(--accent);
}
body.account-setup-page .account-setup-tx-choice-wrap{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
width: 100%;
max-width: 100%;
margin: 0;
}
body.account-setup-page .account-setup-tx-choice-row{
display: flex;
flex-direction: column;
gap: 12px;
align-items: stretch;
width: 100%;
}
body.account-setup-page .account-setup-tx-choice-row .top-nav__logout{
width: 100%;
justify-content: center;
box-sizing: border-box;
}
body.account-setup-page .account-setup-tx-skip-link{
align-self: flex-end;
margin: 0;
padding: 4px 0;
background: none;
border: none;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
line-height: 1.35;
color: var(--text);
cursor: pointer;
text-align: right;
text-decoration: none;
}
body.account-setup-page .account-setup-tx-skip-link:hover{
text-decoration: underline;
}
body.account-setup-page .account-setup-tx-skip-link:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
body.account-setup-page .account-setup-tx-skip-link:disabled{
opacity: 0.45;
cursor: not-allowed;
}
body.account-setup-page .account-setup-tx-continue-btn{
align-self: flex-end;
width: auto;
min-width: 9.25rem;
justify-content: center;
background: var(--accent);
border-color: rgba(0, 0, 0, 0.10);
color: #fff;
}
body.account-setup-page .account-setup-tx-continue-btn:hover{
background: color-mix(in srgb, var(--accent) 92%, #000);
border-color: rgba(0, 0, 0, 0.16);
filter: none;
}
body.account-setup-page .account-setup-tx-continue-btn:focus-visible{
outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: 3px;
}
body.account-setup-page .account-setup-tx-choice-row > .top-nav__logout{
border-radius: 999px;
border-width: 2px;
border-style: solid;
box-sizing: border-box;
}
/* Hub: primary income vs outlined expense */
body.account-setup-page #asTxHubAddIncomeBtn{
background: var(--accent);
color: #fff;
border-color: color-mix(in srgb, var(--accent) 80%, #000);
}
body.account-setup-page #asTxHubAddIncomeBtn:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 90%, #000);
border-color: color-mix(in srgb, var(--accent) 68%, #000);
color: #fff;
filter: none;
}
body.account-setup-page #asTxHubAddExpenseBtn{
background: var(--cal-surface);
color: var(--accent);
border-color: var(--accent);
}
body.account-setup-page #asTxHubAddExpenseBtn:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 7%, #fff);
border-color: color-mix(in srgb, var(--accent) 75%, #000);
color: var(--accent);
filter: none;
}
body.account-setup-page .account-setup-tx-choice-row > .top-nav__logout:disabled{
background: rgba(255, 255, 255, 0.85);
color: rgba(75, 85, 99, 0.45);
border-color: rgba(75, 85, 99, 0.28);
cursor: not-allowed;
filter: none;
box-shadow: none;
}
body.account-setup-page .account-setup-actions .top-nav__logout:disabled:not(#signupBtn){
background: #fff;
color: rgba(75, 85, 99, 0.55);
border-color: rgba(75, 85, 99, 0.35);
cursor: not-allowed;
filter: none;
opacity: 1;
}
body.account-setup-page .account-setup-tx-choice-row > .top-nav__logout:focus-visible{
outline: none;
border-color: color-mix(in srgb, var(--accent) 62%, #000);
box-shadow: 0 2px 10px rgba(11, 61, 46, 0.14);
}
body.account-setup-page #asTxHubAddIncomeBtn:focus-visible:not(:disabled){
border-color: color-mix(in srgb, var(--accent) 58%, #000);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
body.account-setup-page #asTxHubAddExpenseBtn:focus-visible:not(:disabled){
border-color: color-mix(in srgb, var(--accent) 62%, #000);
box-shadow: 0 2px 10px rgba(11, 61, 46, 0.12);
}
/* Account setup: survey step (final wizard step — warm, tactile, lightweight) */
body.account-setup-page .account-setup-survey{
width: 100%;
max-width: 100%;
text-align: center;
display: flex;
flex-direction: column;
gap: 2px;
}
body.account-setup-page .account-setup-survey__hint{
margin: 0 auto 1px;
max-width: 560px;
text-align: center;
font-size: 0.62rem;
font-weight: 450;
line-height: 1.28;
letter-spacing: 0.045em;
text-transform: none;
color: rgba(100, 116, 139, 0.48);
}
body.account-setup-page .account-setup-survey__options{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
width: 100%;
}
body.account-setup-page .account-setup-survey__title{
margin: 0 0 8px;
font-size: 1.05rem;
font-weight: 800;
color: var(--text);
}
body.account-setup-page .account-setup-survey__sublede{
margin: 0 auto 14px;
max-width: 460px;
text-align: center;
font-size: 0.92rem;
color: rgba(17, 24, 39, 0.62);
}
body.account-setup-page .account-setup-survey__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 10px;
justify-content: center;
max-width: 100%;
margin: 0;
}
body.account-setup-page .account-setup-survey__opt{
position: relative;
border: 1px solid rgba(17, 24, 39, 0.075);
border-radius: 10px;
padding: 4px 9px;
min-height: 38px;
box-sizing: border-box;
background: #fff;
color: var(--text);
font: inherit;
font-weight: 500;
cursor: pointer;
text-align: left;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 6px;
transition:
border-color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
background 0.22s cubic-bezier(0.22, 1, 0.36, 1),
color 0.22s ease,
box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
body.account-setup-page .account-setup-survey__opt:hover{
background: linear-gradient(180deg, #fffefb 0%, #fafbfc 100%);
border-color: rgba(11, 61, 46, 0.13);
box-shadow:
0 2px 8px rgba(11, 61, 46, 0.05),
0 1px 0 rgba(255, 255, 255, 0.85) inset;
transform: translateY(-1px);
filter: none;
}
body.account-setup-page .account-setup-survey__opt:focus-visible{
outline: none;
border-color: rgba(11, 61, 46, 0.28);
box-shadow:
0 0 0 3px rgba(11, 61, 46, 0.1),
0 2px 10px rgba(11, 61, 46, 0.05);
}
body.account-setup-page .account-setup-survey__opt.is-active:focus-visible{
box-shadow:
0 0 0 3px rgba(217, 119, 6, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.85),
0 2px 12px rgba(180, 83, 9, 0.08);
}
@media (prefers-reduced-motion: reduce){
body.account-setup-page .account-setup-survey__opt{
transition-duration: 0.01ms;
}
body.account-setup-page .account-setup-survey__opt:hover{
transform: none;
}
}
body.account-setup-page .account-setup-survey__opt.is-active{
border-color: rgba(217, 119, 6, 0.28);
background: linear-gradient(180deg, rgba(255, 251, 235, 0.98) 0%, rgba(254, 252, 247, 0.99) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.85),
0 2px 10px rgba(180, 83, 9, 0.07),
0 1px 2px rgba(11, 61, 46, 0.04);
font-weight: 600;
color: rgba(55, 48, 35, 0.92);
transform: translateY(0);
padding-right: 24px;
}
body.account-setup-page .account-setup-survey__opt.is-active::after{
content: "✓";
position: absolute;
top: 3px;
right: 5px;
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 800;
border-radius: 999px;
color: #fff;
background: linear-gradient(145deg, #d97706 0%, #b45309 100%);
box-shadow: 0 1px 2px rgba(180, 83, 9, 0.25);
}
body.account-setup-page .account-setup-survey__opt.is-active .account-setup-survey__label{
color: rgba(55, 48, 35, 0.94);
font-weight: 620;
}
body.account-setup-page .account-setup-survey__opt.is-active .account-setup-survey__icon{
color: rgba(180, 83, 9, 0.72);
}
body.account-setup-page .account-setup-survey__label{
font-size: 0.76rem;
font-weight: 540;
line-height: 1.2;
color: rgba(17, 24, 39, 0.86);
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
body.account-setup-page .account-setup-survey__icon{
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(100, 116, 139, 0.55);
flex: 0 0 auto;
}
body.account-setup-page .account-setup-survey__icon svg{
width: 14px;
height: 14px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
body.account-setup-page .account-setup-survey__other{
margin-top: 0;
}
body.account-setup-page .account-setup-survey__otherLabel{
display: block;
margin-bottom: 5px;
font-size: 12px;
color: rgba(100, 116, 139, 0.76);
font-weight: 600;
}
body.account-setup-page .account-setup-survey__optional{
font-weight: 500;
font-size: 11px;
opacity: 0.8;
}
body.account-setup-page .account-setup-survey__otherInput{
width: min(560px, 100%);
padding: 10px 11px;
font-size: 0.92rem;
}
/* Step 4: final onboarding moment — upper-middle anchor, confident scale */
body.account-setup-page #accountSetupWizard[data-step="4"]{
max-width: min(580px, 92vw);
margin-top: 0;
margin-bottom: 0;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__stepHead{
margin-bottom: 0.35rem;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__stepLabel{
margin-bottom: 0.28rem;
font-size: 0.65rem;
letter-spacing: 0.11em;
color: rgba(11, 61, 46, 0.68);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__eyebrow{
margin: 0 auto;
max-width: 22ch;
font-size: clamp(1.34rem, 3vw, 1.62rem);
font-weight: 800;
letter-spacing: -0.022em;
line-height: 1.14;
white-space: normal;
text-wrap: balance;
color: color-mix(in srgb, var(--accent) 94%, #0a2418);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__subeyebrow{
margin: var(--as-wizard-title-subtitle-gap) auto 0.42rem;
max-width: 34ch;
font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
font-weight: 500;
line-height: 1.38;
letter-spacing: 0.002em;
color: rgba(51, 65, 85, 0.7);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__roadmap{
margin: 0 0 6px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__shell.auth-section.card{
min-height: 0;
border-color: rgba(11, 61, 46, 0.2);
box-shadow:
0 2px 6px rgba(15, 23, 42, 0.04),
0 12px 36px rgba(11, 61, 46, 0.09),
0 1px 0 rgba(255, 255, 255, 0.75) inset;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__track,
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel4.account-setup-wizard__panel--active) .account-setup-wizard__track{
min-height: 0;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__viewport,
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel4.account-setup-wizard__panel--active) .account-setup-wizard__viewport{
flex: 0 0 auto;
min-height: 0;
}
body.account-setup-page #accountSetupWizardPanel4.account-setup-wizard__panel--active{
min-height: 0;
flex: 0 0 auto;
padding: 16px 32px 10px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__shell.auth-section.card{
margin-top: 0;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey{
width: 100%;
max-width: 100%;
margin-inline: 0;
gap: 10px;
align-self: stretch;
text-align: left;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__options{
width: 100%;
max-width: 100%;
margin-inline: 0;
gap: 10px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__hint{
margin: 0 0 4px;
max-width: 100%;
text-align: left;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.35;
letter-spacing: 0.01em;
color: rgba(100, 116, 139, 0.72);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__grid{
gap: 9px 12px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__opt{
min-height: 48px;
padding: 9px 12px;
gap: 9px;
border-color: rgba(17, 24, 39, 0.16);
border-radius: 11px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__opt:hover{
border-color: rgba(11, 61, 46, 0.28);
background: #fff;
box-shadow: 0 4px 14px rgba(11, 61, 46, 0.1);
transform: translateY(-1px);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__opt.is-active{
border-color: rgba(11, 61, 46, 0.32);
background: color-mix(in srgb, var(--accent) 9%, #fff);
color: rgba(11, 61, 46, 0.94);
box-shadow:
0 0 0 1px rgba(11, 61, 46, 0.08),
0 2px 8px rgba(11, 61, 46, 0.1);
padding-right: 28px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__opt.is-active::after{
background: linear-gradient(145deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 82%, #000) 100%);
box-shadow: 0 1px 2px rgba(11, 61, 46, 0.2);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__opt.is-active .account-setup-survey__label{
color: rgba(11, 61, 46, 0.92);
font-weight: 600;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__opt.is-active .account-setup-survey__icon{
color: rgba(11, 61, 46, 0.62);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__label{
font-size: 0.875rem;
font-weight: 550;
line-height: 1.32;
color: rgba(30, 41, 59, 0.9);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__icon{
width: 20px;
height: 20px;
color: rgba(71, 85, 105, 0.72);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__icon svg{
width: 20px;
height: 20px;
stroke-width: 2;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__finish-note{
margin: 4px 0 0;
font-size: 0.8125rem;
line-height: 1.35;
font-weight: 500;
color: rgba(100, 116, 139, 0.7);
text-align: center;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__other{
margin-top: 4px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__shell .account-setup-actions--shell{
width: 100%;
max-width: none;
box-sizing: border-box;
padding: 12px 32px 14px;
margin-top: 2px;
min-height: 60px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 16px;
border-top: 1px solid rgba(11, 61, 46, 0.09);
background: linear-gradient(180deg, rgba(248, 250, 249, 0.5) 0%, rgba(252, 253, 252, 0.95) 100%);
box-shadow: none;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-actions__cluster{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 12px;
width: auto;
min-height: 0;
flex: 1 1 auto;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-actions__forward{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-left: auto;
flex: 0 0 auto;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-actions--shell #accountSetupBackBtn.secondary{
flex: 0 0 auto;
order: 1;
font-size: 0.875rem;
padding: 10px 16px;
border-radius: 10px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__shell .account-setup-actions--shell #signupBtn{
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
order: 2;
min-height: 46px;
height: 46px;
min-width: 10.75rem;
padding: 0 26px;
max-width: none;
font-size: 0.9375rem;
font-weight: 750;
line-height: 1.2;
letter-spacing: 0.012em;
white-space: nowrap;
border-radius: 11px;
box-shadow:
0 1px 2px rgba(11, 61, 46, 0.16),
0 8px 22px rgba(11, 61, 46, 0.22);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__shell .account-setup-actions--shell #signupBtn:hover:not(:disabled){
box-shadow:
0 2px 5px rgba(11, 61, 46, 0.18),
0 10px 26px rgba(11, 61, 46, 0.28);
transform: translateY(-1px);
}
@media (max-height: 780px){
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__stepHead{
margin-bottom: 0.22rem;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__eyebrow{
font-size: clamp(1.22rem, 2.6vw, 1.44rem);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__subeyebrow{
margin-bottom: 0.28rem;
font-size: 0.84rem;
line-height: 1.32;
}
body.account-setup-page #accountSetupWizardPanel4.account-setup-wizard__panel--active{
padding-top: 12px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__opt{
min-height: 44px;
padding: 7px 10px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__grid{
gap: 7px 9px;
}
}
body.account-setup-page #accountSetupWizard[data-step="4"] + .account-setup-trust-strip-spacer{
height: 0;
min-height: 0;
}
body.account-setup-page #accountSetupWizard[data-step="4"] ~ .account-setup-trust-strip{
margin-top: -4px;
margin-bottom: 6px;
color: rgba(17, 24, 39, 0.46);
font-size: 0.68rem;
}
body.account-setup-page #accountSetupWizard[data-step="4"] ~ .account-setup-trust-strip .account-setup-trust-strip__icon{
color: rgba(71, 85, 105, 0.42);
}
body.account-setup-page #accountSetupWizard[data-step="4"] ~ .account-setup-trust-strip .account-setup-trust-strip__items{
gap: 0 3px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] ~ .account-setup-trust-strip .account-setup-trust-strip__items > span[aria-hidden="true"]{
margin: 0;
opacity: 0.38;
}
@media (max-width: 560px){
body.account-setup-page .account-setup-survey__grid{
grid-template-columns: 1fr;
gap: 6px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__options{
max-width: 100%;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__hint{
text-align: center;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-survey__grid{
grid-template-columns: 1fr;
gap: 8px;
}
body.account-setup-page .container > .grid:has(#accountSetupWizard[data-step="4"]){
justify-content: flex-start;
padding-top: 8px;
max-width: min(580px, 94vw);
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__eyebrow{
font-size: clamp(1.22rem, 4.5vw, 1.48rem);
line-height: 1.16;
max-width: 20ch;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__subeyebrow{
max-width: 32ch;
}
body.account-setup-page #accountSetupWizardPanel4.account-setup-wizard__panel--active{
padding: 14px 22px 8px;
}
body.account-setup-page #accountSetupWizard[data-step="4"] .account-setup-wizard__shell .account-setup-actions--shell{
padding: 10px 22px 12px;
justify-content: space-between;
flex-wrap: nowrap;
gap: 12px;
}
}
body.account-setup-page .account-setup-step3-form{
width: 100%;
max-width: 100%;
}
body.account-setup-page .account-setup-step3-form__success{
width: 100%;
padding: 12px 14px 6px;
margin: 0;
text-align: center;
font-weight: 750;
color: rgba(11, 61, 46, 0.92);
font-size: 1rem;
}
body.account-setup-page #accountSetupStep3Success .account-setup-step3-form__successText,
body.account-setup-page #accountSetupStep3Success .account-setup-step3-form__successSubtext,
body.account-setup-page #accountSetupStep3Success .account-setup-step3-form__successNote{
display: none;
}
body.account-setup-page #accountSetupStep3Success .account-setup-step3-form__optionalLabel{
margin: 0 0 8px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.72);
}
body.account-setup-page .account-setup-step3-form__successActions{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
margin: 0;
}
body.account-setup-page .account-setup-step3-form__successActions .top-nav__logout{
width: min(276px, 100%);
border-radius: 999px;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
background: #fff;
color: rgba(11, 61, 46, 0.82);
border-color: rgba(11, 61, 46, 0.16);
box-shadow: none;
font-size: 0.9rem;
font-weight: 600;
padding-top: 7px;
padding-bottom: 7px;
}
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddIncomeBtn{
background: #fff;
color: rgba(11, 61, 46, 0.82);
border-color: rgba(11, 61, 46, 0.16);
}
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddIncomeBtn:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 4%, #fff);
border-color: rgba(11, 61, 46, 0.24);
color: rgba(11, 61, 46, 0.9);
filter: none;
}
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddExpenseBtn{
background: #fff;
color: rgba(11, 61, 46, 0.82);
border-color: rgba(11, 61, 46, 0.16);
}
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddExpenseBtn:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 4%, #fff);
border-color: rgba(11, 61, 46, 0.24);
color: rgba(11, 61, 46, 0.9);
filter: none;
}
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddIncomeBtn.account-setup-success-secondary,
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddExpenseBtn.account-setup-success-secondary{
background: #fff;
color: rgba(75, 85, 99, 0.72);
border-color: rgba(148, 163, 184, 0.44);
filter: none;
}
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddIncomeBtn.account-setup-success-secondary:hover:not(:disabled),
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddExpenseBtn.account-setup-success-secondary:hover:not(:disabled){
background: rgba(0, 0, 0, 0.02);
border-color: rgba(75, 85, 99, 0.45);
}
body.account-setup-page .account-setup-step3-form__successActions .top-nav__logout:focus-visible:not(:disabled){
outline: none;
}
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddIncomeBtn:focus-visible:not(:disabled):not(.account-setup-success-secondary){
border-color: color-mix(in srgb, var(--accent) 58%, #000);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
body.account-setup-page .account-setup-step3-form__successActions #asStep3SuccessAddExpenseBtn:focus-visible:not(:disabled):not(.account-setup-success-secondary){
border-color: color-mix(in srgb, var(--accent) 62%, #000);
box-shadow: 0 2px 10px rgba(11, 61, 46, 0.12);
}
body.account-setup-page .account-setup-step3-form__successActions .top-nav__logout.account-setup-success-secondary:focus-visible:not(:disabled){
border-color: rgba(55, 65, 81, 0.48);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
@media (max-width: 560px){
body.account-setup-page .account-setup-step3-form__successActions .top-nav__logout{
width: 100%;
}
}
body.account-setup-page .account-setup-step3-form__successActions .top-nav__logout:disabled{
background: #fff;
color: rgba(75, 85, 99, 0.55);
border-color: rgba(75, 85, 99, 0.35);
cursor: not-allowed;
filter: none;
}
body.account-setup-page #accountSetupStep3Success .account-setup-step3-form__continueBtn{
display: inline-flex;
align-items: center;
justify-content: center;
margin: 12px auto 0;
min-width: 168px;
border-radius: 12px;
font-size: 0.98rem;
font-weight: 700;
padding: 10px 18px;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2.account-setup-wizard__panel--active[data-after-save="1"]) .account-setup-wizard__viewport{
min-height: 0;
}
body.account-setup-page #accountSetupWizardPanel2[data-after-save="1"] .account-setup-step3-form__body,
body.account-setup-page #accountSetupWizardPanel3[data-after-save="1"] .account-setup-step3-form__body{
display: none;
}
body.account-setup-page #accountSetupWizardPanel2[data-after-save="1"] .account-setup-step3-form__success,
body.account-setup-page #accountSetupWizardPanel3[data-after-save="1"] .account-setup-step3-form__success{
display: block !important;
}
body.account-setup-page .account-setup-kind-toggle--income-only .kind-opt:has(input[value="expense"]){
display: none;
}
body.account-setup-page .account-setup-kind-toggle--expense-only .kind-opt:has(input[value="income"]){
display: none;
}
/* Step 3 intro: primary action-selection — do not inherit form-step min-height */
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active){
min-height: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-wizard__track{
min-height: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-wizard__viewport{
flex: 0 0 auto;
min-height: 0;
}
body.account-setup-page #accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel,
body.account-setup-page #accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active{
min-height: 0;
flex: 0 0 auto;
padding: clamp(20px, 2.5vw, 28px) clamp(28px, 3.5vw, 40px) clamp(8px, 1.2vw, 12px);
}
body.account-setup-page .account-setup-step3-intro{
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
flex: 0 0 auto;
gap: clamp(0.7rem, 1.35vw, 0.95rem);
min-height: 0;
width: 100%;
max-width: 100%;
}
body.account-setup-page .account-setup-step3-intro:has(.account-setup-step3-summary:not([hidden])){
gap: clamp(0.55rem, 1.1vw, 0.78rem);
}
body.account-setup-page .account-setup-step3-section{
margin: 0;
padding: 0;
}
body.account-setup-page .account-setup-step3-section--guidance{
padding-bottom: 0;
}
body.account-setup-page .account-setup-step3-section--actions{
padding: 0;
border-top: none;
margin-top: 0;
display: flex;
justify-content: stretch;
}
body.account-setup-page .account-setup-step3-intro:has(.account-setup-step3-summary:not([hidden])) .account-setup-step3-section--actions{
margin-top: -0.05rem;
}
body.account-setup-page .account-setup-step3-section--actions .account-setup-tx-choice-wrap{
width: 93%;
max-width: 93%;
margin: 0 auto;
}
body.account-setup-page .account-setup-step3-recommend{
padding: 7px 12px 8px 14px;
border: none;
border-left: 1px solid rgba(11, 61, 46, 0.1);
border-radius: 0 8px 8px 0;
background: rgba(248, 250, 249, 0.45);
}
body.account-setup-page .account-setup-step3-recommend__eyebrow{
margin: 0 0 6px;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: rgba(100, 116, 139, 0.58);
}
body.account-setup-page .account-setup-step3-checklist{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
body.account-setup-page .account-setup-step3-checklist li{
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
font-size: 0.8125rem;
line-height: 1.38;
font-weight: 450;
color: rgba(100, 116, 139, 0.66);
}
body.account-setup-page .account-setup-step3-checklist li::before{
content: "";
width: 5px;
height: 5px;
border-radius: 999px;
margin-top: 0.5em;
flex-shrink: 0;
background: rgba(11, 61, 46, 0.38);
}
body.account-setup-page .account-setup-step3-summary{
display: inline-flex;
align-items: center;
align-self: center;
margin: -0.1rem auto 0;
padding: 3px 10px 3px 8px;
max-width: 100%;
box-sizing: border-box;
font-size: 0.7rem;
line-height: 1.26;
font-weight: 600;
letter-spacing: 0.008em;
color: rgba(71, 85, 105, 0.72);
background: rgba(241, 245, 249, 0.82);
border: 1px solid rgba(148, 163, 184, 0.12);
border-radius: 999px;
}
body.account-setup-page .account-setup-step3-summary:not([hidden]){
margin: -0.2rem auto 0.02rem;
}
body.account-setup-page .account-setup-step3-intro .account-setup-tx-choice-wrap{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
margin-top: 0;
gap: clamp(10px, 1.6vw, 14px);
}
body.account-setup-page .account-setup-step3-actionBtn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 52px;
height: 100%;
box-sizing: border-box;
transition:
transform 0.12s ease,
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
}
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn,
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn{
min-height: 52px;
height: auto;
padding: 0 clamp(18px, 2.5vw, 24px);
border-radius: 12px;
border-style: solid;
font-weight: 650;
}
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn--income{
background: var(--accent);
border-width: 2px;
border-color: color-mix(in srgb, var(--accent) 80%, #000);
color: #fff;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 3px 10px rgba(11, 61, 46, 0.1);
}
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn--expense{
background: #fff;
border-width: 1.5px;
border-color: rgba(11, 61, 46, 0.26);
color: rgba(11, 61, 46, 0.78);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn--income .account-setup-step3-actionBtn__plus,
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn--income .account-setup-step3-actionBtn__label{
color: #fff;
}
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn--expense .account-setup-step3-actionBtn__plus,
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn--expense .account-setup-step3-actionBtn__label{
color: rgba(11, 61, 46, 0.76);
}
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn:hover:not(:disabled),
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn:hover:not(:disabled){
filter: none;
}
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn--income:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 92%, #000);
border-color: color-mix(in srgb, var(--accent) 68%, #000);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 4px 12px rgba(11, 61, 46, 0.11);
transform: translateY(-1px);
}
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn--expense:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 5%, #fff);
border-color: rgba(11, 61, 46, 0.34);
box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
transform: translateY(-1px);
}
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn:active:not(:disabled),
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn:active:not(:disabled){
transform: scale(0.985);
}
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn:focus-visible:not(:disabled),
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn:focus-visible:not(:disabled){
outline: 2px solid rgba(11, 61, 46, 0.16);
outline-offset: 2px;
box-shadow: none;
}
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn.is-complete{
border-width: 2px;
border-color: color-mix(in srgb, var(--accent) 42%, transparent);
background: color-mix(in srgb, var(--accent) 12%, #fff);
color: rgba(11, 61, 46, 0.9);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.78),
0 1px 3px rgba(11, 61, 46, 0.07);
}
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn.is-complete{
border-width: 1.5px;
border-color: rgba(11, 61, 46, 0.24);
background: #fff;
color: rgba(11, 61, 46, 0.82);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
body.account-setup-page .account-setup-step3-actionBtn.is-complete .account-setup-step3-actionBtn__plus,
body.account-setup-page .account-setup-step3-actionBtn.is-complete .account-setup-step3-actionBtn__label{
color: inherit;
}
body.account-setup-page #asTxHubAddIncomeBtn.account-setup-step3-actionBtn.is-complete:focus-visible:not(:disabled),
body.account-setup-page #asTxHubAddExpenseBtn.account-setup-step3-actionBtn.is-complete:focus-visible:not(:disabled){
outline: 2px solid rgba(11, 61, 46, 0.16);
outline-offset: 1px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 1px 2px rgba(11, 61, 46, 0.1);
}
body.account-setup-page .account-setup-step3-actionBtn__content{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
}
body.account-setup-page .account-setup-step3-actionBtn__plus{
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
}
body.account-setup-page .account-setup-step3-actionBtn__label{
font-size: 0.9375rem;
font-weight: 650;
letter-spacing: 0.01em;
}
body.account-setup-page .account-setup-actions__cluster{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 10px;
width: auto;
min-height: 0;
flex: 0 1 auto;
}
body.account-setup-page .account-setup-step3-forecast-ready{
flex-shrink: 0;
margin: 0;
padding: 6px var(--as-card-pad-x) 0;
text-align: center;
font-size: 0.75rem;
line-height: 1.36;
font-weight: 450;
letter-spacing: 0.004em;
color: rgba(100, 116, 139, 0.58);
background: transparent;
border-top: none;
white-space: nowrap;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-step3-forecast-ready:not([hidden]){
margin: 0.4rem auto 0;
padding: 0 clamp(12px, 2vw, 24px);
max-width: none;
width: 100%;
box-sizing: border-box;
font-size: 0.71875rem;
line-height: 1.3;
font-weight: 450;
letter-spacing: 0.002em;
color: rgba(100, 116, 139, 0.58);
white-space: nowrap;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active):has(.account-setup-step3-forecast-ready:not([hidden])) #accountSetupWizardPanel2[data-step3-phase="intro"]{
padding-bottom: clamp(2px, 0.4vw, 4px);
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active){
border-color: rgba(11, 61, 46, 0.26);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 12px 38px rgba(15, 23, 42, 0.09),
0 30px 68px rgba(11, 61, 46, 0.08);
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) #accountSetupWizardPanel2[data-step3-phase="intro"]{
padding-bottom: clamp(4px, 0.6vw, 6px);
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-actions--shell{
--as-shell-actions-minh: 0;
flex-shrink: 0;
min-height: 0;
margin-top: 0;
padding: clamp(10px, 1.6vw, 14px) clamp(28px, 3.5vw, 40px) clamp(16px, 2.2vw, 22px);
border-top: 1px solid rgba(11, 61, 46, 0.08);
align-items: center;
column-gap: clamp(16px, 3vw, 28px);
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active):has(.account-setup-step3-forecast-ready:not([hidden])) .account-setup-actions--shell{
padding-top: clamp(8px, 1.2vw, 11px);
border-top-color: rgba(11, 61, 46, 0.06);
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-actions--shell #accountSetupBackBtn.secondary{
font-weight: 550;
color: rgba(11, 61, 46, 0.58);
border-color: rgba(11, 61, 46, 0.14);
box-shadow: none;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-actions__cluster{
gap: 10px;
flex: 0 0 auto;
display: flex;
align-items: center;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-actions__forward{
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 4px;
flex: 0 0 auto;
margin-left: auto;
min-width: 10.5rem;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active):has(.account-setup-step3-forecast-ready:not([hidden])) .account-setup-actions__forward{
gap: 3px;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-actions__forward #signupBtn{
min-height: 44px;
height: 44px;
padding: 0 22px;
font-size: 0.9375rem;
font-weight: 700;
border-radius: 12px;
box-shadow:
0 1px 2px rgba(11, 61, 46, 0.08),
0 3px 11px rgba(11, 61, 46, 0.13);
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-actions__forward #signupBtn:disabled{
background: color-mix(in srgb, var(--accent) 12%, #f4f7f5) !important;
color: rgba(11, 61, 46, 0.52) !important;
border: 1px solid rgba(11, 61, 46, 0.22) !important;
opacity: 1 !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
font-weight: 650;
cursor: not-allowed;
filter: none;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-continue-gateHint{
margin: 0;
padding: 0;
font-size: 0.72rem;
line-height: 1.28;
font-weight: 450;
letter-spacing: 0.008em;
color: rgba(100, 116, 139, 0.6);
text-align: right;
width: 100%;
max-width: none;
box-sizing: border-box;
white-space: nowrap;
}
body.account-setup-page .account-setup-actions__forward{
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 4px;
flex: 0 0 auto;
margin-left: auto;
}
body.account-setup-page .account-setup-continue-gateHint{
margin: 0;
padding: 0;
font-size: 0.74rem;
line-height: 1.3;
font-weight: 500;
letter-spacing: 0.006em;
color: rgba(71, 85, 105, 0.76);
text-align: right;
width: auto;
max-width: 16rem;
box-sizing: border-box;
}
body.account-setup-page .account-setup-wizard__shell .account-setup-actions--shell #signupBtn:disabled{
background: color-mix(in srgb, var(--accent) 12%, #f4f7f5);
color: rgba(11, 61, 46, 0.52);
border: 1px solid rgba(11, 61, 46, 0.22);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
opacity: 1;
font-weight: 650;
cursor: not-allowed;
filter: none;
}
@media (max-width: 560px){
body.account-setup-page .account-setup-tx-choice-wrap{
grid-template-columns: 1fr;
}
body.account-setup-page{
--as-card-pad-x: 22px;
--as-card-pad-y: 17px;
--as-shell-min-height: 400px;
--as-shell-actions-minh: 56px;
}
body.account-setup-page .container > .grid{
padding: 10px 0 12px;
}
body.account-setup-page .account-setup-wizard{
margin-bottom: 6px;
}
body.account-setup-page .account-setup-wizard__eyebrow{
font-size: clamp(1.28rem, 5vw, 1.5rem);
line-height: 1.15;
}
body.account-setup-page .account-setup-wizard__subeyebrow{
font-size: clamp(0.86rem, 3.2vw, 0.95rem);
line-height: 1.35;
}
body.account-setup-page .account-setup-step3-intro{
min-height: 0;
gap: 0.72rem;
}
body.account-setup-page .account-setup-step3-intro:has(.account-setup-step3-summary:not([hidden])){
gap: 0.62rem;
}
body.account-setup-page .container > .grid:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active){
width: min(760px, 94vw);
max-width: 94vw;
margin-top: clamp(0px, 2vh, 12px);
}
body.account-setup-page .account-setup-step3-intro .account-setup-tx-choice-wrap{
grid-template-columns: 1fr;
gap: 12px;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-actions--shell{
flex-wrap: wrap;
row-gap: 12px;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="intro"].account-setup-wizard__panel--active) .account-setup-continue-gateHint{
white-space: normal;
}
}
body.account-setup-page .account-setup-card{
overflow: hidden;
}
body.account-setup-page .account-setup-card__head{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
body.account-setup-page .account-setup-card__toggle{
appearance: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border: 1px solid rgba(0,0,0,0.14);
background: var(--accent);
border-radius: 12px;
padding: 10px 12px;
cursor: pointer;
color: #fff;
font: inherit;
}
body.account-setup-page .account-setup-card__toggle:focus-visible{
outline: 2px solid var(--accent);
outline-offset: 3px;
}
body.account-setup-page .account-setup-card__title{
font-weight: 800;
letter-spacing: 0.2px;
text-transform: none;
font-size: clamp(15px, 1.35vw, 18px);
color: rgba(255,255,255,0.95);
}
body.account-setup-page .account-setup-card__toggle::after{
content: "▾";
font-weight: 900;
color: rgba(255,255,255,0.92);
}
body.account-setup-page .account-setup-card.is-collapsed .account-setup-card__toggle::after{
content: "▾";
}
/* Smooth expand/collapse */
body.account-setup-page .account-setup-card__body{
overflow: hidden;
max-height: 2000px; /* large enough for content */
transition: max-height 220ms ease;
}
body.account-setup-page .account-setup-card.is-collapsed .account-setup-card__body{
max-height: 0;
}
/* When collapsed, keep header only */
body.account-setup-page .account-setup-card.is-collapsed{
padding: 10px;
}
body.account-setup-page .account-setup-card.is-collapsed .account-setup-card__head{
margin-bottom: 0;
}
body.account-setup-page .account-setup-card.is-collapsed .account-setup-card__toggle{
justify-content: space-between;
}
body.account-setup-page .account-setup-actions{
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
body.account-setup-page .account-setup-actions #accountSetupBackBtn{
margin-right: 0;
}
body.account-setup-page .account-setup-wizard__shell .account-setup-actions--shell #signupBtn{
min-height: 48px;
padding: 10px 24px;
font-size: 1.02rem;
font-weight: 700;
border-radius: 10px;
box-shadow:
0 1px 2px rgba(11, 61, 46, 0.1),
0 3px 10px rgba(11, 61, 46, 0.14);
}
body.account-setup-page .account-setup-wizard__shell .account-setup-actions--shell #signupBtn:hover{
box-shadow:
0 2px 4px rgba(11, 61, 46, 0.12),
0 5px 14px rgba(11, 61, 46, 0.16);
}
body.account-setup-page .account-setup-actions__cluster,
body.account-setup-page .account-setup-actions__forward{
align-items: center;
}
body.account-setup-page .account-setup-actions__cluster #accountSetupBackBtn,
body.account-setup-page .account-setup-actions__forward #signupBtn{
align-self: center;
}
body.account-setup-page .account-setup-card .auth-section__body{
padding: 0;
}
@media (max-width: 1020px){
body.account-setup-page .account-setup-cards{
grid-template-columns: 1fr;
}
}
/* Auth pages: reuse nav button sizing, but ensure contrast on white cards. */
body.login-page .auth-section__body .top-nav__logout,
body.account-setup-page .account-setup-actions .top-nav__logout{
background: var(--accent);
border-color: rgba(0, 0, 0, 0.10);
color: #fff;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 16px;
padding-right: 16px;
min-height: 38px;
font-size: 0.9rem;
font-weight: 700;
border-radius: 10px;
box-shadow: 0 1px 2px rgba(11, 61, 46, 0.08);
}
body.login-page .auth-section__body .top-nav__logout:hover,
body.account-setup-page .account-setup-actions .top-nav__logout:hover{
background: color-mix(in srgb, var(--accent) 92%, #000);
border-color: rgba(0, 0, 0, 0.16);
box-shadow: 0 1px 3px rgba(11, 61, 46, 0.12);
}
/* Login page: make accordion text larger */
body.login-page .auth-section{
font-size: 100%;
}
/* Login page: bump field label size */
body.login-page .auth-section label{
font-size: 0.86rem;
font-weight: 650;
color: rgba(55, 65, 60, 0.72);
}
body.login-page:not(.signup-page) .auth-section label{
font-size: 0.86rem;
}
body.login-page:not(.signup-page):not(.invite-page) #loginSectionBody label{
font-size: 0.84rem;
font-weight: 600;
color: rgba(51, 65, 85, 0.72);
letter-spacing: 0.012em;
}
/* =========================================================
Contact page — polished support layout
========================================================= */
body.contact-page{
background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
}
body.contact-page .container{
min-height: auto;
}
/* Public-friendly top nav: logo on the left, lightweight links on the right.
Mirrors the geometry used by plans/admin/signup pages. */
body.contact-page .top-nav .top-nav__inner.top-nav__inner--simple{
grid-template-columns: 1fr auto;
justify-items: start;
align-items: center;
}
body.contact-page .top-nav__inner--simple .top-nav__title{
justify-content: flex-start;
width: auto;
padding-left: 10px;
}
body.contact-page .top-nav__inner--simple .app-title{
text-align: left;
}
.contact-public-nav{
display: inline-flex;
align-items: center;
gap: 22px;
justify-self: end;
}
.contact-public-nav__link{
font-size: 14px;
font-weight: 500;
color: rgba(31, 41, 55, 0.78);
text-decoration: none;
letter-spacing: 0.005em;
transition: color 0.15s ease;
}
.contact-public-nav__link:hover{
color: var(--accent);
}
.contact-public-nav__link--cta{
background: var(--accent);
color: #fff;
padding: 8px 16px;
border-radius: 999px;
font-weight: 600;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 14px -8px rgba(11, 61, 46, 0.45);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.contact-public-nav__link--cta:hover{
color: #fff;
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 20px -10px rgba(11, 61, 46, 0.55);
transform: translateY(-1px);
}
/* Page wrapper for the form card + side rail */
body.contact-page .container > .grid{
margin: 32px auto 56px;
width: min(94%, 1120px);
padding: 0;
}
.contact-layout{
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 28px;
align-items: start;
}
@media (max-width: 880px){
.contact-layout{
grid-template-columns: 1fr;
gap: 18px;
}
}
/* --- Main form card --- */
body.contact-page .card.contact-card{
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: clamp(28px, 4vw, 48px);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 10px 30px -18px rgba(15, 23, 42, 0.12);
}
.contact-card__head{
margin-bottom: 28px;
}
.contact-card__eyebrow{
margin: 0 0 10px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.78);
}
.contact-card__title{
margin: 0 0 10px;
font-size: clamp(28px, 3.4vw, 36px);
font-weight: 700;
letter-spacing: -0.012em;
line-height: 1.15;
color: #0f172a;
}
.contact-card__subtitle{
margin: 0;
max-width: 56ch;
font-size: 15.5px;
line-height: 1.6;
color: rgba(51, 65, 85, 0.84);
}
/* --- Form --- */
.contact-form{
display: grid;
gap: 18px;
}
.contact-form__row{
display: grid;
gap: 18px;
}
.contact-form__row--two{
grid-template-columns: 1fr 1fr;
}
@media (max-width: 620px){
.contact-form__row--two{
grid-template-columns: 1fr;
}
}
.contact-form__field{
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.contact-form__label{
margin: 0;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.012em;
color: rgba(71, 85, 105, 0.92);
text-transform: none;
}
.contact-form__req{
color: rgba(148, 163, 184, 0.9);
font-weight: 500;
margin-left: 2px;
}
/* Inputs: white, soft border, brand-green focus. Override the bumped 110%
font-size from the previous design so fields feel right-sized. */
body.contact-page .contact-form__input,
body.contact-page .contact-form__select,
body.contact-page .contact-form__textarea{
width: 100%;
font-size: 14.5px;
font-family: inherit;
color: #0f172a;
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 10px;
padding: 10px 12px;
line-height: 1.45;
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.015);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
appearance: none;
}
body.contact-page .contact-form__input,
body.contact-page .contact-form__select{
height: 42px;
}
body.contact-page .contact-form__select{
background-image:
url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
cursor: pointer;
}
body.contact-page .contact-form__textarea{
resize: vertical;
min-height: 124px;
max-height: 360px;
overflow: auto;
}
body.contact-page .contact-form__input::placeholder,
body.contact-page .contact-form__textarea::placeholder{
color: rgba(148, 163, 184, 0.85);
}
body.contact-page .contact-form__input:hover,
body.contact-page .contact-form__select:hover,
body.contact-page .contact-form__textarea:hover{
border-color: #D1D5DB;
}
body.contact-page .contact-form__input:focus,
body.contact-page .contact-form__select:focus,
body.contact-page .contact-form__textarea:focus{
outline: none;
border-color: color-mix(in srgb, var(--accent) 55%, #cbd5e1);
box-shadow:
0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent),
inset 0 1px 0 rgba(15, 23, 42, 0.015);
background: #ffffff;
}
/* Safety note */
.contact-form__safety-note{
display: flex;
gap: 10px;
align-items: flex-start;
margin: 4px 0 0;
padding: 12px 14px;
background: color-mix(in srgb, var(--accent) 5%, #f8fafc);
border: 1px solid color-mix(in srgb, var(--accent) 14%, #e2e8f0);
border-radius: 12px;
font-size: 13px;
line-height: 1.55;
color: rgba(51, 65, 85, 0.92);
}
.contact-form__safety-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex: 0 0 22px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, #ffffff);
color: var(--accent);
}
/* Inline alerts (calm and human) */
.contact-form__alert{
margin: 6px 0 0;
padding: 12px 14px;
border-radius: 12px;
font-size: 14px;
line-height: 1.5;
}
.contact-form__alert[hidden]{ display: none; }
.contact-form__alert--ok{
background: color-mix(in srgb, var(--accent) 8%, #ffffff);
border: 1px solid color-mix(in srgb, var(--accent) 22%, #e5e7eb);
color: color-mix(in srgb, var(--accent) 88%, #000);
}
.contact-form__alert--err{
background: #fff7f4;
border: 1px solid #fad7c5;
color: #8a3a1d;
}
/* Actions */
.contact-form__actions{
margin-top: 6px;
display: flex;
justify-content: flex-end;
}
.contact-form__send{
appearance: none;
border: 0;
cursor: pointer;
background: var(--accent);
color: #ffffff;
font-weight: 600;
font-size: 14.5px;
padding: 0 22px;
height: 44px;
border-radius: 999px;
letter-spacing: 0.005em;
box-shadow:
0 1px 0 rgba(0,0,0,0.05),
0 8px 18px -10px rgba(11, 61, 46, 0.5);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.contact-form__send:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(0,0,0,0.06),
0 12px 22px -10px rgba(11, 61, 46, 0.55);
}
.contact-form__send:focus-visible{
outline: none;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
0 8px 18px -10px rgba(11, 61, 46, 0.5);
}
.contact-form__send:disabled,
.contact-form__send[disabled]{
background: #E5E7EB;
color: rgba(71, 85, 105, 0.66);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
@media (max-width: 620px){
.contact-form__actions{ justify-content: stretch; }
.contact-form__send{ width: 100%; }
}
/* --- Side rail --- */
.contact-aside{
position: sticky;
top: 24px;
}
@media (max-width: 880px){
.contact-aside{ position: static; }
}
.contact-aside__card{
background: #ffffff;
border: 1px solid #EEF1F4;
border-radius: 16px;
padding: 22px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.contact-aside__title{
margin: 0 0 14px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(51, 65, 85, 0.78);
}
.contact-aside__list{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
}
.contact-aside__list li{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
font-size: 14px;
}
.contact-aside__k{
color: rgba(100, 116, 139, 0.9);
font-size: 12.5px;
letter-spacing: 0.02em;
text-transform: uppercase;
font-weight: 600;
}
.contact-aside__v{
color: var(--accent);
text-decoration: none;
font-weight: 500;
word-break: break-word;
text-align: right;
}
.contact-aside__v:hover{ text-decoration: underline; }
.contact-aside__hint{
margin: 14px 0 0;
padding-top: 14px;
border-top: 1px solid #EEF1F4;
font-size: 13px;
line-height: 1.55;
color: rgba(100, 116, 139, 0.92);
}
/* Footer breathing room */
body.contact-page .app-footer{
margin-top: 24px;
}
/* Troubleshooting (only shown when something actually fails) */
.contact-troubleshoot{
margin-top: 12px;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #e2e8f0;
background: #f8fafc;
font-size: 13.5px;
line-height: 1.55;
color: rgba(51, 65, 85, 0.94);
}
.contact-troubleshoot__title{
font-weight: 700;
margin-bottom: 8px;
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(71, 85, 105, 0.78);
}
.contact-troubleshoot__list{
margin: 0;
padding-left: 1.2rem;
}
.contact-troubleshoot__list li{
margin-bottom: 8px;
}
.contact-troubleshoot__list li:last-child{
margin-bottom: 0;
}
.contact-troubleshoot a{
color: var(--accent);
font-weight: 600;
}
.contact-troubleshoot a:hover{
text-decoration: underline;
}
/* Admin page (balancewhiz.com/admin) */
body.admin-page .container > .grid{
margin-top: 18px;
width: min(92%, 1100px);
margin-left: auto;
margin-right: auto;
}
body.admin-page .container{
min-height: auto;
}
body.admin-page .app-footer{
margin-top: 10px;
}
.admin-page__hero{
padding-bottom: 16px;
}
.admin-page__title{
margin: 0 0 6px;
font-size: 1.35rem;
}
.admin-page__lead{
margin: 0 0 18px;
}
.admin-page__grid{
display: grid;
gap: 16px;
}
@media (min-width: 900px){
.admin-page__grid{
grid-template-columns: 1fr 1fr;
align-items: start;
}
}
.admin-page__panel h3{
margin: 0 0 8px;
font-size: 1rem;
font-weight: 600;
}
.admin-page__pre{
margin: 0;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.03);
color: var(--text);
font-size: 12px;
line-height: 1.45;
max-height: 320px;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
.admin-steps{
margin: 0 0 14px;
padding-left: 1.25rem;
font-size: 14px;
line-height: 1.55;
color: var(--text);
}
.admin-steps li{
margin-bottom: 10px;
}
.admin-steps li:last-child{
margin-bottom: 0;
}
.admin-url-box{
margin-top: 4px;
padding: 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.02);
}
.admin-url-box__label{
font-size: 12px;
font-weight: 600;
color: var(--text);
margin-bottom: 6px;
}
.admin-url-box__code{
display: block;
font-size: 12px;
word-break: break-all;
line-height: 1.45;
margin-bottom: 10px;
}
.admin-url-box__actions{
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.admin-url-box__btn{
font-size: 13px;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
border: 1px solid var(--border);
background: var(--card);
color: var(--text);
font-weight: 600;
}
.admin-url-box__btn:hover{
background: rgba(0, 0, 0, 0.04);
}
.admin-page__warn{
margin-top: 12px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid rgba(234, 179, 8, 0.45);
background: rgba(234, 179, 8, 0.12);
color: var(--text);
}
.admin-api-summary{
margin-top: 12px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(76, 209, 123, 0.35);
background: rgba(76, 209, 123, 0.1);
color: var(--text);
font-size: 14px;
line-height: 1.5;
}
.admin-api-summary__title{
font-weight: 700;
margin-bottom: 8px;
}
.admin-api-summary__list{
margin: 0;
padding-left: 1.15rem;
}
.admin-api-summary__list li{
margin-bottom: 8px;
}
.admin-api-summary__mark{
font-weight: 700;
}
.admin-api-summary__mark.is-good{
color: #14532d;
}
.admin-api-summary__mark.is-bad{
color: #7f1d1d;
}
.admin-api-raw-label{
margin: 12px 0 4px;
font-weight: 600;
font-size: 13px;
}
.admin-curl-label{
display: block;
font-weight: 600;
font-size: 13px;
margin: 10px 0 6px;
}
.admin-curl-box{
width: 100%;
box-sizing: border-box;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
line-height: 1.45;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.03);
color: var(--text);
resize: vertical;
min-height: 120px;
}
.admin-page__users-card{
margin-top: 16px;
padding-bottom: 16px;
}
.admin-page__users-title{
margin: 0 0 8px;
font-size: 1rem;
font-weight: 600;
}
.admin-page__token-row{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
}
.admin-page__token-field{
flex: 1 1 220px;
min-width: 0;
}
.admin-page__token-field label{
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 13px;
}
.admin-page__token-field input{
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.02);
color: var(--text);
font-size: 14px;
}
.admin-page__token-actions{
padding-top: 0;
border-top: none;
margin-bottom: 2px;
}
.admin-user-table-wrap{
margin-top: 14px;
overflow: auto;
max-height: min(60vh, 520px);
border: 1px solid var(--border);
border-radius: 10px;
}
.admin-user-table{
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.admin-user-table th,
.admin-user-table td{
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.admin-user-table th{
position: sticky;
top: 0;
background: var(--card);
font-weight: 600;
z-index: 1;
box-shadow: 0 1px 0 var(--border);
}
.admin-user-table tbody tr:hover{
background: rgba(0, 0, 0, 0.03);
}
.admin-user-table tbody tr:last-child td{
border-bottom: none;
}
.admin-user-table td.num{
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.admin-user-table .admin-user-email{
word-break: break-all;
}
/* Plans page */
body.plans-page .container > .grid{
margin-top: 44px;
}
.plans-wrap{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.plans-headline{
width: min(980px, 100%);
/* Nudge hero copy up without shifting the pricing cards */
margin: -20px auto 14px;
text-align: center;
font-size: 39px; /* +15% */
font-weight: 900;
color: var(--accent);
letter-spacing: 0.2px;
font-style: normal;
font-family: "Söhne Breit", "Söhne", Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.plans-subtitle{
width: min(980px, 100%);
margin: 0 auto 14px;
text-align: center;
font-size: 17px;
font-weight: 600;
color: var(--muted);
}
.plans-grid{
width: min(980px, 100%);
margin: 20px auto 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
align-items: stretch;
}
/* When only one plan card is shown, center it. */
.plans-grid:has(.plan-card:only-child){
grid-template-columns: minmax(0, 1fr);
justify-items: center;
}
.plans-grid:has(.plan-card:only-child) .plan-card{
width: min(520px, 100%);
}
/* Reports: Income vs. Expense */
.income-expense-card{ background: var(--cal-surface); }
.income-expense-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.income-expense-title{ margin: 0; font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: 0.3px; text-transform: none; }
.income-expense-subtitle{ margin-top: 2px; }
.income-expense-controls{ display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.income-expense-select{ padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: rgba(0,0,0,0.02); font: inherit; }
.income-expense-toggle{ padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: rgba(0,0,0,0.02); font: inherit; cursor: pointer; }
.income-expense-toggle.is-active{ border-color: color-mix(in srgb, var(--accent) 45%, rgba(0,0,0,0.12)); background: color-mix(in srgb, var(--accent) 10%, rgba(0,0,0,0.02)); color: var(--accent); }
.income-expense-icon-btn{ width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid rgba(0,0,0,0.12); background: rgba(0,0,0,0.02); cursor: pointer; line-height: 0; }
.income-expense-chart-wrap{ height: 240px; position: relative; }
@media (min-width: 880px){ .income-expense-chart-wrap{ height: 280px; } }
.plan-card{
background: var(--cal-surface);
padding: 0;
overflow: hidden;
box-shadow: 0 10px 28px rgba(0,0,0,0.10);
border: var(--card-border-accent);
display: flex;
flex-direction: column;
min-height: 468px;
}
.plan-card__top{
position: relative;
padding: 22px 20px 18px;
color: #fff;
background: #5b67b6; /* Fortune-like indigo */
min-height: 83px;
text-align: center;
}
.plan-card--base .plan-card__top{
background: #0B3D2E; /* brand green */
}
.plan-card__name{
font-size: 18px;
font-weight: 900;
letter-spacing: 0.2px;
line-height: 1.1;
}
.plan-card__name--sub{
margin-top: 6px;
font-size: 16px;
font-weight: 700;
opacity: 0.95;
}
.plan-badge{
position: absolute;
top: 16px;
right: 16px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.18);
border: 1px solid rgba(255,255,255,0.28);
font-size: 12px;
font-weight: 800;
}
.plan-card__body{
padding: 18px 20px 20px;
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.plan-price{
text-align: center;
}
.plan-price__main{
font-size: 34px;
font-weight: 900;
letter-spacing: 0.2px;
color: var(--text);
}
.plan-price__sub{
margin-top: 2px;
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.plan-divider{
height: 1px;
background: rgba(0,0,0,0.12);
width: 100%;
}
.plan-kicker{
text-align: center;
font-size: 13px;
font-weight: 800;
color: var(--muted);
}
.plan-features{
margin: 0;
padding: 0 0 0 18px;
display: grid;
gap: 8px;
color: var(--text);
font-size: 13px;
line-height: 1.35;
}
.plan-features li::marker{
color: #15803d;
}
.plan-cta{
width: 100%;
margin-top: 6px;
margin-top: auto;
padding: 10px 12px;
border-radius: var(--btn-radius);
font-weight: 900;
background: rgba(0,0,0,0.03);
border: 1px solid rgba(0,0,0,0.14);
color: var(--text);
}
.plan-cta:hover{
filter: brightness(1.03);
}
.plan-cta--strong{
background: color-mix(in srgb, var(--accent) 18%, transparent);
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.plan-card--pro .plan-price__main--coming-soon{
font-size: clamp(22px, 3.6vw, 28px);
font-weight: 800;
color: var(--muted);
letter-spacing: 0.03em;
}
.plan-card--pro .plan-cta:disabled{
opacity: 0.58;
cursor: not-allowed;
filter: grayscale(0.25);
background: rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.12);
color: var(--muted);
box-shadow: none;
}
.plan-card--pro .plan-cta:disabled:hover{
filter: grayscale(0.25);
}
@media (max-width: 860px){
.plans-grid{
grid-template-columns: 1fr;
width: min(520px, 100%);
}
}
/* =========================================================
Plans page — polished pricing layout
(scoped under .plans-page--polished so we don't disturb
any older surfaces that may still rely on the legacy
.plan-card markup)
========================================================= */
body.plans-page.plans-page--polished{
background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
}
body.plans-page--polished .container{ min-height: auto; }
body.plans-page--polished .top-nav{
padding: 8px 0 6px;
}
body.plans-page--polished .top-nav .app-logo{
width: min(220px, 52vw);
height: 40px;
}
/* Public nav (Features / Pricing / Login) */
body.plans-page--polished .top-nav .top-nav__inner.top-nav__inner--simple{
grid-template-columns: 1fr auto;
}
.plans-public-nav{
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px 16px;
justify-self: end;
}
.plans-public-nav__link{
font-size: 13.5px;
font-weight: 500;
color: rgba(31, 41, 55, 0.78);
text-decoration: none;
letter-spacing: 0.005em;
transition: color 0.15s ease;
}
.plans-public-nav__link:hover{ color: var(--accent); }
.plans-public-nav__link--active{
color: var(--accent);
font-weight: 600;
}
.plans-public-nav__link--cta{
background: var(--accent);
color: #fff;
padding: 6px 13px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 3px 12px -6px rgba(11, 61, 46, 0.4);
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.plans-public-nav__link--cta:hover{
color: #fff;
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 6px 16px -8px rgba(11, 61, 46, 0.5);
transform: translateY(-1px);
}
/* Main column rhythm — bring hero and card visually close together */
body.plans-page--polished .container > .grid{
margin: 24px auto 56px;
width: min(94%, 1080px);
padding: 0;
display: block;
}
/* Hero */
.plans-hero{
text-align: center;
margin: 12px auto 22px;
max-width: 760px;
}
.plans-hero__eyebrow{
margin: 0 0 12px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.78);
}
.plans-hero__title{
margin: 0 0 14px;
font-size: clamp(30px, 4.2vw, 42px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.018em;
color: #0f172a;
}
.plans-hero__subtitle{
margin: 0 auto;
max-width: 56ch;
font-size: clamp(15px, 1.7vw, 17px);
line-height: 1.6;
color: rgba(51, 65, 85, 0.86);
font-weight: 500;
}
body.plans-page--polished .plans-hero{
margin: 8px auto 12px;
}
/* Pricing grid wrapper */
body.plans-page--polished .plans-wrap{
margin: 0 auto;
width: 100%;
align-items: center;
}
body.plans-page--polished .plans-grid{
margin: 0 auto;
width: min(520px, 100%);
grid-template-columns: 1fr;
}
/* Polished pricing card — soft neutral border, subtle shadow */
body.plans-page--polished .plan-card.plan-card--polished{
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 20px;
padding: clamp(20px, 3vw, 30px);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 18px 40px -22px rgba(15, 23, 42, 0.18);
overflow: visible;
min-height: 0;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.plans-page--polished .plan-card.plan-card--polished:hover{
transform: translateY(-2px);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.05),
0 22px 48px -22px rgba(15, 23, 42, 0.22);
}
.plan-card.plan-card--polished .plan-card__head{
text-align: center;
padding: 0;
background: transparent;
color: inherit;
border: 0;
min-height: 0;
}
.plan-card.plan-card--polished .plan-card__eyebrow{
margin: 0 0 10px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.82);
}
/* Price — dominant; "per month" small and muted */
.plan-card.plan-card--polished .plan-price{
display: inline-flex;
align-items: baseline;
justify-content: center;
gap: 4px;
line-height: 1;
}
.plan-card.plan-card--polished .plan-price__currency{
font-size: clamp(22px, 2.4vw, 26px);
font-weight: 700;
color: #0f172a;
transform: translateY(-12px);
}
.plan-card.plan-card--polished .plan-price__main{
font-size: clamp(54px, 7vw, 68px);
font-weight: 800;
letter-spacing: -0.025em;
color: #0f172a;
line-height: 1;
}
.plan-card.plan-card--polished .plan-price__sub{
margin: 0 0 6px 4px;
font-size: 14px;
font-weight: 500;
color: rgba(100, 116, 139, 0.92);
letter-spacing: 0.005em;
}
.plan-card.plan-card--polished .plan-price__caption{
margin: 10px 0 0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
color: rgba(71, 85, 105, 0.88);
}
.plan-card.plan-card--polished .plan-price__free{
display: inline-flex;
align-items: center;
background: color-mix(in srgb, var(--accent) 9%, #ffffff);
color: color-mix(in srgb, var(--accent) 88%, #000);
border: 1px solid color-mix(in srgb, var(--accent) 22%, #e5e7eb);
padding: 3px 9px;
border-radius: 999px;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.005em;
}
.plan-card.plan-card--polished .plan-price__dot{
color: rgba(148, 163, 184, 0.85);
}
/* Primary CTA — full-width, brand green */
.plan-card.plan-card--polished .plan-cta-block{
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.plan-card.plan-card--polished .plan-cta-reassurance{
margin: 7px 0 0;
text-align: center;
font-size: 12.5px;
font-weight: 500;
line-height: 1.35;
color: rgba(100, 116, 139, 0.9);
}
.plan-card.plan-card--polished .plan-cta.plan-cta--primary{
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
height: auto;
padding: 11px 20px;
margin: 0;
background: var(--accent);
color: #ffffff;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.005em;
border: 0;
border-radius: 12px;
text-decoration: none;
cursor: pointer;
box-shadow:
0 1px 0 rgba(0,0,0,0.05),
0 12px 22px -12px rgba(11, 61, 46, 0.5);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.plan-card.plan-card--polished .plan-cta.plan-cta--primary:hover{
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(0,0,0,0.06),
0 18px 30px -16px rgba(11, 61, 46, 0.6);
}
.plan-card.plan-card--polished .plan-cta.plan-cta--primary:focus-visible{
outline: none;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
0 14px 26px -14px rgba(11, 61, 46, 0.55);
}
/* Outcome features — green check icons, generous spacing */
.plan-card.plan-card--polished .plan-features--outcomes{
list-style: none;
padding: 0;
margin: 2px 0 0;
display: grid;
gap: 8px;
font-size: 14.25px;
line-height: 1.45;
color: rgba(31, 41, 55, 0.94);
}
.plan-card.plan-card--polished .plan-features--outcomes li{
display: flex;
align-items: flex-start;
gap: 10px;
}
.plan-features__icon{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 22px;
width: 22px;
height: 22px;
margin-top: 1px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, #ffffff);
color: var(--accent);
}
.plan-card.plan-card--polished .plan-features__icon{
margin-top: 0;
}
/* Compact Q&A row under the pricing card */
body.plans-page--polished .plans-micro-faq{
box-sizing: border-box;
width: min(520px, 100%);
margin: 12px auto 0;
padding: 10px 12px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px 12px;
border-radius: 12px;
border: 1px solid #e8ecf0;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
body.plans-page--polished .plans-micro-faq__item{
min-width: 0;
padding: 6px 4px;
display: flex;
flex-direction: column;
gap: 3px;
text-align: center;
}
body.plans-page--polished .plans-micro-faq__q{
display: block;
font-size: 11.5px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
color: rgba(51, 65, 85, 0.78);
}
body.plans-page--polished .plans-micro-faq__a{
display: block;
font-size: 13px;
font-weight: 700;
color: rgba(15, 23, 42, 0.92);
}
/* Trust row beneath the card */
.plans-trust{
list-style: none;
padding: 0;
margin: 16px auto 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 14px;
max-width: 720px;
}
.plans-trust li{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: #ffffff;
border: 1px solid #EEF1F4;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
color: rgba(51, 65, 85, 0.92);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.plans-trust__check{
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, #ffffff);
color: var(--accent);
}
@media (max-width: 560px){
body.plans-page--polished .top-nav{
padding: 6px 0 5px;
}
body.plans-page--polished .plans-hero{
margin: 4px auto 10px;
}
body.plans-page--polished .plans-hero__eyebrow{
margin-bottom: 8px;
}
body.plans-page--polished .plans-hero__title{
font-size: clamp(26px, 7.2vw, 34px);
line-height: 1.12;
margin-bottom: 10px;
}
body.plans-page--polished .plans-hero__subtitle{
font-size: clamp(14px, 4vw, 16px);
line-height: 1.52;
}
body.plans-page--polished .container > .grid{
margin-top: 16px;
}
body.plans-page--polished .plan-card.plan-card--polished{
padding: 16px 14px 18px;
gap: 12px;
border-radius: 16px;
width: 100%;
}
body.plans-page--polished .plan-card.plan-card--polished .plan-features--outcomes{
gap: 6px;
font-size: 13.75px;
}
body.plans-page--polished .plan-card.plan-card--polished .plan-cta.plan-cta--primary{
min-height: 48px;
padding-top: 12px;
padding-bottom: 12px;
}
body.plans-page--polished .plans-micro-faq{
grid-template-columns: 1fr;
padding: 4px 10px 6px;
gap: 0;
}
body.plans-page--polished .plans-micro-faq__item{
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 6px 10px;
text-align: left;
padding: 10px 2px;
border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
body.plans-page--polished .plans-micro-faq__item:last-child{
border-bottom: none;
}
body.plans-page--polished .plans-micro-faq__q{
flex: 1 1 auto;
min-width: 0;
text-align: left;
}
body.plans-page--polished .plans-micro-faq__a{
flex-shrink: 0;
text-align: right;
}
body.plans-page--polished .plans-trust{
gap: 8px 10px;
margin-top: 12px;
}
body.plans-page--polished .plans-trust li{
padding: 6px 11px;
font-size: 12.5px;
}
}
/* "Great for" audience grid */
.plans-audience{
margin: 56px auto 0;
max-width: 880px;
text-align: center;
}
.plans-audience__title{
margin: 0 0 22px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.7);
}
.plans-audience__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
text-align: left;
}
@media (max-width: 620px){
.plans-audience__grid{ grid-template-columns: 1fr; }
}
.plans-audience__item{
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px 18px;
background: #ffffff;
border: 1px solid #EEF1F4;
border-radius: 14px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}
.plans-audience__item p{
margin: 2px 0 0;
font-size: 14.5px;
line-height: 1.5;
color: rgba(31, 41, 55, 0.94);
}
.plans-audience__icon{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
border-radius: 12px;
background: color-mix(in srgb, var(--accent) 10%, #ffffff);
color: var(--accent);
}
/* Reassurance quote */
.plans-quote{
margin: 48px auto 0;
max-width: 640px;
padding: 26px 30px;
background: color-mix(in srgb, var(--accent) 4%, #ffffff);
border: 1px solid color-mix(in srgb, var(--accent) 14%, #e5e7eb);
border-radius: 18px;
text-align: center;
display: grid;
justify-items: center;
gap: 10px;
}
.plans-quote__mark{
color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.plans-quote__text{
margin: 0;
font-size: clamp(18px, 2.2vw, 22px);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.005em;
color: #0f172a;
font-style: italic;
}
/* Footer breathing room */
body.plans-page--polished .app-footer{ margin-top: 48px; }
/* Hide the legacy headline so the new hero doesn't double up if some
stale markup ships in cache. */
body.plans-page--polished .plans-headline,
body.plans-page--polished .plans-wrap > .meta{
display: none;
}
/* Override legacy `.plans-headline` margin that pulled content up */
body.plans-page--polished .plans-wrap{
display: block;
}
.calendar{
display:grid;
grid-template-columns: repeat(7, 1fr);
column-gap: var(--cal-gap, 5px);
row-gap: 7px;
}
.calendar-dow-row{
display: grid;
grid-template-columns: repeat(7, 1fr);
column-gap: var(--cal-gap, 5px);
row-gap: 7px;
margin-bottom: 5px;
}
.cal-dow{
font-size: 12px;
color: var(--muted);
padding:4px 6px;
text-align: center;
font-weight: 600;
}
.cal-cell{
position: relative;
border: 1px solid rgba(17, 24, 39, 0.055);
background: rgba(255, 255, 255, 0.78);
border-radius: 10px;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.028);
/* Base height; JS will expand week rows when needed. */
min-height: var(--cal-day-min-h, 108px);
height: auto;
padding: 5px 7px 4px;
display: flex;
flex-direction: column;
overflow: hidden;
transition:
border-color 0.18s ease,
box-shadow 0.22s ease,
background-color 0.18s ease,
transform 0.2s ease;
}
/* Forecast risk: calm awareness — keep the cell mostly neutral; status reads
from the left accent, optional soft footer band, and balance pill (below). */
.cal-cell.cal-cell--bal-watch{
background: color-mix(in srgb, #fffbeb 8%, #fff);
border-color: rgba(17, 24, 39, 0.05);
box-shadow:
inset 2px 0 0 rgba(217, 119, 6, 0.1),
0 1px 2px rgba(17, 24, 39, 0.02);
}
.cal-cell.cal-cell--bal-watch:not(.cal-cell--out):not(.cal-cell--before-start)::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
border-radius: 0 0 9px 9px;
background: linear-gradient(90deg, rgba(251, 191, 36, 0.14), rgba(253, 224, 71, 0.08));
pointer-events: none;
}
.cal-cell.cal-cell--bal-warn{
background: color-mix(in srgb, #fffbf7 5%, #fff);
border-color: rgba(17, 24, 39, 0.05);
box-shadow:
inset 2px 0 0 rgba(180, 130, 70, 0.07),
0 1px 2px rgba(17, 24, 39, 0.02);
}
.cal-cell.cal-cell--bal-risk{
background: color-mix(in srgb, #fef2f2 10%, #fff);
border-color: rgba(17, 24, 39, 0.055);
box-shadow:
inset 2px 0 0 rgba(185, 28, 28, 0.14),
0 1px 2px rgba(17, 24, 39, 0.025);
}
.cal-cell.cal-cell--bal-risk:not(.cal-cell--out):not(.cal-cell--before-start)::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
border-radius: 0 0 9px 9px;
background: rgba(252, 165, 165, 0.12);
pointer-events: none;
}
.cal-cell.cal-cell--has-collapsed-rows:not(.cal-cell--out){
cursor: pointer;
}
/* Reconciled in-month days: quiet “grounded in reality” cue — distinct from
forecast-risk tints (which use stronger amber/red washes). */
.cal-cell.cal-cell--reconciled:not(.cal-cell--bal-risk):not(.cal-cell--bal-warn):not(.cal-cell--before-start){
background: linear-gradient(
135deg,
rgba(241, 250, 244, 0.65) 0%,
rgba(255, 255, 255, 0.78) 36%,
rgba(255, 255, 255, 0.82) 100%
);
border-color: rgba(21, 128, 61, 0.18);
box-shadow:
inset 0 -1px 0 rgba(22, 163, 74, 0.07),
0 1px 3px rgba(17, 24, 39, 0.028);
}
.cal-cell:not(.cal-cell--out):not(.cal-cell--before-start):hover{
border-color: rgba(17, 24, 39, 0.1);
background: #fff;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
.cal-cell.cal-cell--out:not(.cal-cell--before-start):hover{
transform: none;
}
.cal-cell.cal-cell--bal-watch:not(.cal-cell--out):not(.cal-cell--before-start):hover{
border-color: rgba(17, 24, 39, 0.09);
background: color-mix(in srgb, #fffbeb 16%, #fff);
box-shadow:
inset 2px 0 0 rgba(217, 119, 6, 0.18),
0 4px 14px rgba(120, 53, 15, 0.04);
}
.cal-cell.cal-cell--bal-warn:not(.cal-cell--out):not(.cal-cell--before-start):hover{
border-color: rgba(17, 24, 39, 0.08);
background: color-mix(in srgb, #fffbf7 8%, #fff);
box-shadow:
inset 2px 0 0 rgba(180, 130, 70, 0.1),
0 4px 14px rgba(15, 23, 42, 0.04);
}
.cal-cell.cal-cell--bal-risk:not(.cal-cell--out):not(.cal-cell--before-start):hover{
border-color: rgba(17, 24, 39, 0.09);
background: color-mix(in srgb, #fef2f2 14%, #fff);
box-shadow:
inset 2px 0 0 rgba(185, 28, 28, 0.16),
0 4px 14px rgba(127, 29, 29, 0.032);
}
@media (prefers-reduced-motion: reduce){
.cal-cell:not(.cal-cell--before-start):hover{
transform: none;
}
}
.cal-cell.cal-cell--reconciled:not(.cal-cell--bal-risk):not(.cal-cell--bal-warn):not(.cal-cell--out):not(.cal-cell--before-start):hover{
border-color: rgba(21, 128, 61, 0.24);
background: linear-gradient(
135deg,
rgba(240, 251, 244, 0.78) 0%,
rgba(255, 255, 255, 0.88) 100%
);
box-shadow: 0 3px 11px rgba(15, 23, 42, 0.045);
}
.cal-cell.cal-cell--recovery-milestone:not(.cal-cell--out):not(.cal-cell--before-start){
box-shadow:
inset 0 -1px 0 rgba(22, 101, 52, 0.14),
0 1px 2px rgba(17, 24, 39, 0.028);
}
.cal-cell.cal-cell--out{
/* Darker shading for prior/next month wrap days */
background: rgba(0, 0, 0, 0.055);
border-color: rgba(17, 24, 39, 0.07);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.024);
}
.cal-cell.cal-cell--out .cal-daynum-num{
color: rgba(75, 85, 99, 0.8);
}
.cal-cell.cal-cell--past:not(.cal-cell--out):not(.cal-cell--before-start){
background: rgba(255, 255, 255, 0.94);
border-color: rgba(17, 24, 39, 0.068);
box-shadow: 0 1px 3px rgba(17, 24, 39, 0.038);
}
.cal-cell.cal-cell--past .cal-daynum-num{
color: rgba(75, 85, 99, 0.68);
}
.cal-cell.cal-cell--before-start{
/* Before your starting balance date: subtly disabled + slightly tinted */
background: rgba(11, 61, 46, 0.06);
border-color: rgba(11, 61, 46, 0.14);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.cal-cell.cal-cell--before-start .cal-daynum-num{
color: rgba(75, 85, 99, 0.58);
}
.cal-cell.cal-cell--before-start .cal-cell-fill{
cursor: not-allowed;
}
.cal-cell.cal-cell--before-start .cal-daynum{
cursor: not-allowed;
}
.cal-cell.cal-cell--before-start .cal-day-tx-line,
.cal-cell.cal-cell--before-start .cal-tx-part{
cursor: pointer;
}
/* Reconcile day modal — minimal “quick grounding” */
.modal.modal--reconcile{
max-width: 324px;
width: min(90vw, 324px);
padding: 12px 16px 10px;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
.modal.modal--reconcile > h3.reconcile-modal__title{
width: 100%;
margin: 0 0 4px;
padding: 0;
font-size: 1.05rem;
font-weight: 800;
letter-spacing: -0.022em;
line-height: 1.2;
color: rgba(15, 23, 42, 0.96);
background: transparent !important;
border-radius: 0;
border-bottom: none;
box-sizing: border-box;
}
.reconcile-modal__lead{
margin: 0 0 10px;
font-size: 0.8125rem;
line-height: 1.4;
color: rgba(100, 116, 139, 0.74);
font-weight: 400;
}
.reconcile-modal__balance{
margin: 0 0 10px;
padding: 7px 10px 8px;
border-radius: 10px;
background: rgba(249, 250, 251, 0.95);
border: 1px solid rgba(17, 24, 39, 0.06);
box-shadow: none;
}
.reconcile-modal__forecast{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 3px;
}
.reconcile-modal__forecast-k{
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.92);
}
.reconcile-modal__forecast-v{
font-size: 1.28rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.03em;
font-variant-numeric: tabular-nums;
color: rgba(11, 61, 46, 0.95);
}
#reconcileModal .error{
margin: 6px 0 0;
}
.modal.modal--reconcile .reconcile-modal__status{
margin: 2px 0 0;
}
.reconcile-switch{
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 14px;
cursor: pointer;
user-select: none;
padding: 4px 0;
border-radius: 8px;
}
.reconcile-switch:focus-within{
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 2px;
}
.reconcile-switch__text{
font-size: 12.75px;
font-weight: 500;
color: rgba(51, 65, 85, 0.92);
}
.reconcile-switch > input.sr-only:checked + .reconcile-switch__track{
background: color-mix(in srgb, var(--accent) 42%, #eaf3ee);
border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.reconcile-switch > input.sr-only:checked + .reconcile-switch__track::after{
transform: translate(14px, -50%);
}
.reconcile-switch__track{
position: relative;
flex: 0 0 auto;
width: 34px;
height: 20px;
border-radius: 999px;
background: rgba(148, 163, 184, 0.36);
border: 1px solid rgba(100, 116, 139, 0.2);
transition: background 160ms ease, border-color 160ms ease;
}
.reconcile-switch__track::after{
content: "";
position: absolute;
top: 50%;
left: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.16);
transform: translateY(-50%);
transition: transform 160ms ease;
}
.modal.modal--reconcile .reconcile-modal__actions.modal-actions{
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: nowrap;
margin-top: 6px;
padding: 6px 0 0;
border-top: 1px solid rgba(17, 24, 39, 0.055);
}
.reconcile-modal__cancel{
order: 0;
margin-right: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 7px 12px;
font: inherit;
font-size: 12.75px;
font-weight: 600;
line-height: 1.2;
color: rgba(55, 65, 81, 0.84);
background: transparent;
border: none;
border-radius: 8px;
box-shadow: none;
cursor: pointer;
transition:
color 0.14s ease,
background 0.14s ease,
text-decoration-color 0.14s ease;
}
.reconcile-modal__cancel:hover{
color: rgba(17, 24, 39, 0.92);
background: rgba(17, 24, 39, 0.05);
text-decoration: underline;
text-underline-offset: 2px;
filter: none;
}
.reconcile-modal__cancel:focus-visible{
outline: 2px solid rgba(11, 61, 46, 0.18);
outline-offset: 2px;
}
.reconcile-modal__primary{
order: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 36px;
padding: 7px 26px;
min-width: 96px;
font-size: 12.75px;
font-weight: 600;
border-radius: 8px;
color: #fff;
background: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 82%, #0d1f18);
}
.reconcile-modal__primary:hover{
filter: brightness(1.04);
}
@media (min-width: 1400px){
.cal-cell{
padding: 5px 7px 4px;
}
}
.cal-daynum{
position: relative;
font-weight: 450;
font-size: 10.75px;
padding-bottom: 4px;
margin-bottom: 2px;
border-bottom: none;
text-align: right;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 4px;
color: rgba(75, 85, 99, 0.66);
}
.cal-cell:not(.cal-cell--out):not(.cal-cell--before-start) .cal-daynum{
cursor: pointer;
}
.cal-day-reconcile-btn{
flex: 0 0 auto;
order: -1;
margin-right: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
border-radius: 999px;
color: rgba(71, 85, 105, 0.62);
background: transparent;
cursor: pointer;
opacity: 0;
/* Hidden reconcile control must not steal clicks meant for “add on this day”. */
pointer-events: none;
transition:
opacity 0.14s ease,
color 0.14s ease,
background-color 0.14s ease;
}
.cal-cell:not(.cal-cell--out):not(.cal-cell--before-start):hover .cal-day-reconcile-btn,
.cal-day-reconcile-btn:hover,
.cal-day-reconcile-btn:focus-visible{
opacity: 1;
pointer-events: auto;
}
.cal-day-reconcile-btn:hover{
color: rgba(11, 61, 46, 0.92);
background: rgba(11, 61, 46, 0.08);
}
.cal-day-reconcile-btn:focus-visible{
outline: 2px solid rgba(11, 61, 46, 0.22);
outline-offset: 1px;
}
.cal-cell:not(.cal-cell--before-start){
cursor: pointer;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.cal-cell.cal-cell--before-start{
cursor: default;
}
.cal-cell.cal-cell--out:not(.cal-cell--before-start):hover{
border-color: rgba(17, 24, 39, 0.08);
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}
.cal-daynum::after{
content: "";
position: absolute;
left: 4px;
right: 4px;
bottom: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(11, 61, 46, 0.07) 10%,
rgba(11, 61, 46, 0.055) 90%,
transparent 100%
);
}
.cal-daynum-num{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
font-weight: 600;
color: rgba(31, 41, 55, 0.82);
}
.cal-daynum-num.is-today{
/* Filled rounded-rect — visually distinct from circular reconcile marks */
background: color-mix(in srgb, var(--accent) 24%, #fff);
color: rgba(11, 61, 46, 0.98);
font-weight: 700;
height: 24px;
min-width: 28px;
padding: 0 9px;
border-radius: 10px;
border: 1.5px solid rgba(11, 61, 46, 0.32);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.58),
0 1px 3px rgba(11, 61, 46, 0.12);
}
.cal-reconciled-mark{
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
border-radius: 999px;
background: rgba(22, 163, 74, 0.1);
border: 1px solid rgba(21, 128, 61, 0.24);
color: rgba(22, 101, 52, 0.78);
line-height: 0;
box-shadow: 0 1px 1px rgba(255, 255, 255, 0.6) inset;
transform: translate(2px, -2px);
}
.cal-reconciled-mark svg{
width: 10px;
height: 10px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.cal-cell-fill{
/* Previously used to push content to the bottom of the day cell. */
display: none;
}
.cal-cell-stack{
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
justify-content: flex-start;
align-items: stretch;
width: 100%;
min-height: 0;
height: 100%;
margin-top: 0;
}
/* Anchor projected balance to the bottom of the cell. The transaction
list keeps its natural height; any remaining cell height becomes the
gap above the divider so days with one transaction and days with
many share the same final-balance baseline. */
.cal-cell-stack > .cal-day-txns{
flex: 0 1 auto;
}
/* Divider above the projected balance.
Intentionally near-invisible — a soft gray-green hairline with
generous breathing room above and below. It gently separates
activity from result without ever drawing the eye. */
.cal-cell-stack > .cal-ledger-metrics{
flex: 0 0 auto;
margin-top: auto;
padding-top: 5px;
padding-bottom: 3px;
border-top: 1px solid rgba(11, 61, 46, 0.06);
min-height: 16px;
align-self: stretch;
}
/* 1–2 visible rows: transactions at the top; projected balance stays anchored below. */
.cal-cell--density-sparse:not(.cal-cell--no-tx) .cal-cell-stack > .cal-day-txns{
flex: 0 0 auto;
margin-top: 0;
padding-top: 1px;
}
.cal-cell--density-sparse:not(.cal-cell--no-tx) .cal-cell-stack > .cal-day-start-balance{
flex: 0 0 auto;
margin-bottom: 1px;
}
.cal-cell--no-tx .cal-stat.cal-balance:not(.is-negative):not(.cal-balance--below-floor):not(.cal-balance--watch-zone):not(.cal-balance--risk){
font-size: clamp(11.75px, 1.28vw, 12.75px);
font-weight: 560;
color: rgba(100, 116, 139, 0.48);
}
.cal-cell.cal-cell--no-tx:not(.cal-cell--out):not(.cal-cell--before-start):not(.cal-cell--bal-watch):not(.cal-cell--bal-warn):not(.cal-cell--bal-risk):hover{
border-color: rgba(17, 24, 39, 0.1);
box-shadow: 0 2px 6px rgba(17, 24, 39, 0.05);
}
/* In-month empty days use the same white surface as days with transactions. */
.cal-cell.cal-cell--no-tx:not(.cal-cell--out):not(.cal-cell--before-start):not(.cal-cell--bal-risk):not(.cal-cell--bal-warn):not(.cal-cell--bal-watch){
background: rgba(255, 255, 255, 0.94);
border-color: rgba(17, 24, 39, 0.068);
box-shadow: 0 1px 3px rgba(17, 24, 39, 0.038);
}
.cal-cell.cal-cell--no-tx .cal-ledger-metrics{
padding-top: 0;
margin-top: auto;
border-top: none;
min-height: 18px;
padding-bottom: 4px;
}
.cal-cell.cal-cell--no-tx .cal-cell-stack{
gap: 2px;
}
.cal-cell.cal-cell--no-tx:not(.cal-cell--out):not(.cal-cell--before-start) .cal-daynum-num:not(.is-today){
color: rgba(100, 116, 139, 0.52);
font-weight: 520;
}
.cal-cell.cal-cell--no-tx .cal-day-txns{
border-top-color: transparent;
padding-top: 0;
margin-top: 0;
min-height: 0;
flex: 0 0 auto;
opacity: 0.35;
}
/* Active days with transactions read louder than empty neutral days. */
.cal-cell.cal-cell--has-activity:not(.cal-cell--out):not(.cal-cell--before-start):not(.cal-cell--bal-risk):not(.cal-cell--bal-warn):not(.cal-cell--bal-watch){
background: rgba(255, 255, 255, 0.94);
border-color: rgba(17, 24, 39, 0.068);
box-shadow: 0 1px 3px rgba(17, 24, 39, 0.038);
}
.cal-cell.cal-cell--today:not(.cal-cell--out):not(.cal-cell--before-start){
background: color-mix(in srgb, var(--accent) 12%, #fff);
border-color: rgba(11, 61, 46, 0.24);
box-shadow:
0 1px 3px rgba(11, 61, 46, 0.09),
inset 0 0 0 1.5px rgba(11, 61, 46, 0.11);
}
.cal-cell.cal-cell--today:not(.cal-cell--out):not(.cal-cell--before-start):hover,
.cal-cell.cal-cell--today.cal-cell--reconciled:not(.cal-cell--bal-risk):not(.cal-cell--bal-warn):not(.cal-cell--out):not(.cal-cell--before-start):hover{
background: color-mix(in srgb, var(--accent) 15%, #fff);
border-color: rgba(11, 61, 46, 0.28);
box-shadow:
0 4px 14px rgba(11, 61, 46, 0.08),
inset 0 0 0 1.5px rgba(11, 61, 46, 0.13);
}
.cal-cell.cal-cell--payday:not(.cal-cell--out):not(.cal-cell--before-start):not(.cal-cell--bal-risk):not(.cal-cell--bal-warn){
background: color-mix(in srgb, #ecfdf5 16%, #fff);
border-color: rgba(4, 120, 87, 0.1);
}
.cal-cell.cal-cell--density-sparse:not(.cal-cell--no-tx) .cal-day-txns:empty{
opacity: 0.28;
min-height: 0;
flex: 0 0 auto;
}
.cal-day-txns{
display: flex;
flex-direction: column;
/* Gap tuned per density tier below. */
gap: 3px;
padding-top: 0;
margin-top: 0;
border-top: none;
align-items: stretch;
text-align: left;
width: 100%;
min-width: 0;
flex: 1 1 auto;
min-height: 0;
overflow: visible;
}
/* === Transaction row: flat, ledger-like typography ===
Medium weight by default; bold reserved for high-impact amounts. */
.cal-day-txns--uniform-label-col .cal-day-tx-line{
grid-template-columns: minmax(0, var(--cal-day-label-col-w)) auto;
}
.cal-day-tx-line{
--cal-tx-in-color: rgba(5, 118, 84, 0.74);
--cal-tx-out-color: rgba(168, 62, 62, 0.72);
font-size: var(--cal-tx-font-size, var(--month-summary-amount-font-size, 12px));
line-height: 1.28;
min-height: 16px;
max-width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
justify-content: stretch;
gap: 4px;
padding: 0 1px 0 4px;
position: relative;
font-weight: 500;
--cal-tx-label-color: rgb(17, 24, 39);
color: var(--cal-tx-label-color);
}
.cal-day-tx-line--impact-lg,
.cal-day-tx-line--impact-xxl{
font-weight: 600;
}
.cal-day-tx-line--start-balance{
padding-left: 0;
}
.cal-day-tx-line .cal-tx-label-wrap{
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-align: left;
display: flex;
align-items: baseline;
gap: 3px;
}
.cal-tx-start-anchor{
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(11, 61, 46, 0.42);
line-height: 0;
}
.cal-tx-start-anchor svg{
display: block;
}
/* Label: always black. Amount: income/expense colors via .income / .expense. */
.cal-day-tx-line .cal-tx-label,
.cal-day-tx-line .cal-amt{
font-size: inherit;
font-weight: inherit;
}
.cal-day-tx-line .cal-tx-label{
color: var(--cal-tx-label-color, rgb(17, 24, 39));
display: block;
min-width: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cal-day-tx-line .cal-amt{
flex: 0 0 auto;
text-align: right;
white-space: nowrap;
font-variant-numeric: tabular-nums;
min-width: max-content;
padding-left: 2px;
}
.cal-day-tx-line .cal-amt.income{
color: var(--cal-tx-in-color, var(--ok));
}
.cal-day-tx-line .cal-amt.expense{
color: var(--cal-tx-out-color, var(--danger));
}
/* Subtle density tweaks only — one layout system; app.js sets sparse|normal|dense. */
.cal-cell--density-sparse .cal-day-txns{
gap: 2px;
}
.cal-cell--density-sparse .cal-day-tx-line{
line-height: 1.3;
min-height: 16px;
}
.cal-cell--density-normal .cal-day-txns{
gap: 3px;
}
.cal-cell--density-normal .cal-day-tx-line{
line-height: 1.28;
min-height: 16px;
}
.cal-cell--density-dense .cal-day-txns{
gap: 2px;
}
.cal-cell--density-dense .cal-day-tx-line{
line-height: 1.26;
min-height: 15px;
gap: 3px;
padding: 0 0 0 3px;
}
.cal-cell--density-dense .cal-day-tx-line .cal-amt{
padding-left: 1px;
}
/* Row order classes only — no opacity wash (keeps one green / one red). */
.cal-day-tx-line--primary,
.cal-day-tx-line--secondary,
.cal-day-tx-line--deemph{
opacity: 1;
}
.cal-day-tx-line--kind-transfer .cal-tx-label{
font-style: normal;
letter-spacing: 0.01em;
}
.cal-day-tx-line--flag .cal-tx-label{
box-decoration-break: clone;
border-bottom: 1px dotted rgba(100, 116, 139, 0.35);
}
/* Flow modifiers kept for semantics; amount color comes from .cal-amt.income / .expense. */
/* Starting balance: anchored forecast reference (distinct from reconciled ✓). */
.cal-day-tx-line--start-balance,
.cal-day-tx-line--start-balance.cal-day-tx-line--primary,
.cal-day-tx-line--start-balance.cal-day-tx-line--secondary{
align-items: center;
color: rgba(51, 65, 85, 0.9);
background: rgba(11, 61, 46, 0.03);
border-left: 2px solid rgba(11, 61, 46, 0.12);
border-radius: 4px;
padding: 2px 4px 2px 5px;
margin-bottom: 0;
box-sizing: border-box;
cursor: pointer;
transition: background 0.12s ease, box-shadow 0.12s ease;
}
.cal-day-tx-line--start-balance:hover{
background: rgba(11, 61, 46, 0.07);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}
.cal-day-tx-line--start-balance:focus-visible{
outline: none;
background: rgba(11, 61, 46, 0.07);
box-shadow: 0 0 0 2px rgba(11, 61, 46, 0.18);
}
.cal-day-tx-line--start-balance .cal-tx-label-wrap{
gap: 8px;
align-items: center;
}
.cal-day-tx-line--start-balance .cal-tx-label{
font-weight: 550;
letter-spacing: 0.01em;
color: rgba(30, 41, 59, 0.88);
}
.cal-day-tx-line--start-balance .cal-amt{
font-weight: 550;
color: rgba(51, 65, 85, 0.84);
}
/* Category color on label column only; amount stays red/green. */
.cal-tx-label-wrap--category-fill{
background: var(--cal-tx-fill-bg);
color: var(--cal-tx-fill-fg);
border-radius: 3px;
padding: 0 2px;
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
.cal-tx-label-wrap--category-fill .cal-tx-label{
color: inherit;
}
/* Impact rows: weight only (no stripe). */
.cal-day-tx-line--expected{
cursor: pointer;
text-decoration: none;
opacity: 1;
}
.cal-day-tx-line--start-balance{
text-decoration: none;
}
.cal-day-tx-line--start-balance .cal-tx-label,
.cal-day-tx-line--start-balance .cal-amt,
.cal-day-tx-line--start-balance .cal-tx-start-anchor{
text-decoration: none;
}
.cal-day-start-balance{
flex: 0 0 auto;
margin-bottom: 2px;
}
.cal-day-tx-line--expected.cal-expected-variable .cal-tx-label,
.cal-day-tx-line--expected.cal-expected-variable .cal-amt{
font-style: italic;
}
.expected-item--variable .desc,
.expected-item--variable .expected-amt-link{
font-style: italic;
}
/* Transaction Manager (Transaction View) */
.tm{
width: min(960px, 100%);
margin: 0 auto;
}
.tm__head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px 16px;
padding: 8px 0 6px;
flex-wrap: wrap;
}
.tm__headMain{
flex: 1 1 240px;
min-width: 0;
}
.tm__headActions{
flex: 0 0 auto;
padding-top: 2px;
}
.tm-primary-action{
appearance: none;
border: 1px solid rgba(11, 61, 46, 0.22);
background: rgba(255, 255, 255, 0.9);
color: rgba(11, 61, 46, 0.88);
border-radius: 999px;
padding: 6px 13px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}
.tm-primary-action:hover{
border-color: rgba(11, 61, 46, 0.32);
background: rgba(4, 120, 87, 0.06);
}
.tm-primary-action:focus-visible{
outline: 2px solid rgba(4, 120, 87, 0.35);
outline-offset: 2px;
}
.tm__title{
margin: 0;
font-size: 1.24rem;
font-weight: 750;
letter-spacing: -0.02em;
color: rgba(17, 24, 39, 0.94);
}
.tm__sub{
margin: 3px 0 0;
max-width: 36rem;
font-size: 0.775rem;
line-height: 1.42;
color: rgba(75, 85, 99, 0.76);
}
.tm__top{
padding: 0 0 4px;
}
.tm__controlDeck{
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: 11px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.025);
overflow: hidden;
}
.tm__controlDeck__row--search{
padding: 5px 8px 4px;
border-bottom: 1px solid rgba(17, 24, 39, 0.05);
}
.tm__controlDeck__row--chips{
padding: 3px 8px 5px;
background: rgba(248, 250, 252, 0.72);
}
.tm__searchRow{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
gap: 0;
}
.tm__searchRow .tm__field--search{
max-width: none;
min-width: 0;
}
.tm__field--search input[type="search"],
.tm__field--search input{
padding: 6px 10px;
min-height: 0;
font-size: 0.8rem;
border-radius: 10px 0 0 10px;
}
.tm__moreFiltersBtn{
flex: 0 0 auto;
white-space: nowrap;
margin-left: -1px;
padding: 5px 11px;
font-size: 0.73rem;
font-weight: 600;
color: rgba(75, 85, 99, 0.76);
border-color: rgba(17, 24, 39, 0.075);
background: rgba(255, 255, 255, 0.82);
border-radius: 0 10px 10px 0;
}
.tm__moreFiltersBtn:hover{
color: rgba(17, 24, 39, 0.88);
border-color: rgba(17, 24, 39, 0.1);
}
.tm__advanced{
margin-top: 6px;
padding: 10px 10px 8px;
border-radius: 11px;
background: rgba(248, 250, 252, 0.72);
border: 1px solid rgba(17, 24, 39, 0.06);
}
.tm__toolbarRow{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
align-items: end;
}
.tm__toolbarRow + .tm__toolbarRow{
margin-top: 8px;
}
.tm__field label{
display: block;
font-size: 10.25px;
font-weight: 650;
color: rgba(75, 85, 99, 0.66);
margin-bottom: 3px;
letter-spacing: 0.02em;
}
.tm__field input,
.tm__field select{
width: 100%;
padding: 7px 9px;
border-radius: 9px;
border: 1px solid rgba(17, 24, 39, 0.1);
background: #fff;
font: inherit;
font-size: 0.8rem;
}
.tm__field input:focus,
.tm__field select:focus{
outline: none;
border-color: rgba(11, 61, 46, 0.32);
box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.1);
}
.tm__amountRow{
display: flex;
align-items: center;
gap: 8px;
}
.tm__amountRow input{ flex: 1 1 auto; }
.tm__amountSep{ color: rgba(75, 85, 99, 0.45); }
.tm__chips{
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 0;
}
.tm-chip{
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.78);
color: rgba(55, 65, 75, 0.8);
border-radius: 8px;
padding: 3px 8px;
font-size: 10.25px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 3px;
transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.tm-chip__count{
font-weight: 550;
opacity: 0.68;
}
.tm-chip:hover{
border-color: rgba(11, 61, 46, 0.12);
color: rgba(17, 24, 39, 0.86);
background: rgba(255, 255, 255, 0.92);
}
.tm-chip.is-active{
background: rgba(4, 120, 87, 0.1);
border-color: rgba(4, 120, 87, 0.24);
color: rgba(11, 61, 46, 0.95);
box-shadow: 0 0 0 1px rgba(4, 120, 87, 0.08);
font-weight: 700;
}
.tm-chip.is-active .tm-chip__count{
opacity: 0.9;
font-weight: 700;
}
.tm__insightGrid{
margin: 6px 0 0;
padding: 0;
}
.tm-insight-grid__inner{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.tm-insight-grid__inner--single{
grid-template-columns: minmax(0, 1fr);
max-width: 38rem;
}
.tm-insight-card{
border-radius: 11px;
border: 1px solid rgba(17, 24, 39, 0.07);
background: rgba(255, 255, 255, 0.92);
padding: 10px 11px 11px;
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.028);
}
.tm-insight-card__title{
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.72);
margin-bottom: 6px;
}
.tm-insight-card__body{
font-size: 0.78rem;
line-height: 1.45;
font-weight: 500;
color: rgba(55, 65, 75, 0.82);
}
.tm-insight-card__lead{
display: block;
font-size: 0.8125rem;
font-weight: 780;
line-height: 1.38;
color: rgba(120, 53, 15, 0.94);
margin: 0 0 5px;
}
.tm-insight-card__tail{
font-weight: 500;
color: rgba(55, 65, 75, 0.82);
}
.tm-insight-card--variable{
border-color: rgba(180, 83, 9, 0.24);
background: linear-gradient(165deg, rgba(255, 247, 230, 0.9) 0%, rgba(255, 255, 255, 0.97) 100%);
box-shadow:
inset 4px 0 0 rgba(217, 119, 6, 0.45),
0 1px 3px rgba(120, 53, 15, 0.07);
}
.tm-insight-card--variable .tm-insight-card__title{
color: rgba(146, 64, 14, 0.92);
font-weight: 800;
letter-spacing: 0.055em;
}
.tm-insight-card--uncat{
border-color: rgba(109, 40, 217, 0.16);
background: linear-gradient(165deg, rgba(245, 243, 255, 0.65) 0%, rgba(255, 255, 255, 0.94) 100%);
}
.tm-insight-card--bill{
border-color: rgba(11, 61, 46, 0.1);
}
.tm-insight-card--risk{
border-color: rgba(185, 28, 28, 0.18);
background: linear-gradient(165deg, rgba(254, 242, 242, 0.45) 0%, rgba(255, 255, 255, 0.94) 100%);
}
.tm-insight-card--calm{
border-color: rgba(17, 24, 39, 0.055);
background: rgba(249, 250, 251, 0.75);
}
.tm__forecastNote{
margin: 0 0 6px;
padding: 7px 10px;
border-radius: 9px;
border: 1px solid rgba(17, 24, 39, 0.08);
background: rgba(249, 250, 251, 0.92);
font-size: 0.76rem;
line-height: 1.45;
font-weight: 500;
color: rgba(75, 85, 99, 0.82);
}
.tm__forecastNote--status{
border-color: rgba(17, 24, 39, 0.07);
background: rgba(248, 250, 252, 0.95);
color: rgba(71, 85, 105, 0.88);
}
.tm__summaryLine{
margin: 4px 0 2px;
padding: 2px 2px 4px;
border-top: 1px solid rgba(17, 24, 39, 0.06);
font-size: 0.76rem;
line-height: 1.45;
font-weight: 500;
color: rgba(75, 85, 99, 0.62);
}
.tm__table{
border-radius: 11px;
overflow: hidden;
border: 1px solid rgba(17, 24, 39, 0.06);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
}
.tm-table__head{
display: grid;
grid-template-columns: 90px minmax(0, 1.7fr) 96px 84px 98px 30px;
gap: 7px 10px;
padding: 7px 10px;
border-bottom: 1px solid rgba(17, 24, 39, 0.075);
background: rgba(248, 250, 252, 0.94);
font-size: 9.75px;
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(71, 85, 105, 0.84);
text-transform: uppercase;
align-items: end;
}
.tm-table__amt{ text-align: right; }
.tm-table__action{
text-align: right;
}
.tm-table__body{
display: flex;
flex-direction: column;
}
.tm-row{
display: grid;
grid-template-columns: 90px minmax(0, 1.7fr) 96px 84px 98px 30px;
gap: 7px 10px;
padding: 7px 10px;
border-top: 1px solid rgba(17, 24, 39, 0.045);
cursor: pointer;
transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
align-items: center;
}
.tm-row:nth-child(even){
background: rgba(249, 250, 251, 0.45);
}
.tm-row:first-child{ border-top: none; }
.tm-row:hover{
background: rgba(4, 120, 87, 0.06);
box-shadow:
inset 0 0 0 1px rgba(4, 120, 87, 0.07),
0 1px 2px rgba(17, 24, 39, 0.02);
}
.tm-row--context{
background: rgba(4, 120, 87, 0.085);
box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.12);
}
.tm-row:focus-visible{
outline: none;
box-shadow: inset 0 0 0 2px rgba(4, 120, 87, 0.22);
}
.tm-col--date{
font-size: 11.5px;
font-weight: 560;
color: rgba(75, 85, 99, 0.84);
letter-spacing: 0.01em;
}
.tm-col--freq{
font-size: 10.5px;
font-weight: 500;
color: rgba(100, 116, 139, 0.68);
}
.tm-col--status{
display: flex;
justify-content: flex-start;
align-items: center;
}
.tm-col--action{
display: flex;
justify-content: flex-end;
align-items: center;
}
.tm-row__edit{
appearance: none;
margin: 0;
padding: 4px;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.08);
background: rgba(255, 255, 255, 0.78);
color: rgba(55, 65, 75, 0.62);
cursor: pointer;
line-height: 0;
transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
@media (hover: hover) and (pointer: fine){
.tm-row .tm-row__edit{
opacity: 0.25;
}
.tm-row:hover .tm-row__edit,
.tm-row:focus-within .tm-row__edit{
opacity: 0.95;
}
}
.tm-row:hover .tm-row__edit{
color: rgba(11, 61, 46, 0.8);
border-color: rgba(11, 61, 46, 0.16);
background: rgba(255, 255, 255, 0.95);
}
.tm-row__edit:hover{
color: rgba(11, 61, 46, 0.9);
border-color: rgba(11, 61, 46, 0.24);
background: rgba(255, 255, 255, 0.98);
}
.tm-row__edit:focus-visible{
outline: 2px solid rgba(4, 120, 87, 0.35);
outline-offset: 2px;
}
.tm-col--amt{
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-size: 0.8125rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
letter-spacing: -0.01em;
}
.tm-col--amt.tm-amt--calm{
font-weight: 500;
}
.tm-col--amt.tm-amt--calm.expense{
color: rgba(17, 24, 39, 0.72);
}
.tm-col--amt.tm-amt--calm.income{
color: rgba(4, 120, 87, 0.78);
font-weight: 600;
}
.tm-col--amt.tm-amt--standout{
font-weight: 700;
}
.tm-col--amt.tm-amt--standout.expense{
color: rgba(17, 24, 39, 0.9);
}
.tm-col--amt.tm-amt--standout.income{
color: rgba(4, 120, 87, 0.88);
}
.tm-desc{
font-size: 0.8rem;
font-weight: 650;
color: rgba(17, 24, 39, 0.92);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tm-desc--income{
color: rgba(4, 120, 87, 0.82);
font-weight: 600;
}
.tm-meta{
margin-top: 1px;
font-size: 9.75px;
font-weight: 450;
color: rgba(100, 116, 139, 0.56);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tm-badge{
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.04);
background: rgba(249, 250, 251, 0.92);
font-size: 9.5px;
font-weight: 600;
color: rgba(75, 85, 99, 0.66);
width: fit-content;
}
.tm-badge.is-ok{
border-color: rgba(4, 120, 87, 0.14);
background: rgba(4, 120, 87, 0.07);
color: rgba(11, 61, 46, 0.85);
}
.tm-badge.is-soft.is-ok{
border-color: rgba(4, 120, 87, 0.09);
background: rgba(4, 120, 87, 0.045);
color: rgba(11, 61, 46, 0.62);
font-weight: 550;
}
.tm-badge.is-warn{
border-color: rgba(167, 55, 68, 0.18);
background: rgba(167, 55, 68, 0.07);
color: rgba(122, 29, 43, 0.9);
font-weight: 640;
}
.tm-badge.is-muted{
border-color: rgba(17, 24, 39, 0.06);
background: rgba(17, 24, 39, 0.02);
color: rgba(100, 116, 139, 0.58);
}
.tm-badge.is-muted.is-soft{
font-weight: 520;
color: rgba(148, 163, 184, 0.72);
border-color: rgba(17, 24, 39, 0.045);
background: rgba(249, 250, 251, 0.65);
}
.tm-badge.is-accent{
border-color: rgba(180, 83, 9, 0.2);
background: rgba(254, 243, 199, 0.42);
color: rgba(146, 64, 14, 0.88);
font-weight: 640;
}
.tm-badge--confirmed{
border-color: rgba(4, 120, 87, 0.11);
background: rgba(4, 120, 87, 0.05);
color: rgba(11, 61, 46, 0.76);
font-weight: 600;
}
.tm-badge--upcoming{
border-color: rgba(100, 116, 139, 0.12);
background: rgba(248, 250, 252, 0.92);
color: rgba(71, 85, 105, 0.72);
font-weight: 600;
}
.tm-badge--variable{
border-color: rgba(180, 83, 9, 0.14);
background: rgba(254, 243, 199, 0.24);
color: rgba(120, 53, 15, 0.76);
font-weight: 600;
}
.tm-badge--uncategorized{
border-color: rgba(109, 40, 217, 0.1);
background: rgba(245, 243, 255, 0.72);
color: rgba(91, 33, 182, 0.74);
font-weight: 600;
}
.tm-empty-state{
padding: 22px 16px 24px;
text-align: center;
border-top: 1px solid rgba(17, 24, 39, 0.05);
}
.tm-empty-state__title{
font-size: 0.9rem;
font-weight: 700;
color: rgba(17, 24, 39, 0.86);
margin: 0 0 8px;
}
.tm-empty-state__lede{
margin: 0 auto;
max-width: 32rem;
font-size: 0.8rem;
line-height: 1.5;
font-weight: 500;
color: rgba(75, 85, 99, 0.68);
}
/* === Transaction Manager polish: reduce spreadsheet energy === */
/* Page header: slightly calmer subtext. */
body[data-bw-view="transactions"] .tm__sub{
max-width: 34rem;
color: rgba(71, 85, 105, 0.76);
}
body[data-bw-view="transactions"] .tm{
width: min(1080px, 100%);
}
body[data-bw-view="transactions"] .tm__head{
padding: 6px 0 4px;
}
body[data-bw-view="transactions"] .app-layout{
grid-template-columns: clamp(232px, 19vw, 272px) minmax(0, 1fr);
gap: 12px;
}
body[data-bw-view="transactions"] .cash-outlook-card__line--tertiary{
white-space: nowrap;
}
@media (max-width: 720px){
body[data-bw-view="transactions"] .cash-outlook-card__line--tertiary{
white-space: normal;
}
}
body[data-bw-view="transactions"] .main-column{
align-items: center;
}
/* Transactions sidebar: match Forecast palette — calm support panel */
body[data-bw-view="transactions"] .sidebar{
gap: 12px;
background: #f3f4f6;
padding: 4px 8px 10px 4px;
box-shadow: none;
}
body[data-bw-view="transactions"] .sidebar-sticky-head{
gap: 12px;
padding-top: 8px;
padding-bottom: 0;
border-bottom: none;
background: transparent;
}
/* Transactions: insight cards use base hierarchy; scoped spacing only. */
body[data-bw-view="transactions"] .tm__insightGrid{
margin: 4px 0 0;
}
body[data-bw-view="transactions"] .tm-insight-card:not(.tm-insight-card--variable){
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
body[data-bw-view="transactions"] .tm__field label{
color: rgba(55, 65, 81, 0.76);
}
/* Filter chips: control-deck hierarchy on transactions */
.tm__top{
padding: 0 0 5px;
}
.tm__controlDeck{
border: 1px solid rgba(17, 24, 39, 0.08);
border-radius: 11px;
background: rgba(253, 254, 253, 0.94);
box-shadow:
0 1px 3px rgba(15, 23, 42, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.tm__controlDeck__row--search{
padding: 6px 10px 8px;
border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}
.tm__controlDeck__row--chips{
padding: 8px 10px 7px;
background: rgba(248, 250, 252, 0.62);
}
.tm__searchRow{
gap: 2px;
}
.tm__field--search input[type="search"],
.tm__field--search input{
padding: 7px 11px;
border-color: rgba(17, 24, 39, 0.14);
background: #fff;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.035);
}
.tm__field--search input[type="search"]:focus,
.tm__field--search input:focus{
outline: none;
border-color: rgba(11, 61, 46, 0.26);
box-shadow:
inset 0 1px 2px rgba(15, 23, 42, 0.025),
0 0 0 2px rgba(4, 120, 87, 0.1);
}
.tm__moreFiltersBtn{
padding: 6px 11px;
font-size: 0.72rem;
font-weight: 600;
color: rgba(55, 65, 81, 0.78);
border-color: rgba(17, 24, 39, 0.12);
background: rgba(255, 255, 255, 0.95);
}
.tm__moreFiltersBtn:hover{
border-color: rgba(11, 61, 46, 0.16);
color: rgba(17, 24, 39, 0.9);
}
.tm__advanced{
margin-top: 7px;
padding: 10px 11px 9px;
border-color: rgba(17, 24, 39, 0.06);
background: rgba(248, 250, 252, 0.72);
}
.tm__chips{
gap: 6px;
}
.tm-chip{
padding: 3px 9px;
font-size: 10.5px;
font-weight: 600;
background: #fff;
border-color: rgba(17, 24, 39, 0.11);
color: rgba(30, 41, 59, 0.9);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.045);
}
.tm-chip__count{
opacity: 0.72;
}
.tm-chip:hover{
border-color: rgba(11, 61, 46, 0.2);
background: #fff;
color: rgba(15, 23, 42, 0.94);
box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06);
}
.tm-chip.is-active{
background: rgba(4, 120, 87, 0.12);
border-color: rgba(4, 120, 87, 0.34);
color: rgba(8, 60, 42, 0.98);
box-shadow:
0 0 0 1px rgba(4, 120, 87, 0.1),
0 2px 6px rgba(11, 61, 46, 0.08);
font-weight: 720;
}
/* "In this list" line */
.tm__summaryLine{
margin: 4px 2px 2px;
padding: 0 2px 5px;
border-top: none;
font-size: 11px;
font-weight: 550;
color: rgba(71, 85, 105, 0.72);
letter-spacing: 0.01em;
}
.tm__forecastNote{
margin: 0 0 7px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid rgba(17, 24, 39, 0.045);
background: rgba(248, 250, 252, 0.82);
color: rgba(71, 85, 105, 0.84);
}
.tm__forecastNote--tip{
border-color: rgba(11, 61, 46, 0.06);
background: linear-gradient(180deg, rgba(240, 249, 244, 0.72) 0%, rgba(248, 250, 252, 0.82) 100%);
color: rgba(55, 65, 81, 0.88);
}
/* Table: softer chrome, calmer separators, more touch-friendly rows. */
.tm__table{
border: 1px solid rgba(17, 24, 39, 0.065);
border-radius: 11px;
overflow: hidden;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.045);
}
.tm-table__head{
display: grid;
align-items: end;
column-gap: 8px;
row-gap: 0;
grid-template-columns: 80px minmax(0, 1.88fr) 124px 74px 82px 34px;
background: rgba(248, 250, 252, 0.88);
border-bottom: 1px solid rgba(17, 24, 39, 0.068);
padding: 8px 11px 9px;
font-size: 9.75px;
font-weight: 720;
color: rgba(51, 65, 85, 0.82);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.tm-row{
position: relative;
display: grid;
align-items: center;
column-gap: 8px;
row-gap: 0;
grid-template-columns: 80px minmax(0, 1.88fr) 124px 74px 82px 34px;
padding: 9px 11px 10px;
border-top: none;
cursor: pointer;
transition:
background 0.14s ease,
box-shadow 0.14s ease,
border-color 0.14s ease;
}
.tm-row::after{
content: "";
position: absolute;
left: 10px;
right: 10px;
bottom: 0;
height: 1px;
background: rgba(17, 24, 39, 0.048);
pointer-events: none;
}
.tm-row:last-child::after{
content: none;
}
.tm-row:nth-child(even){
background: rgba(249, 250, 251, 0.5);
}
.tm-row:hover{
background: rgba(252, 253, 254, 0.98);
box-shadow:
inset 0 0 0 1px rgba(17, 24, 39, 0.065),
0 3px 12px rgba(15, 23, 42, 0.045);
}
.tm-row:focus-visible{
box-shadow:
inset 0 0 0 2px rgba(4, 120, 87, 0.2),
0 2px 10px rgba(15, 23, 42, 0.05);
outline: none;
}
.tm-row--context{
background: rgba(4, 120, 87, 0.07);
box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.1);
}
.tm-col--date{
padding-top: 0;
font-size: 11px;
font-weight: 550;
color: rgba(71, 85, 105, 0.8);
}
/* Description hierarchy: title pops, subtitle readable. */
.tm-desc{
font-size: 0.89rem;
font-weight: 650;
color: rgba(17, 24, 39, 0.92);
line-height: 1.22;
}
.tm-meta{
margin-top: 2px;
font-size: 10px;
font-weight: 520;
color: rgba(71, 85, 105, 0.72);
line-height: 1.32;
}
/* Status pills: unified rhythm; variable draws the eye first. */
.tm-badge{
display: inline-flex;
align-items: center;
min-height: 0;
padding: 1px 6px;
border-radius: 7px;
font-size: 8.65px;
font-weight: 620;
letter-spacing: 0.03em;
border: 1px solid transparent;
}
.tm-badge--confirmed{
border-color: rgba(4, 120, 87, 0.12);
background: rgba(236, 253, 245, 0.88);
color: rgba(11, 61, 46, 0.78);
font-weight: 600;
}
.tm-badge--upcoming{
border-color: rgba(100, 116, 139, 0.12);
background: rgba(241, 245, 249, 0.75);
color: rgba(71, 85, 105, 0.64);
font-weight: 580;
}
.tm-badge--variable{
border-color: rgba(217, 119, 6, 0.35);
background: rgba(254, 236, 200, 0.65);
color: rgba(120, 53, 15, 0.92);
font-weight: 720;
}
.tm-badge--uncategorized{
border-color: rgba(109, 40, 217, 0.12);
background: rgba(245, 243, 255, 0.78);
color: rgba(91, 33, 182, 0.8);
}
/* Amount column: slightly less saturated expense for a calmer feel. */
.tm-col--amt.tm-amt--calm.expense{
color: rgba(17, 24, 39, 0.66);
}
.tm-col--amt.tm-amt--standout.expense{
color: rgba(17, 24, 39, 0.84);
}
.tm-col--amt.tm-amt--calm.income{
color: rgba(4, 120, 87, 0.72);
}
.tm-col--amt.tm-amt--standout.income{
color: rgba(4, 120, 87, 0.82);
}
.tm-col--amt{
min-width: 0;
padding-top: 0;
font-size: 0.885rem;
font-weight: 680;
letter-spacing: -0.015em;
font-feature-settings: "tnum" 1;
}
/* Edit: sits closer to row content on wide layouts. */
.tm-row__edit{
padding: 4px;
border: 1px solid transparent;
background: transparent;
color: rgba(71, 85, 105, 0.7);
border-radius: 999px;
transition: background 0.14s ease, color 0.14s ease, opacity 0.14s ease, border-color 0.14s ease;
}
@media (hover: hover) and (pointer: fine){
.tm-row .tm-row__edit{
opacity: 0.55;
}
.tm-row:hover .tm-row__edit,
.tm-row:focus-within .tm-row__edit{
opacity: 1;
}
}
.tm-row:hover .tm-row__edit{
color: rgba(30, 41, 55, 0.92);
border-color: rgba(17, 24, 39, 0.08);
background: rgba(255, 255, 255, 0.9);
}
.tm-row__edit:hover{
color: rgba(11, 61, 46, 0.95);
border-color: rgba(11, 61, 46, 0.18);
background: rgba(4, 120, 87, 0.07);
}
.tm-row__edit:focus-visible{
color: rgba(17, 24, 39, 0.92);
border-color: rgba(4, 120, 87, 0.35);
background: rgba(255, 255, 255, 0.95);
}
.tm-col--freq{
display: flex;
align-items: center;
white-space: nowrap;
font-size: 10px;
color: rgba(71, 85, 105, 0.7);
font-weight: 530;
}
.tm-col--status{
display: flex;
justify-content: flex-start;
align-items: center;
}
.tm-col--action{
justify-content: flex-end;
align-items: center;
}
@media (max-width: 980px){
.tm__toolbarRow{ grid-template-columns: 1fr 1fr; }
.tm__toolbarRow + .tm__toolbarRow{ grid-template-columns: 1fr 1fr; }
.tm-table__head, .tm-row{
grid-template-columns: 78px minmax(0, 1.45fr) 112px 70px 78px 32px;
}
}
@media (max-width: 700px){
.tm-table__head{ display: none; }
.tm-row{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
padding: 10px 11px;
}
.tm-col--date{
font-size: 11px;
font-weight: 600;
color: rgba(75, 85, 99, 0.65);
order: 0;
}
.tm-col--desc{ order: 1; }
.tm-col--desc .tm-meta{
white-space: normal;
line-height: 1.35;
}
.tm-col--amt{
text-align: left;
order: 2;
}
.tm-col--freq{
font-size: 11px;
color: rgba(75, 85, 99, 0.72);
order: 3;
}
.tm-col--status{
order: 4;
justify-content: flex-start;
}
.tm-col--action{
order: 5;
justify-content: flex-end;
}
}
.cal-tx-part.cal-day-tx-line{
cursor: pointer;
text-decoration: none;
transition:
background 0.14s ease,
box-shadow 0.14s ease,
transform 0.14s ease;
}
.cal-day-tx-line.cal-day-tx-line--expected{
transition:
background 0.14s ease,
box-shadow 0.14s ease,
transform 0.14s ease;
}
.cal-day-tx-line.cal-tx-part:hover:not(:active){
border-radius: 3px;
background: rgba(15, 23, 42, 0.025);
box-shadow: none;
}
.cal-day-tx-line.cal-day-tx-line--expected:hover:not(:active){
border-radius: 3px;
background: rgba(11, 61, 46, 0.035);
box-shadow: none;
}
.cal-day-tx-line:hover .cal-tx-label-wrap--category-fill{
filter: brightness(0.94);
}
.cal-day-tx-line:hover .cal-tx-label{
text-decoration: none;
}
/* "+N more" — pill affordance aligned with expandable busy days */
.cal-day-more{
margin-top: 2px;
align-self: flex-start;
padding: 2px 6px;
border-radius: 999px;
border: 1px solid rgba(17, 24, 39, 0.05);
background: rgba(248, 250, 252, 0.75);
width: fit-content;
max-width: 100%;
font: inherit;
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: rgba(71, 85, 105, 0.82);
cursor: pointer;
text-decoration: none;
line-height: 1.2;
box-shadow: none;
transition:
border-color 0.14s ease,
background 0.14s ease,
color 0.14s ease,
box-shadow 0.14s ease;
}
.cal-day-more:hover{
color: rgba(51, 65, 85, 0.94);
background: rgba(255, 255, 255, 0.95);
border-color: rgba(17, 24, 39, 0.1);
box-shadow: 0 3px 8px rgba(15, 23, 42, 0.07);
}
.cal-day-more:focus-visible{
outline: 2px solid rgba(4, 120, 87, 0.34);
outline-offset: 1px;
}
.cal-day-more.is-expanded{
color: rgba(100, 116, 139, 0.86);
font-size: 8.65px;
border-style: dashed;
border-color: rgba(100, 116, 139, 0.2);
background: rgba(248, 250, 252, 0.7);
}
.cal-ledger-metrics{
text-align: right;
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
margin-top: 0;
padding-top: 0;
border-top: none;
flex: 0 0 auto;
}
.cal-ledger-metrics .cal-stat{
width: 100%;
text-align: right;
}
.cal-balance-strip{
padding: 0;
border-radius: 6px;
}
/* Strip container stays visually quiet — risk/watch cues live on the balance
pill and thin cell accents, not on a second full-width color wash. */
.cal-balance-strip--cue-risk,
.cal-balance-strip--cue-warn,
.cal-balance-strip--cue-watch{
margin: 0;
padding: 1px 0 0;
background: transparent;
border-radius: 0;
box-shadow: none;
}
/* Final ledger row: amount only, right-aligned at the bottom of the
cell. The placement at the bottom communicates "end of day" — no
label needed. */
.cal-balance-strip__row{
display: flex;
align-items: baseline;
justify-content: flex-end;
gap: 6px;
min-height: 15px;
}
.cal-balance-strip__amt{
flex: 0 0 auto;
display: inline-flex;
align-items: baseline;
gap: 3px;
white-space: nowrap;
}
.cal-stat{
font-size: 12px;
color: var(--muted);
}
.cal-stat.income{ color: var(--text); }
.cal-stat.expense{ color: var(--text); }
.cal-stat.cal-balance{
/* End-of-day balance: readable anchor, secondary to transaction rows. */
font-size: clamp(12.25px, 1.32vw, 13.75px);
line-height: 1.24;
font-weight: 500;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: rgba(30, 41, 59, 0.82);
}
.cal-cell--density-sparse .cal-stat.cal-balance:not(.is-negative):not(.cal-balance--below-floor):not(.cal-balance--watch-zone){
font-size: clamp(12.75px, 1.38vw, 14.25px);
}
.cal-cell--density-dense .cal-stat.cal-balance:not(.is-negative):not(.cal-balance--below-floor){
font-size: clamp(12px, 1.32vw, 13.5px);
}
.cal-stat.cal-balance.cal-balance--quiet{
font-weight: 560;
color: rgba(51, 65, 85, 0.74);
}
.cal-stat.cal-balance.cal-balance--past-day{
font-weight: 520;
color: rgba(148, 163, 184, 0.72);
padding: 0;
background: none;
border: none;
box-shadow: none;
text-decoration: none;
}
.cal-stat.cal-balance.cal-balance--past-day.is-negative,
.cal-stat.cal-balance.cal-balance--past-day.cal-balance--risk,
.cal-stat.cal-balance.cal-balance--past-day.cal-balance--below-floor,
.cal-stat.cal-balance.cal-balance--past-day.cal-balance--watch-zone,
.cal-stat.cal-balance.cal-balance--past-day.cal-balance--month-low-mark,
.cal-stat.cal-balance.cal-balance--past-day.cal-balance--recovery-milestone,
.cal-stat.cal-balance.cal-balance--past-day.cal-balance--stabilizing,
.cal-stat.cal-balance.cal-balance--past-day.cal-balance--strong-inflow{
font-weight: 520;
font-size: clamp(12.25px, 1.32vw, 13.75px);
color: rgba(148, 163, 184, 0.72);
padding: 0;
background: none;
border: none;
box-shadow: none;
text-decoration: none;
}
.cal-stat.cal-balance.cal-balance--watch-zone{
font-weight: 520;
color: rgba(120, 98, 62, 0.72);
padding: 0 4px;
border-radius: 4px;
background: rgba(254, 252, 248, 0.42);
border: none;
box-shadow: none;
}
.cal-stat.cal-balance.cal-balance--below-floor{
font-size: clamp(12.35px, 1.32vw, 13.85px);
font-weight: 540;
color: rgba(130, 92, 52, 0.76);
padding: 0 4px;
border-radius: 4px;
background: rgba(255, 251, 246, 0.5);
border: none;
box-shadow: none;
}
.cal-stat.cal-balance.cal-balance--repeated:not(.cal-balance--risk):not(.is-negative){
font-weight: 540;
color: rgba(120, 88, 52, 0.68);
}
.cal-stat.cal-balance.cal-balance--month-low-mark{
font-weight: 620;
color: rgba(71, 85, 105, 0.72);
text-decoration: underline;
text-decoration-color: rgba(180, 83, 9, 0.28);
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
.cal-stat.cal-balance.cal-balance--risk,
.cal-stat.cal-balance.is-negative{
font-weight: 560;
font-size: clamp(12.5px, 1.34vw, 14px);
color: rgba(127, 45, 45, 0.82);
padding: 0 5px;
border-radius: 4px;
background: rgba(254, 246, 246, 0.45);
border: none;
box-shadow: none;
}
.cal-stat.cal-balance.cal-balance--risk.cal-balance--repeated,
.cal-stat.cal-balance.is-negative.cal-balance--repeated{
font-weight: 690;
color: rgba(127, 29, 29, 0.78);
}
.cal-stat.cal-balance.cal-balance--recovery-milestone{
font-weight: 560;
color: rgba(22, 101, 52, 0.68);
letter-spacing: -0.01em;
}
.cal-stat.cal-balance.cal-balance--stabilizing{
font-weight: 560;
color: rgba(22, 101, 52, 0.64);
}
.cal-stat.cal-balance.cal-balance--strong-inflow{
font-weight: 560;
color: rgba(4, 100, 78, 0.66);
}
.cal-stat.cal-balance.is-muted{
color: rgba(100, 116, 139, 0.46);
font-weight: 520;
}
.cal-stat.cal-balance.is-past{
color: rgba(55, 65, 81, 0.7);
}
.cal-balance-risk-icon{
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 4px;
color: rgba(185, 28, 28, 0.58);
opacity: 0.88;
}
.cal-balance-risk-icon svg{
display: block;
}
.cal-balance-warn-icon{
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 2px;
color: rgba(168, 118, 62, 0.42);
opacity: 0.85;
}
.cal-balance-warn-icon svg{
display: block;
width: 9px;
height: 9px;
}
.cal-forecast-note{
margin-top: 6px;
font-size: 11px;
font-weight: 650;
letter-spacing: 0.01em;
color: rgba(75, 85, 99, 0.72);
}
.cal-forecast-note.is-danger{
color: rgba(167, 55, 68, 0.72);
}
.cal-forecast-note.is-ok{
color: rgba(4, 120, 87, 0.82);
}
/* Transaction edit modal */
/* Transaction hover: custom tip (short delay; native `title` is ~500ms+). */
.fast-txn-tip{
position: fixed;
z-index: 12000;
left: 0;
top: 0;
max-width: min(340px, 92vw);
padding: 6px 9px;
font-size: 11.25px;
line-height: 1.4;
font-weight: 500;
letter-spacing: 0.005em;
color: rgba(248, 250, 252, 0.96);
background: rgba(51, 65, 85, 0.92);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 7px;
box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
pointer-events: none;
opacity: 0;
transition: opacity 70ms ease;
word-wrap: break-word;
}
.fast-txn-tip.fast-txn-tip--visible{
opacity: 1;
}
/* Cash Pressure Calendar — rich hover (HTML via app.js, all content escaped). */
.reports-risk-tip{
position: fixed;
z-index: 12100;
left: 0;
top: 0;
max-width: min(340px, 94vw);
padding: 11px 13px 11px;
font-size: 0.78rem;
line-height: 1.45;
font-weight: 510;
letter-spacing: 0.01em;
color: rgba(30, 41, 59, 0.93);
background: rgba(255, 255, 255, 0.97);
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 12px;
box-shadow:
0 4px 6px rgba(15, 23, 42, 0.03),
0 18px 42px rgba(15, 23, 42, 0.14);
pointer-events: none;
opacity: 0;
transition: opacity 80ms ease;
word-wrap: break-word;
}
.reports-risk-tip.reports-risk-tip--visible{
opacity: 1;
}
.reports-risk-tip__inner{
display: flex;
flex-direction: column;
gap: 6px;
}
.reports-risk-tip__date{
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.74);
}
.reports-risk-tip__bal{
font-size: 1.02rem;
font-weight: 780;
letter-spacing: -0.02em;
color: rgba(15, 23, 42, 0.94);
}
.reports-risk-tip__status{
display: inline-flex;
align-items: center;
width: fit-content;
max-width: 100%;
padding: 3px 9px 4px;
border-radius: 999px;
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.07em;
text-transform: uppercase;
color: rgba(51, 65, 85, 0.82);
background: rgba(241, 245, 249, 0.94);
border: 1px solid rgba(148, 163, 184, 0.2);
}
.reports-risk-tip__muted{
font-size: 0.71rem;
color: rgba(71, 85, 105, 0.76);
font-weight: 500;
}
.reports-risk-tip__flag{
font-size: 0.7rem;
font-weight: 650;
color: rgba(154, 52, 18, 0.9);
background: rgba(255, 247, 237, 0.95);
border: 1px solid rgba(251, 191, 36, 0.35);
border-radius: 8px;
padding: 5px 8px;
}
.reports-risk-tip__sub{
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.72);
margin-top: 4px;
}
.reports-risk-tip__list{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.reports-risk-tip__list li{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-size: 0.72rem;
font-weight: 550;
color: rgba(30, 41, 59, 0.9);
}
.reports-risk-tip__list li span:first-child{
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.reports-risk-tip__amt{
flex-shrink: 0;
font-weight: 760;
font-variant-numeric: tabular-nums;
}
.reports-risk-tip__amt--out{
color: rgba(127, 29, 29, 0.92);
}
.reports-risk-tip__amt--in{
color: rgba(22, 101, 52, 0.9);
}
.reports-risk-tip__recovery{
font-size: 0.72rem;
font-weight: 520;
color: rgba(22, 101, 52, 0.9);
padding: 6px 8px;
border-radius: 8px;
background: rgba(240, 253, 244, 0.75);
border: 1px solid rgba(74, 222, 128, 0.26);
}
.reports-risk-tip__foot{
font-size: 0.64rem;
color: rgba(100, 116, 139, 0.72);
padding-top: 2px;
}
.modal-overlay{
position: fixed;
inset: 0;
z-index: 1400;
background: rgba(0, 0, 0, 0.55);
display: none;
align-items: center;
justify-content: center;
padding: 16px;
}
/* Stacked on top of #txEditModal (1400), not beneath it */
.modal-overlay--nested{
z-index: 1500;
}
.modal-overlay--open{
display: flex;
}
/* Account setup: "Building your forecast..." overlay */
.bw-build-overlay{
position: fixed;
inset: 0;
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(0, 0, 0, 0.22);
backdrop-filter: blur(2px);
}
.bw-build-overlay.bw-build-overlay--open{
display: flex;
}
.bw-build-overlay__card{
width: min(520px, 92vw);
background: var(--cal-surface);
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: var(--btn-radius);
padding: 18px 18px 16px;
box-shadow: 0 18px 60px rgba(0,0,0,0.22);
text-align: center;
}
.bw-build-overlay__title{
font-size: 1.05rem;
font-weight: 800;
color: var(--accent);
}
.bw-build-overlay__bar{
height: 10px;
border-radius: 999px;
margin: 14px auto 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.08);
}
.bw-build-overlay__barFill{
height: 100%;
width: 0%;
background: color-mix(in srgb, var(--accent) 75%, #fff);
}
.modal{
width: 100%;
max-width: 420px;
border: 1px solid var(--border);
/* Match calendar chrome (--cal-surface), not generic cards (--card) */
background: var(--cal-surface);
border-radius: 14px;
padding: 16px;
box-shadow: 0 16px 48px rgba(0,0,0,0.45);
}
.modal.modal--account{
width: min(96vw, 454px);
max-width: 454px;
padding: 17px 19px 15px;
}
.modal-actions{
margin-top: 11px;
padding-top: 11px;
border-top: 1px solid rgba(0,0,0,0.08);
}
.modal--choice{
max-width: 380px;
}
/* Recurring transaction edit: apply-scope — guided choice dialog */
#txEditApplyScopeModal.modal-overlay,
#txEditDeleteScopeModal.modal-overlay{
background: rgba(15, 23, 42, 0.36);
}
.modal.modal--apply-scope{
max-width: 360px;
padding: 0;
border-radius: 14px;
box-shadow:
0 4px 6px rgba(17, 24, 39, 0.04),
0 14px 32px rgba(17, 24, 39, 0.14);
border: 1px solid rgba(17, 24, 39, 0.08);
}
.modal.modal--apply-scope > h3{
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 11px 16px;
font-size: 14.5px;
font-weight: 750;
letter-spacing: 0.2px;
line-height: 1.28;
color: #fff;
background: var(--accent);
border-radius: 14px 14px 0 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
text-transform: none;
}
.modal.modal--apply-scope .modal--apply-scope__body{
padding: 14px 18px 16px;
}
.modal.modal--apply-scope .modal--apply-scope__intro{
margin: 0 0 14px;
max-width: 26rem;
}
.modal.modal--apply-scope .modal--apply-scope__lede{
margin: 0 0 5px;
padding: 0;
font-size: 0.78rem;
line-height: 1.4;
font-weight: 500;
color: rgba(51, 65, 85, 0.72);
}
.modal.modal--apply-scope .modal--apply-scope__helper{
margin: 0;
padding: 0;
font-size: 0.75rem;
line-height: 1.42;
font-weight: 450;
color: rgba(100, 116, 139, 0.62);
}
.modal.modal--apply-scope #txEditApplyScopeErr{
margin: 0 0 10px;
}
.apply-scope-actions{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.apply-scope-option{
appearance: none;
display: block;
width: 100%;
margin: 0;
padding: 14px 15px;
border-radius: 10px;
border: 1px solid rgba(11, 61, 46, 0.1);
background: rgba(255, 255, 255, 0.98);
text-align: left;
font: inherit;
cursor: pointer;
transition:
background 0.14s ease,
border-color 0.14s ease,
box-shadow 0.14s ease;
}
.apply-scope-option--recommended:not(.apply-scope-option--selected){
border-color: rgba(11, 61, 46, 0.1);
background: rgba(255, 255, 255, 0.98);
box-shadow: none;
}
.apply-scope-option:hover:not(.apply-scope-option--selected){
border-color: rgba(11, 61, 46, 0.16);
background: color-mix(in srgb, var(--accent) 3%, #fff);
box-shadow: 0 1px 4px rgba(11, 61, 46, 0.05);
}
.apply-scope-option--selected{
border-color: rgba(11, 61, 46, 0.28);
background: color-mix(in srgb, var(--accent) 7%, #fff);
box-shadow:
0 0 0 1px rgba(11, 61, 46, 0.08),
0 2px 8px rgba(11, 61, 46, 0.07);
}
.apply-scope-option--selected .apply-scope-option__icon{
background: color-mix(in srgb, var(--accent) 12%, #fff);
color: rgba(11, 61, 46, 0.72);
}
.apply-scope-option:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 2px;
border-color: rgba(11, 61, 46, 0.28);
}
.apply-scope-option__row{
display: flex;
align-items: flex-start;
gap: 13px;
width: 100%;
}
.apply-scope-option__icon{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-top: 1px;
border-radius: 7px;
background: rgba(11, 61, 46, 0.04);
color: rgba(11, 61, 46, 0.52);
}
.apply-scope-option--recommended:not(.apply-scope-option--selected) .apply-scope-option__icon{
background: rgba(11, 61, 46, 0.04);
color: rgba(11, 61, 46, 0.52);
}
.apply-scope-option__icon--single{
background: rgba(100, 116, 139, 0.05);
color: rgba(71, 85, 105, 0.52);
}
.apply-scope-option__icon svg{
width: 16px;
height: 16px;
display: block;
fill: none;
stroke: currentColor;
stroke-width: 1.85;
stroke-linecap: round;
stroke-linejoin: round;
}
.apply-scope-option__copy{
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 6px;
padding-top: 1px;
}
.apply-scope-option__title-row{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 7px;
width: 100%;
}
.apply-scope-option__title{
font-size: 0.8rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
color: rgba(11, 61, 46, 0.88);
}
.apply-scope-option__badge{
display: inline-flex;
align-items: center;
padding: 1px 5px;
border-radius: 999px;
font-size: 0.5rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(71, 85, 105, 0.58);
background: rgba(248, 250, 252, 0.98);
border: 1px solid rgba(11, 61, 46, 0.07);
}
.apply-scope-option__hint{
font-size: 0.7rem;
font-weight: 400;
line-height: 1.42;
color: rgba(100, 116, 139, 0.56);
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
margin: 12px 0 0;
padding: 12px 0 0;
border-top: 1px solid rgba(11, 61, 46, 0.06);
gap: 10px;
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__cancel{
min-height: 40px;
padding: 8px 14px;
font-size: 0.8125rem;
font-weight: 550;
border-radius: 10px;
border-color: rgba(11, 61, 46, 0.14);
color: rgba(11, 61, 46, 0.62);
background: #fff;
box-shadow: none;
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__cancel:hover{
border-color: rgba(11, 61, 46, 0.2);
color: rgba(11, 61, 46, 0.72);
background: rgba(248, 250, 249, 0.98);
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__save{
min-height: 40px;
padding: 8px 14px;
font-size: 0.8125rem;
font-weight: 600;
border-radius: 10px;
border: 1px solid rgba(11, 61, 46, 0.22);
color: #fff;
background: var(--accent);
box-shadow: 0 1px 3px rgba(11, 61, 46, 0.12);
cursor: pointer;
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__save:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 88%, #000);
border-color: rgba(11, 61, 46, 0.28);
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__save:disabled{
opacity: 0.42;
cursor: not-allowed;
box-shadow: none;
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__save:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
outline-offset: 2px;
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__delete{
min-height: 40px;
padding: 8px 14px;
font-size: 0.8125rem;
font-weight: 600;
border-radius: 10px;
border: 1px solid rgba(185, 28, 28, 0.35);
color: #fff;
background: #b91c1c;
box-shadow: 0 1px 3px rgba(185, 28, 28, 0.18);
cursor: pointer;
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__delete:hover:not(:disabled){
background: #991b1b;
border-color: rgba(153, 27, 27, 0.45);
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__delete:disabled{
opacity: 0.42;
cursor: not-allowed;
box-shadow: none;
}
.modal.modal--apply-scope .modal-actions--apply-scope-foot .apply-scope-foot__delete:focus-visible{
outline: 2px solid color-mix(in srgb, #b91c1c 45%, transparent);
outline-offset: 2px;
}
.choice-subtitle{
margin-top: -6px;
margin-bottom: 8px;
font-size: 12px;
color: var(--muted);
}
.choice-actions{
display: grid;
gap: 10px;
justify-items: center;
}
.choice-actions button{
width: 100%;
max-width: 280px;
}
/* Choice modals: keep Back aligned with the others */
.modal--choice .modal-actions > button{
width: 100%;
max-width: 280px;
margin-left: auto;
margin-right: auto;
display: block;
}
/* Apply/Delete scope modals: keep all action buttons same width as Back */
.modal--choice .expected-delete-actions > button{
width: 100%;
max-width: 280px;
margin-left: auto;
margin-right: auto;
display: block;
}
.modal--choice .expected-remove-btn{
max-width: 280px;
}
.modal--tx-add #txAddModalFormMount{
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.modal--tx-add .tx-add-form{
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.modal--tx-add .tx-add-form__body{
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-right: 2px;
--tx-add-label-col: calc(11.25rem - 2ch);
--tx-add-label-inset: 2.1ch;
--tx-add-row-gap-x: 9.8px;
--tx-add-row-gap-y: 4px;
}
.sidebar-add-tx-form{
max-width: 100%;
}
.tx-add-form{
max-width: 100%;
}
.tx-add-form #txAddErr{
margin-top: 10px;
margin-bottom: 4px;
}
.tx-add-form .modal-actions{
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(0,0,0,0.10);
}
.modal--tx-add{
width: min(55.8vw, 637px);
max-width: none;
max-height: min(92vh, calc(100vh - 48px));
display: flex;
flex-direction: column;
overflow: hidden;
padding: 14px;
--tx-add-label-inset: 2.1ch;
--tx-add-row-gap-x: 9.8px;
--tx-add-row-gap-y: 6px;
/* Unified neutral field chrome (standard inputs only; toggles/chips stay separate). */
--tx-field-bg: #ffffff;
--tx-field-border: rgba(17, 24, 39, 0.12);
--tx-field-border-hover: rgba(17, 24, 39, 0.18);
--tx-field-radius: 8px;
--tx-field-height: 36px;
--tx-field-py: 7px;
--tx-field-px: 10px;
--tx-field-font: 13px;
--tx-field-focus-border: color-mix(in srgb, var(--accent) 50%, rgba(17, 24, 39, 0.14));
--tx-field-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}
.modal--tx-add > h3{
box-sizing: border-box;
width: calc(100% + 28px);
margin: -14px -14px 8px -14px;
padding: 6px 14px 7px calc(14px + var(--tx-add-label-inset, 3ch));
text-align: left;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
color: rgba(17, 24, 39, 0.92);
background: color-mix(in srgb, var(--accent) 10%, var(--cal-surface));
border: none;
border-bottom: 1px solid rgba(17, 24, 39, 0.07);
border-radius: 14px 14px 0 0;
}
.tx-add-form .tx-add-vspace--xs{
height: 8px;
}
.tx-add-form .tx-add-vspace--2xs{
height: 5px;
}
.tx-add-form .tx-add-vspace--sm{
height: 10px;
}
/* Tighter label column + row rhythm (left labels preserved) */
.tx-add-form .form-row-h{
gap: 8px 10px;
}
.tx-add-form .form-row-h__label{
flex: 0 0 6.75rem;
max-width: 30%;
}
.tx-add-form .form-row-h__label label{
font-size: 12px;
}
.tx-add-schedule-compact{
padding: 0;
border-bottom: none;
}
.tx-add-schedule-compact .form-row-h{
margin: 0;
}
.tx-add-schedule-compact .form-row-h + .form-row-h{
margin-top: 6px;
}
.tx-add-ends-field{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 3px;
min-width: 0;
}
.tx-add-ends-hint{
margin: 0;
font-size: 9.5px;
line-height: 1.3;
color: rgba(100, 116, 139, 0.62);
}
.tx-add-end-detail{
margin-top: 4px;
padding: 4px 0 2px;
}
.tx-add-end-detail__row + .tx-add-end-detail__row{
margin-top: 3px;
}
.tx-add-end-count-field{
display: flex;
align-items: center;
gap: 8px;
}
.tx-add-end-count-field input[type="number"]{
max-width: 7.5rem;
}
/* Twice-monthly row (add-transaction only) */
.tx-add-second-monthly{
margin: 0;
padding: 0;
}
.tx-add-second-monthly__row{
display: flex;
flex-direction: row;
align-items: center;
gap: 8px 10px;
flex-wrap: nowrap;
min-width: 0;
}
.tx-add-second-monthly__row label{
flex: 0 0 auto;
margin: 0;
padding: 0;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--muted);
white-space: nowrap;
opacity: 0.9;
}
.tx-add-second-monthly__row input[type="date"]{
flex: 1 1 auto;
width: auto;
min-width: 9.5rem;
max-width: 100%;
box-sizing: border-box;
padding: 8px 10px;
font-size: 14px;
font-weight: 500;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 8px;
background: var(--panel, #fff);
color: var(--text);
}
.tx-add-second-monthly__row input[type="date"]:focus{
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.tx-add-second-monthly .tx-add-twice-monthly-hint{
margin: 3px 0 0;
font-size: 10px;
line-height: 1.35;
color: var(--muted);
opacity: 0.82;
}
/* Date inputs match boxed fields */
.tx-add-form #txAddDate,
.tx-add-form #txAddEndDate{
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
font-size: 14px;
font-weight: 500;
padding: 8px 10px;
border: 1px solid rgba(0, 0, 0, 0.16);
border-radius: 8px;
background: var(--panel, #fff);
color: var(--text);
}
.tx-add-form #txAddDate:focus,
.tx-add-form #txAddEndDate:focus{
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* "Advanced Option" expander: a quiet single-line trigger, NOT a framed block. */
.tx-add-advanced{
margin-top: 0;
padding: 0;
border: none;
background: transparent;
}
.tx-add-advanced__expander{
appearance: none;
background: transparent;
border: none;
padding: 0 2px;
margin: 0;
font: inherit;
font-size: 10.5px;
font-weight: 600;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
border-radius: 6px;
transition: color 0.12s ease, background 0.12s ease;
text-align: left;
}
.tx-add-advanced__expander:hover{
color: rgba(17, 24, 39, 0.86);
background: rgba(15, 23, 42, 0.03);
}
.tx-add-advanced__expander.is-open{
color: rgba(17, 24, 39, 0.86);
}
.tx-add-advanced__expander-chev{
display: inline-flex;
align-items: center;
justify-content: center;
width: 8px;
height: 8px;
color: rgba(100, 116, 139, 0.58);
transition: transform 0.15s ease, color 0.12s ease;
}
.tx-add-advanced__expander-chev svg{
width: 8px;
height: 8px;
}
.tx-add-advanced__expander.is-open .tx-add-advanced__expander-chev{
transform: rotate(90deg);
color: rgba(17, 24, 39, 0.8);
}
.tx-add-advanced__expander-label{
line-height: 1.2;
white-space: nowrap;
}
.tx-add-advanced__chip-dot{
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(148, 163, 184, 0.45);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
transition: background 0.15s ease, box-shadow 0.15s ease;
flex-shrink: 0;
margin-left: 1px;
}
.tx-add-cat-color-field.tx-add-cat-color-panel{
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 8px;
width: 100%;
min-width: 0;
padding: 0;
margin: 0;
border-left: none;
}
.tx-add-cat-color-panel .cat-color-row__swatches{
gap: 5px;
overflow-x: auto;
overflow-y: hidden;
padding: 2px 1px 2px 0;
}
.tx-add-form .tx-add-cat-color-panel .cat-swatch{
width: 14px;
height: 14px;
opacity: 0.94;
border-color: rgba(15, 23, 42, 0.14);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82) inset;
transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
.tx-add-form .tx-add-cat-color-panel .cat-swatch:hover{
opacity: 1;
transform: translateY(-1px);
}
.tx-add-form .tx-add-cat-color-panel .cat-swatch.is-active{
outline: none;
opacity: 1;
transform: translateY(-1px);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.96),
0 0 0 4px color-mix(in srgb, var(--accent) 36%, transparent);
}
.tx-add-form .tx-add-cat-color-panel .cat-swatch--custom{
background: rgba(15, 23, 42, 0.03);
border-color: rgba(15, 23, 42, 0.1);
}
.tx-add-form .tx-add-cat-color-panel .cat-swatch--custom::before{
font-size: 10px;
color: rgba(100, 116, 139, 0.86);
}
.tx-add-cat-color-panel .cat-color-row__clear{
appearance: none;
justify-self: end;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0;
font: inherit;
font-size: 10.5px !important;
font-weight: 600 !important;
line-height: 1.2;
color: rgba(100, 116, 139, 0.8) !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
cursor: pointer;
box-shadow: none !important;
min-height: 0 !important;
border-radius: 0 !important;
white-space: nowrap;
}
.tx-add-cat-color-panel .cat-color-row__clear:hover{
color: rgba(17, 24, 39, 0.84) !important;
}
.tx-add-cat-color-panel .cat-color-row__clear[disabled]{
opacity: 0.38;
cursor: not-allowed;
text-decoration: none !important;
}
.modal--tx-add .tx-add-form .modal-actions.modal-actions--tx-add-foot{
flex-shrink: 0;
margin-top: 12px;
padding-top: 12px;
border-top-color: rgba(17, 24, 39, 0.07);
position: sticky;
bottom: 0;
z-index: 2;
background: var(--cal-surface);
}
.tx-add-actions-row.row.two{
gap: 8px;
}
.tx-add-btn-primary{
padding: 5px 12px !important;
font-size: 12.5px !important;
font-weight: 600 !important;
min-height: 0 !important;
border-radius: 8px !important;
line-height: 1.2;
background: var(--accent) !important;
border: 1px solid color-mix(in srgb, var(--accent) 82%, #0d1f18) !important;
color: #fff !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.14) inset,
0 1px 2px rgba(11, 61, 46, 0.1) !important;
}
.tx-add-btn-primary:hover{
background: color-mix(in srgb, var(--accent) 92%, #000) !important;
border-color: color-mix(in srgb, var(--accent) 72%, #0d1f18) !important;
color: #fff !important;
}
@media (min-width: 769px){
.modal--tx-add .tx-add-form .modal-actions.modal-actions--tx-add-foot .tx-add-actions-row.row.two{
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 4px 8px;
}
.modal--tx-add .tx-add-actions-row .tx-add-btn-primary{
flex: 0 0 auto;
width: auto !important;
max-width: 100%;
min-width: 6.85rem;
min-height: 36px !important;
padding: 5px 16px !important;
box-sizing: border-box;
}
.modal--tx-add .tx-add-actions-row #txAddCancel{
align-self: center;
}
}
.tx-add-form .tx-add-vspace{
height: 12px;
flex-shrink: 0;
}
.tx-add-form .tx-add-vspace--lg{
height: 18px;
}
/* Add-transaction modal: calmer density + amount emphasis */
.modal--tx-add .tx-add-form .form-row-h__label label{
font-size: 12px;
opacity: 0.92;
}
.modal--tx-add .tx-add-optional-mark{
margin-left: 2px;
font-weight: 400;
font-style: italic;
font-size: 0.82em;
letter-spacing: 0.01em;
text-transform: none;
color: rgba(100, 116, 139, 0.72);
opacity: 1;
}
.modal--tx-add .kind-toggle{
border: 1px solid var(--tx-field-border);
background: var(--tx-field-bg);
}
.modal--tx-add .kind-toggle .kind-opt{
padding: 5px 10px;
min-height: var(--tx-field-height);
font-size: var(--tx-field-font);
color: rgba(71, 85, 105, 0.58);
}
.modal--tx-add .kind-toggle .kind-opt + .kind-opt{
border-left-color: rgba(17, 24, 39, 0.08);
}
/* Add transaction: one neutral field style for all standard editable controls. */
.modal--tx-add :is(
.tx-add-form .form-row-h__field > input:not([type="checkbox"]):not([type="radio"]),
.tx-add-form .form-row-h__field > select,
.tx-add-form .category-combobox__input,
.tx-add-form .input-notes-flex,
.tx-add-form #txAddDate,
.tx-add-form #txAddEndDate,
.tx-add-form #txAddCategoryId,
.tx-add-form .tx-add-end-count-field input[type="number"],
.tx-add-schedule-compact .form-row-h__field > select,
.tx-add-end-detail__row .form-row-h__field > input,
.tx-add-end-detail__row .form-row-h__field > select,
#txAddRecurringBlock .tx-add-second-monthly-field input[type="date"]
){
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: var(--tx-field-height);
padding: var(--tx-field-py) var(--tx-field-px);
font-size: var(--tx-field-font);
font-weight: 500;
line-height: 1.25;
color: var(--text);
border: 1px solid var(--tx-field-border);
border-radius: var(--tx-field-radius);
background: var(--tx-field-bg);
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.modal--tx-add :is(
.tx-add-form .form-row-h__field > input:not([type="checkbox"]):not([type="radio"]),
.tx-add-form .form-row-h__field > select,
.tx-add-form .category-combobox__input,
.tx-add-form .input-notes-flex,
.tx-add-form #txAddDate,
.tx-add-form #txAddEndDate,
.tx-add-form #txAddCategoryId,
.tx-add-form .tx-add-end-count-field input[type="number"],
.tx-add-schedule-compact .form-row-h__field > select,
.tx-add-end-detail__row .form-row-h__field > input,
.tx-add-end-detail__row .form-row-h__field > select,
#txAddRecurringBlock .tx-add-second-monthly-field input[type="date"]
):hover{
border-color: var(--tx-field-border-hover);
}
.modal--tx-add :is(
.tx-add-form .form-row-h__field > input:not([type="checkbox"]):not([type="radio"]):focus,
.tx-add-form .form-row-h__field > select:focus,
.tx-add-form .category-combobox__input:focus,
.tx-add-form .input-notes-flex:focus,
.tx-add-form #txAddDate:focus,
.tx-add-form #txAddEndDate:focus,
.tx-add-form #txAddCategoryId:focus,
.tx-add-form .tx-add-end-count-field input[type="number"]:focus,
.tx-add-schedule-compact .form-row-h__field > select:focus,
.tx-add-end-detail__row .form-row-h__field > input:focus,
.tx-add-end-detail__row .form-row-h__field > select:focus,
#txAddRecurringBlock .tx-add-second-monthly-field input[type="date"]:focus
){
outline: none;
border-color: var(--tx-field-focus-border);
box-shadow: var(--tx-field-focus-shadow);
background: var(--tx-field-bg);
}
.modal--tx-add .tx-add-form .money-input{
display: flex;
align-items: stretch;
min-height: var(--tx-field-height);
border: 1px solid var(--tx-field-border);
border-radius: var(--tx-field-radius);
background: var(--tx-field-bg);
overflow: hidden;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.modal--tx-add .tx-add-form .money-input:hover{
border-color: var(--tx-field-border-hover);
}
.modal--tx-add .tx-add-form .money-input:focus-within{
border-color: var(--tx-field-focus-border);
box-shadow: var(--tx-field-focus-shadow);
}
.modal--tx-add .tx-add-form .money-input input{
flex: 1 1 auto;
min-width: 0;
min-height: 0;
border: none;
background: transparent;
border-radius: 0;
padding: var(--tx-field-py) var(--tx-field-px) var(--tx-field-py) 4px;
font-size: var(--tx-field-font);
font-weight: 600;
font-variant-numeric: tabular-nums;
line-height: 1.25;
-moz-appearance: textfield;
}
.modal--tx-add .tx-add-form .money-input input:focus{
outline: none;
box-shadow: none;
}
.modal--tx-add .tx-add-form .money-input input::-webkit-outer-spin-button,
.modal--tx-add .tx-add-form .money-input input::-webkit-inner-spin-button{
-webkit-appearance: none;
opacity: 0.35;
margin-left: 4px;
}
.modal--tx-add .tx-add-form .money-input input:hover::-webkit-inner-spin-button,
.modal--tx-add .tx-add-form .money-input input:focus::-webkit-inner-spin-button{
opacity: 0.7;
}
.modal--tx-add .tx-add-form .money-input__prefix{
display: flex;
align-items: center;
padding: 0 4px 0 var(--tx-field-px);
font-size: var(--tx-field-font);
font-weight: 500;
color: rgba(75, 85, 99, 0.82);
background: transparent;
border: none;
}
.modal--tx-add .tx-add-form #txAddDate::-webkit-calendar-picker-indicator,
.modal--tx-add .tx-add-form #txAddEndDate::-webkit-calendar-picker-indicator,
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-field input[type="date"]::-webkit-calendar-picker-indicator{
opacity: 0.45;
filter: grayscale(1);
transform: scale(0.92);
transform-origin: right center;
cursor: pointer;
}
.modal--tx-add .tx-add-form #txAddDate:hover::-webkit-calendar-picker-indicator,
.modal--tx-add .tx-add-form #txAddEndDate:hover::-webkit-calendar-picker-indicator,
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-field input[type="date"]:hover::-webkit-calendar-picker-indicator{
opacity: 0.75;
}
.modal--tx-add .tx-add-form .tx-add-vspace--xs{
height: 6px;
}
.modal--tx-add .tx-add-form .tx-add-vspace--sm{
height: 8px;
}
.modal--tx-add .tx-add-form .tx-add-vspace--2xs{
height: 4px;
}
.modal--tx-add .tx-add-form .tx-add-vspace{
height: 8px;
}
.modal--tx-add .tx-add-form .tx-add-vspace--lg{
height: 12px;
}
.modal--tx-add #txAddRecurringBlock .tx-add-vspace--2xs{
display: none;
height: 0;
}
/* Label column + fields share one grid; labels right-aligned on a common axis. */
.modal--tx-add .tx-add-form .form-row-h{
display: grid;
grid-template-columns: var(--tx-add-label-col, calc(11.25rem - 2ch)) minmax(0, 1fr);
align-items: center;
gap: var(--tx-add-row-gap-y, 6px) var(--tx-add-row-gap-x, 14px);
}
.modal--tx-add .tx-add-form .form-row-h:has(.tx-add-category-field),
.modal--tx-add .tx-add-form .form-row-h.tx-add-cat-color-row{
align-items: start;
}
.modal--tx-add .tx-add-form .form-row-h:has(.tx-add-category-field) .form-row-h__label,
.modal--tx-add .tx-add-form .form-row-h.tx-add-cat-color-row .form-row-h__label{
align-items: flex-start;
padding-top: 8px;
min-height: 0;
}
.modal--tx-add .tx-add-form .form-row-h__label,
.modal--tx-add .tx-add-schedule-compact .form-row-h__label,
.modal--tx-add .tx-add-end-detail__row .form-row-h__label,
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-row .form-row-h__label,
.modal--tx-add .tx-add-variable-block .form-row-h__label,
.modal--tx-add .tx-add-notes-row .form-row-h__label,
.modal--tx-add .tx-add-cat-color-row .form-row-h__label{
flex: none;
max-width: none;
padding: 0 var(--tx-add-label-inset, 3ch) 0 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-end;
align-self: center;
min-height: 0;
text-align: right;
}
.modal--tx-add .tx-add-form .form-row-h:has(.tx-add-category-field) .form-row-h__label{
align-items: flex-start;
padding-top: 8px;
min-height: 0;
}
.modal--tx-add .tx-add-form .form-row-h__label label,
.modal--tx-add .tx-add-schedule-compact .form-row-h__label label,
.modal--tx-add .tx-add-end-detail__row .form-row-h__label label,
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-row .form-row-h__label label,
.modal--tx-add .tx-add-variable-block .form-row-h__label label,
.modal--tx-add .tx-add-notes-row .form-row-h__label label,
.modal--tx-add .tx-add-cat-color-row .form-row-h__label label{
width: 100%;
text-align: right;
font-size: 12px;
}
.modal--tx-add .tx-add-form .form-row-h__field{
min-width: 0;
}
.modal--tx-add .tx-add-schedule-compact .form-row-h,
.modal--tx-add .tx-add-end-detail__row,
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-row{
display: grid;
grid-template-columns: var(--tx-add-label-col, calc(11.25rem - 2ch)) minmax(0, 1fr);
align-items: center;
gap: var(--tx-add-row-gap-y, 6px) var(--tx-add-row-gap-x, 14px);
}
.modal--tx-add .tx-add-variable-form-row{
display: contents;
}
.modal--tx-add .tx-add-cat-color-row{
margin-top: 2px;
}
.modal--tx-add .tx-add-cat-color-row .tx-add-cat-color-field{
align-self: center;
min-width: 0;
}
.modal--tx-add .tx-add-notes-row{
margin-top: 2px;
}
.modal--tx-add .tx-add-form .tx-add-variable-field{
gap: 2px;
margin-top: 2px;
}
.modal--tx-add .tx-add-form .tx-add-variable-field .reimbursable-field__hint{
font-size: 10px;
opacity: 0.78;
}
/* Compact "Variable amount" toggle: checkbox inline with label, hint below. */
.tx-add-variable-toggle{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
cursor: pointer;
user-select: none;
padding: 0;
width: 100%;
max-width: 100%;
}
.tx-add-variable-toggle__head{
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
gap: 0.4rem;
width: auto;
max-width: 100%;
}
.tx-add-variable-toggle input[type="checkbox"]{
margin: 0.12em 0 0;
flex: 0 0 auto;
flex-shrink: 0;
accent-color: var(--accent);
}
.tx-add-variable-toggle__label{
font-size: 11px;
font-weight: 500;
color: rgba(55, 65, 81, 0.86);
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
flex: 0 1 auto;
line-height: 1.25;
}
.tx-add-variable-toggle__hint{
display: block;
margin: 0;
padding-left: 0;
font-size: 9px;
font-weight: 400;
line-height: 1.3;
color: rgba(100, 116, 139, 0.56);
letter-spacing: 0.005em;
white-space: nowrap;
max-width: none;
}
/* Recurring sub-cluster: lighter background to mark it as secondary configuration. */
.modal--tx-add #txAddScheduleCompact + .tx-add-vspace{
height: 8px;
}
.modal--tx-add #txAddRecurringBlock{
box-sizing: border-box;
width: 100%;
margin-top: 6px;
padding: 8px 0 5px;
border-radius: 6px;
background: rgba(15, 23, 42, 0.011);
border: 1px solid rgba(17, 24, 39, 0.03);
}
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-row{
width: 100%;
margin: 3px 0 0;
padding: 0;
box-sizing: border-box;
grid-template-columns: var(--tx-add-label-col, calc(11.25rem - 2ch)) minmax(0, 1fr);
column-gap: var(--tx-add-row-gap-x, 14px);
row-gap: var(--tx-add-row-gap-y, 4px);
align-items: center;
}
.modal--tx-add .tx-add-variable-block{
display: grid;
grid-template-columns: var(--tx-add-label-col, calc(11.25rem - 2ch)) minmax(0, 1fr);
column-gap: var(--tx-add-row-gap-x, 9.8px);
row-gap: 2px;
align-items: center;
width: 100%;
margin: 3px 0 0;
padding: 0 0 4px;
box-sizing: border-box;
/* Width of “Amount varies” at 12px/600 — aligns caption with label text start. */
--tx-add-variable-label-text-width: 6.5rem;
}
.modal--tx-add .tx-add-variable-block .form-row-h__label{
grid-column: 1;
grid-row: 1;
justify-content: flex-end;
align-items: center;
align-self: center;
padding-right: var(--tx-add-label-inset, 2.1ch);
text-align: right;
}
.modal--tx-add .tx-add-variable-block .form-row-h__label label{
text-align: right;
}
.modal--tx-add .tx-add-variable-block .tx-add-variable-field-wrap{
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
justify-content: flex-start;
align-self: center;
width: 100%;
min-width: 0;
padding-top: 0;
}
.modal--tx-add .tx-add-variable-block__caption{
grid-column: 1 / -1;
grid-row: 2;
margin: 1px 0 0;
padding: 0;
padding-left: max(
0px,
calc(
var(--tx-add-label-col, calc(11.25rem - 2ch)) - var(--tx-add-label-inset, 2.1ch) - var(--tx-add-variable-label-text-width, 6.5rem) + 0.6em
)
);
max-width: none;
font-size: 9.5px;
line-height: 1.38;
color: rgba(100, 116, 139, 0.56);
text-align: left;
}
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-row .form-row-h__label{
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: 2px;
min-width: 0;
min-height: 30px;
align-self: stretch;
padding: 0 var(--tx-add-label-inset, 3ch) 0 0;
text-align: right;
}
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-row .form-row-h__label label{
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--muted);
text-transform: none;
line-height: 1.25;
width: 100%;
max-width: 100%;
text-align: right;
white-space: nowrap;
}
.modal--tx-add .tx-add-variable-block .form-row-h__label label{
white-space: normal;
line-height: 1.3;
overflow-wrap: anywhere;
}
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-field{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 3px;
min-width: 0;
}
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-field input[type="date"]{
width: 100%;
}
.modal--tx-add #txAddRecurringBlock .tx-add-twice-monthly-hint{
margin: 0;
padding: 0;
font-size: 9px;
line-height: 1.28;
color: rgba(100, 116, 139, 0.54);
text-align: left;
white-space: nowrap;
max-width: none;
}
.modal--tx-add .tx-add-variable-block .tx-add-variable-field-wrap input[type="checkbox"]{
margin: 0;
flex-shrink: 0;
accent-color: var(--accent);
cursor: pointer;
}
.modal--tx-add .tx-add-advanced{
margin-top: 5px;
}
.modal--tx-add .tx-add-advanced__expander{
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
width: auto;
max-width: max-content;
box-sizing: border-box;
padding: 0 2px 0 var(--tx-add-label-inset, 3ch);
min-height: 30px;
margin: 0;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--muted);
white-space: nowrap;
}
.modal--tx-add .tx-add-advanced__expander-label{
white-space: nowrap;
flex-shrink: 0;
}
.modal--tx-add .tx-add-advanced__chip-dot[hidden]{
display: none !important;
}
.modal--tx-add .tx-add-advanced__panel{
margin-top: 0;
padding-left: 0;
border-left: none;
width: 100%;
box-sizing: border-box;
}
.modal--tx-add .tx-add-notes-row .form-row-h__field{
align-self: center;
min-width: 0;
}
.modal--tx-add .kind-toggle{
max-width: 100%;
}
/* Account setup wizard: slightly more breathing room between fields */
body.account-setup-page .tx-add-vspace{
height: calc(14px * 0.92);
}
body.account-setup-page .tx-add-vspace--lg{
height: calc(18px * 0.92);
}
/* Account setup wizard: variable-amount control + unified helper copy */
body.account-setup-page .account-setup-step3-form .reimbursable-field{
margin-top: 2px;
}
body.account-setup-page .account-setup-step3-form .reimbursable-field__lead{
gap: 8px;
}
body.account-setup-page .account-setup-step3-form .reimbursable-field__label{
font-size: var(--as-helper-size);
font-weight: 450;
letter-spacing: 0.01em;
text-transform: none;
color: var(--as-label-secondary-color);
line-height: var(--as-helper-line);
text-align: left;
}
body.account-setup-page .account-setup-step3-form .reimbursable-field__hint{
font-size: var(--as-helper-size);
line-height: var(--as-helper-line);
font-weight: 400;
color: var(--as-helper-color);
opacity: 1;
}
/* Account setup: Repeats + Ends on — labels on one row, controls stacked below */
body.account-setup-page .account-setup-repeat-duo{
display: grid;
grid-template-columns: 1fr;
gap: 8px 12px;
align-items: start;
min-width: 0;
}
body.account-setup-page .account-setup-repeat-duo:has(.tx-add-schedule-field--second-day:not([hidden])){
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.account-setup-page .account-setup-repeat-duo__stack{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 6px;
min-width: 0;
}
body.account-setup-page .account-setup-repeat-duo__label{
display: block;
margin: 0;
}
body.account-setup-page .account-setup-repeat-duo .tx-add-recurrence-select{
width: 100%;
max-width: 12rem;
min-width: 0;
}
body.account-setup-page .account-setup-tx-schedule-block .account-setup-repeat-duo .tx-add-recurrence-select,
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid .tx-add-recurrence-select{
max-width: none;
width: 100%;
}
body.account-setup-page .account-setup-repeat-duo__stack.tx-add-schedule-field--second-day .tx-add-recurrence-select{
max-width: 12rem;
}
body.account-setup-page .account-setup-repeat-duo__stack.tx-add-schedule-field--end-date input[type="date"]{
width: 100%;
max-width: 12rem;
min-width: 0;
}
body.account-setup-page .account-setup-repeat-duo__stack.tx-add-schedule-field--end-date label{
margin: 0;
}
body.account-setup-page .account-setup-schedule-summary{
margin: 10px 0 0;
font-size: 0.84rem;
line-height: 1.45;
color: rgba(17, 24, 39, 0.62);
}
body.account-setup-page .tx-add-schedule-toolbar__left{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
}
body.account-setup-page .tx-add-schedule-toolbar__left .tx-add-schedule-field--end-mode .tx-add-recurrence-select{
max-width: 9.5rem;
}
body.account-setup-page .tx-add-schedule-toolbar__right{
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: flex-start;
}
/* Account setup wizard: bring the repeat toolbar rule closer to color swatches */
body.account-setup-page .tx-add-schedule-toolbar + .tx-add-vspace.tx-add-vspace--lg{
height: 10px;
}
/* Account setup wizard: pull the bottom section up slightly */
body.account-setup-page .tx-add-schedule-toolbar{
padding-top: 4px;
padding-bottom: 8px;
}
/* Divider above "Repeats" (was below the schedule toolbar); keep toolbar flush with no extra rule under it */
body.account-setup-page .account-setup-step3-form .account-setup-repeat-row-h{
border-top: none;
padding-top: 0;
margin-top: 0;
}
body.account-setup-page .account-setup-step3-form .tx-add-schedule-toolbar{
border-bottom: none;
padding-bottom: 2px;
padding-top: 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-notes-row{
margin-top: 20px;
gap: 2px;
}
/* Account setup wizard: Notes — secondary field */
body.account-setup-page .account-setup-step3-form label[for="asTxNotes"],
body.account-setup-page .account-setup-step3-form label[for="asExpTxNotes"]{
display: block;
margin-bottom: 0;
font-size: var(--as-helper-size);
font-weight: 400;
letter-spacing: 0.01em;
text-transform: none;
color: var(--as-label-secondary-color);
line-height: 1.35;
text-align: left;
}
body.account-setup-page #asTxNotes.input-notes-flex,
body.account-setup-page #asExpTxNotes.input-notes-flex{
min-height: 42px;
font-size: 0.9375rem;
font-weight: 450;
padding: 8px 12px;
line-height: 1.3;
}
body.account-setup-page #asTxNotes.input-notes-flex::placeholder,
body.account-setup-page #asExpTxNotes.input-notes-flex::placeholder{
color: rgba(148, 163, 184, 0.62);
font-weight: 400;
}
/* Account setup wizard: align color label with other field labels */
body.account-setup-page .cat-color-row{
align-items: flex-start;
}
body.account-setup-page .cat-color-row__label{
/* Match .form-row-h label column */
flex: 0 0 6.75rem;
max-width: 28%;
white-space: normal;
}
body.account-setup-page .cat-color-row__optional{
/* Keep 2nd line, but identical label styling */
display: block;
margin-top: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--muted);
opacity: 1;
}
/* Account setup wizard only: hide color picker row (keep it elsewhere, e.g. Calendar) */
body.account-setup-page .account-setup-step3-form .cat-color-row{
display: none;
}
/* Color row is hidden — collapse its surrounding spacers so Notes + footer sit higher */
body.account-setup-page .account-setup-step3-form .tx-add-vspace--lg:has(+ .cat-color-row),
body.account-setup-page .account-setup-step3-form .cat-color-row + .tx-add-vspace{
display: none;
height: 0;
margin: 0;
}
/* Step 3/4 transaction form: compact single-screen layout (no scroll ~900px viewport) */
body.account-setup-page #accountSetupWizardPanel2[data-step3-phase="form"].account-setup-wizard__panel,
body.account-setup-page #accountSetupWizardPanel3[data-expense-phase="form"].account-setup-wizard__panel{
padding: 12px var(--as-card-pad-x) 6px;
min-height: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"]),
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"]){
min-height: 0;
border-color: rgba(11, 61, 46, 0.24);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 12px 38px rgba(15, 23, 42, 0.09),
0 30px 68px rgba(11, 61, 46, 0.08);
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-wizard__viewport,
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-wizard__viewport{
flex: 0 1 auto;
min-height: 0;
overflow: visible;
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-wizard__stepHead,
body.account-setup-page:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-wizard__stepHead{
margin-bottom: clamp(0.32rem, 0.7vw, 0.45rem);
padding-top: 0;
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-wizard__stepLabel,
body.account-setup-page:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-wizard__stepLabel{
margin-bottom: 0.22rem;
}
body.account-setup-page:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-wizard__subeyebrow,
body.account-setup-page:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-wizard__subeyebrow{
margin-top: var(--as-wizard-title-subtitle-gap);
margin-bottom: clamp(0.16rem, 0.38vw, 0.26rem);
line-height: 1.36;
}
body.account-setup-page .account-setup-step3-form__body{
display: flex;
flex-direction: column;
gap: 0;
}
body.account-setup-page .account-setup-step3-form__body > .tx-add-vspace{
height: 7px;
}
body.account-setup-page .account-setup-step3-form__body > .tx-add-vspace--sm{
height: 8px;
}
body.account-setup-page .account-setup-step3-form__body > .tx-add-vspace--lg{
display: none;
height: 0;
margin: 0;
}
body.account-setup-page .account-setup-step3-form__body > .form-row-h{
gap: 3px;
margin: 0;
}
body.account-setup-page .account-setup-step3-form .form-row-h__field input:not([type="checkbox"]):not([type="radio"]),
body.account-setup-page .account-setup-step3-form .form-row-h__field select,
body.account-setup-page .account-setup-step3-form .form-row-h__field .money-input:not(.money-input--currency) input{
min-height: 38px;
padding-top: 6px;
padding-bottom: 6px;
font-size: 0.9375rem;
}
body.account-setup-page .account-setup-step3-form .form-row-h__field .money-input.money-input--currency{
--money-prefix-inset: 12px;
--money-prefix-gap: 3px;
border-radius: 10px;
}
body.account-setup-page .account-setup-step3-form .form-row-h__field .money-input.money-input--currency .money-input__prefix{
font-size: 0.9375rem;
color: rgba(71, 85, 105, 0.58);
}
body.account-setup-page .account-setup-step3-form .form-row-h__field .money-input.money-input--currency input{
min-height: 38px;
padding: 6px 12px 6px calc(var(--money-prefix-inset) + 0.5rem + var(--money-prefix-gap));
font-size: 0.9375rem;
line-height: 1.3;
}
body.account-setup-page .account-setup-step3-form .kind-toggle{
max-width: 100%;
border-radius: 9px;
}
body.account-setup-page .account-setup-step3-form .kind-toggle .kind-opt{
min-height: 36px;
padding: 7px 10px;
font-size: 0.8125rem;
}
body.account-setup-page .account-setup-step3-form .account-setup-category-picker{
padding: 8px 10px 9px;
gap: 6px;
border-radius: 9px;
border-color: rgba(17, 24, 39, 0.09);
}
body.account-setup-page .account-setup-step3-form .account-setup-field-hint--tight{
font-size: 0.75rem;
line-height: 1.28;
font-weight: 400;
margin: 0 0 4px;
color: var(--as-helper-color);
}
body.account-setup-page .account-setup-step3-form .as-quick-chips{
gap: 4px;
margin: 0;
}
body.account-setup-page .account-setup-step3-form .as-quick-chip{
padding: 3px 8px;
font-size: 0.71875rem;
line-height: 1.22;
font-weight: 500;
}
body.account-setup-page .account-setup-step3-form .category-search__input,
body.account-setup-page .account-setup-step3-form .form-row-h__field .category-search input[type="text"]{
min-height: 36px;
padding: 5px 11px;
font-size: 0.9375rem;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-block{
gap: 4px;
margin-top: 0;
padding-top: 6px;
}
body.account-setup-page .account-setup-tx-schedule-block{
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 5px;
padding-top: 5px;
border-top: 1px solid rgba(17, 24, 39, 0.055);
}
body.account-setup-page .account-setup-step3-form .account-setup-repeat-row-h{
border-top: none;
padding-top: 0;
margin-top: 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-repeat-duo__stack{
gap: 4px;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto;
gap: 8px 12px;
align-items: start;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid__cell{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid__cell--date{
grid-column: 1;
grid-row: 1;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid__cell--repeat{
grid-column: 2;
grid-row: 1;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid__cell--second{
grid-column: 3;
grid-row: 1;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid:has(.account-setup-tx-schedule-grid__cell--second:not([hidden])){
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid__cell--repeat .account-setup-tx-schedule-grid__summary{
margin: 2px 0 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-block > .account-setup-tx-variable-inline{
display: flex;
flex-direction: column;
align-items: flex-start;
margin: 8px 0 0;
padding: 0;
width: 100%;
}
/* Schedule row: Next Date + Repeat — matched labels and control chrome */
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid .account-setup-tx-schedule-grid__label{
display: block;
margin: 0;
padding: 0;
min-height: calc(0.8125rem * 1.3);
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--as-label-primary-color);
line-height: 1.3;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid input[type="date"],
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid .account-setup-tx-schedule-grid__control,
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid .tx-add-recurrence-select{
box-sizing: border-box;
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
justify-self: stretch;
min-height: 38px;
height: 38px;
margin: 0;
padding: 6px 11px;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3;
color: rgba(17, 24, 39, 0.94);
background: #fff;
border: 1px solid rgba(17, 24, 39, 0.34);
border-radius: 10px;
appearance: none;
-webkit-appearance: none;
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background-color 160ms ease;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid .tx-add-recurrence-select{
padding-right: 2rem;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 10px 6px;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid input[type="date"]:hover,
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid .tx-add-recurrence-select:hover{
border-color: rgba(11, 61, 46, 0.36);
box-shadow: 0 0 0 1px rgba(11, 61, 46, 0.1);
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid input[type="date"]:focus,
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid .tx-add-recurrence-select:focus{
outline: none;
border-color: color-mix(in srgb, var(--accent) 52%, rgba(17, 24, 39, 0.22));
box-shadow: 0 0 0 3px rgba(11, 61, 46, 0.1);
background: #fff;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid input[type="date"]::-webkit-datetime-edit,
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid input[type="date"]::-webkit-datetime-edit-fields-wrapper{
padding: 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid input[type="date"]::-webkit-datetime-edit{
font-size: 0.875rem;
font-weight: 500;
color: rgba(17, 24, 39, 0.94);
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid input[type="date"]::-webkit-calendar-picker-indicator{
margin: 0 0 0 4px;
opacity: 0.55;
cursor: pointer;
}
body.account-setup-page .account-setup-step3-form .account-setup-schedule-summary{
margin: 0;
font-size: 0.6875rem;
line-height: 1.28;
font-weight: 400;
color: rgba(100, 116, 139, 0.58);
}
body.account-setup-page .account-setup-step3-form .tx-add-schedule-toolbar{
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-ends-wrap{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
width: 100%;
min-width: 0;
margin: -7px 0 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-ends-wrap:has(.tx-add-schedule-toolbar[hidden]){
display: none;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-ends-wrap .tx-add-schedule-toolbar{
padding-top: 0;
padding-bottom: 0;
margin: 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-ends-wrap .tx-add-schedule-toolbar__left{
display: block;
width: 100%;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-ends-wrap .tx-add-schedule-field--end-mode{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1px;
width: 100%;
min-width: 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-ends-wrap .tx-add-schedule-field--end-mode .account-setup-repeat-duo__label{
margin: 0;
padding: 0;
min-height: calc(0.8125rem * 1.3);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.3;
color: var(--as-label-primary-color);
}
body.account-setup-page .account-setup-tx-ends-wrap .tx-add-schedule-toolbar{
padding-bottom: 0;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-variable-inline{
margin-top: 0;
margin-bottom: 0;
gap: 4px;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-variable-inline .reimbursable-field__hint{
margin-top: 4px;
padding-left: 0;
white-space: nowrap;
}
body.account-setup-page .account-setup-tx-variable-inline{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
margin: 0;
padding: 0;
width: 100%;
cursor: pointer;
}
body.account-setup-page .account-setup-tx-variable-inline .reimbursable-field__lead{
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
margin: 0;
width: 100%;
flex-wrap: nowrap;
}
body.account-setup-page .account-setup-tx-variable-inline .reimbursable-field__label{
flex: 0 1 auto;
min-width: 0;
}
body.account-setup-page .account-setup-tx-variable-inline input[type="checkbox"]{
width: 1rem;
height: 1rem;
margin: 0;
flex-shrink: 0;
}
body.account-setup-page .account-setup-tx-variable-inline .reimbursable-field__hint{
display: block;
flex: none;
width: auto;
max-width: none;
margin: 2px 0 0;
padding-left: 0;
box-sizing: border-box;
font-size: 0.6875rem;
line-height: 1.32;
font-weight: 400;
color: rgba(100, 116, 139, 0.52);
opacity: 1;
white-space: nowrap;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-variable-inline .reimbursable-field__label{
font-size: 0.8125rem;
font-weight: 500;
color: var(--as-label-primary-color);
}
body.account-setup-page .account-setup-tx-notes-row{
gap: 2px;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-actions--shell,
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-actions--shell{
min-height: 56px;
padding: 14px calc(var(--as-card-pad-x) + 2px) 16px calc(var(--as-card-pad-x) + 8px);
margin-top: 8px;
--as-tx-form-footer-btn-h: 44px;
align-items: center;
border-top-color: rgba(11, 61, 46, 0.09);
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-actions__cluster,
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-actions__cluster{
gap: 16px;
align-items: center;
min-height: var(--as-tx-form-footer-btn-h);
flex: 0 0 auto;
}
body.account-setup-page .account-setup-actions__txFormBtns{
display: none;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 12px;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-actions__forward,
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-actions__forward{
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 12px;
margin-left: auto;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-actions__txFormBtns,
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-actions__txFormBtns{
display: inline-flex;
}
@media (max-width: 619px){
body.account-setup-page .account-setup-tx-schedule-grid{
display: flex;
flex-direction: column;
gap: 8px;
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
body.account-setup-page .account-setup-step3-form .account-setup-tx-schedule-grid:has(.account-setup-tx-schedule-grid__cell--second:not([hidden])){
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
}
body.account-setup-page #accountSetupWizardPanel2 .account-setup-step3-form__body > .form-row-h:last-child,
body.account-setup-page #accountSetupWizardPanel3 .account-setup-step3-form__body > .form-row-h:last-child{
gap: 5px;
margin-bottom: 0;
}
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"]) .account-setup-actions--shell,
body.account-setup-page .account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"]) .account-setup-actions--shell{
--as-tx-form-footer-radius: 9px;
}
body.account-setup-page
.account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"])
.account-setup-actions--shell
#asTxSaveIncomeBtn.top-nav__logout,
body.account-setup-page
.account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"])
.account-setup-actions--shell
#asExpSaveBtn.top-nav__logout{
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--as-tx-form-footer-btn-h);
height: var(--as-tx-form-footer-btn-h);
min-width: 5.75rem;
padding: 0 26px;
border-radius: 12px;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
}
body.account-setup-page
.account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"])
.account-setup-actions--shell
#asTxCancelIncomeBtn.secondary,
body.account-setup-page
.account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"])
.account-setup-actions--shell
#asExpCancelBtn.secondary{
min-height: var(--as-tx-form-footer-btn-h);
min-width: 5.25rem;
padding: 10px 20px;
font-weight: 500;
color: rgba(11, 61, 46, 0.58);
background: #fff;
border-color: rgba(11, 61, 46, 0.14);
box-shadow: none;
}
body.account-setup-page
.account-setup-wizard__shell:has(#accountSetupWizardPanel2[data-step3-phase="form"])
.account-setup-actions--shell
#asTxCancelIncomeBtn.secondary:hover,
body.account-setup-page
.account-setup-wizard__shell:has(#accountSetupWizardPanel3[data-expense-phase="form"])
.account-setup-actions--shell
#asExpCancelBtn.secondary:hover{
color: rgba(11, 61, 46, 0.76);
border-color: rgba(11, 61, 46, 0.22);
background: color-mix(in srgb, var(--accent) 4%, #fff);
}
/* Less air between the repeat toolbar rule and Notes */
.tx-add-form .tx-add-schedule-toolbar + .tx-add-vspace.tx-add-vspace--lg{
height: 10px;
}
.tx-add-form #txAddRecurringBlock + .tx-add-vspace{
height: 8px;
}
.tx-add-form > .row > div > label:first-child,
.tx-add-form > label[for="txAddDate"],
.tx-add-form > label[for="txAddCategoryId"],
.tx-add-form > label[for="txAddNotes"],
.tx-add-form #txAddRecurringBlock > label:not(.reimbursable-field):not(.tx-add-variable-toggle),
.tx-add-form #txAddRecurringBlock .expected-second-day-row > label{
display: block;
margin-bottom: 0;
padding-top: 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--muted);
opacity: 0.88;
}
.tx-add-form .reimbursable-field .reimbursable-field__label{
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--muted);
opacity: 1;
}
.tx-add-form .tx-add-schedule-question{
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--muted);
opacity: 0.88;
margin-bottom: 10px;
}
.tx-add-form .tx-add-schedule-field label{
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--muted);
opacity: 0.88;
}
.tx-add-form .tx-add-repeat-yes{
font-size: 14px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--text);
opacity: 1;
}
.tx-add-form input:not([type="radio"]):not([type="checkbox"]),
.tx-add-form select{
color: var(--text);
font-weight: 500;
font-size: 14px;
}
.tx-add-form .money-input input{
font-weight: 500;
}
.tx-add-form .tx-add-category-field{
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.tx-add-form .tx-add-category-hint{
margin: 0 0 6px;
font-size: 0.78rem;
line-height: 1.35;
color: rgba(71, 85, 105, 0.82);
}
.tx-add-form .tx-quick-chips{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
margin: 0 0 6px;
}
.tx-add-form .tx-quick-chip{
appearance: none;
border: 1px solid rgba(0, 0, 0, 0.1);
background: #fff;
color: rgba(17, 24, 39, 0.78);
font: inherit;
font-size: 0.78rem;
font-weight: 500;
padding: 3px 9px;
border-radius: 999px;
cursor: pointer;
line-height: 1.25;
white-space: nowrap;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tx-add-form .tx-quick-chip--browse{
border-style: dashed;
color: rgba(71, 85, 105, 0.88);
background: rgba(15, 23, 42, 0.02);
}
/* Modal: one stable chip row so Income/Expense toggle does not resize the dialog */
.modal--tx-add .tx-quick-chips{
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
min-height: 30px;
align-content: center;
box-sizing: border-box;
}
.modal--tx-add .tx-quick-chips.is-empty{
visibility: hidden;
pointer-events: none;
}
.modal--tx-add .tx-add-category-field{
min-height: 0;
}
@media (min-width: 769px){
.modal--tx-add .tx-quick-chips{
padding-bottom: 1px;
}
}
.tx-add-field-validation{
margin: 4px 0 0;
min-height: 0;
font-size: 10.5px;
line-height: 1.35;
color: #b42318;
font-weight: 500;
}
.tx-add-field-validation:empty{
display: none;
}
.tx-add-advanced__panel{
margin-top: 2px;
padding-left: 0;
border-left: none;
}
.tx-add-advanced__panel .tx-add-notes-row{
margin-top: 2px;
}
.tx-add-btn-primary:disabled,
.modal--tx-add .tx-add-btn-primary:disabled{
opacity: 0.42;
cursor: not-allowed;
box-shadow: none !important;
}
.tx-add-form .tx-quick-chip:hover{
background: rgba(0, 0, 0, 0.025);
border-color: rgba(0, 0, 0, 0.16);
}
.tx-add-form .tx-quick-chip.is-active{
background: color-mix(in srgb, var(--accent) 10%, #fff);
border-color: color-mix(in srgb, var(--accent) 45%, rgba(0, 0, 0, 0.1));
color: color-mix(in srgb, var(--accent) 80%, #000);
}
.tx-add-form .tx-quick-chip:focus-visible{
outline: 3px solid rgba(11, 61, 46, 0.18);
outline-offset: 2px;
}
.tx-add-form .category-combobox__input--prefilled{
background: color-mix(in srgb, var(--accent) 6%, #fff);
transition: background 600ms ease, border-color 0.12s ease;
}
.modal--tx-add .tx-add-form .category-combobox__input--prefilled:not(:focus){
background: color-mix(in srgb, var(--accent) 5%, var(--tx-field-bg));
border-color: color-mix(in srgb, var(--accent) 28%, var(--tx-field-border));
}
.category-combobox{
position: relative;
width: 100%;
max-width: 100%;
}
.category-combobox__input{
display: block;
width: 100%;
box-sizing: border-box;
font: inherit;
font-size: 14px;
padding: 8px 10px;
border: 1px solid rgba(0,0,0,0.16);
border-radius: 8px;
background: var(--panel, #fff);
color: var(--text);
}
.category-combobox__input:focus{
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}
.category-combobox__list{
position: absolute;
left: 0;
right: 0;
top: calc(100% + 4px);
z-index: 1200;
margin: 0;
padding: 4px 0;
list-style: none;
max-height: 240px;
overflow-y: auto;
border: 1px solid rgba(0,0,0,0.12);
border-radius: 8px;
background: var(--panel, #fff);
color: var(--text);
box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}
.category-combobox__option{
padding: 8px 12px;
font-size: 14px;
cursor: pointer;
}
.category-combobox__option:hover,
.category-combobox__option.is-active{
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.category-combobox__option--add{
font-weight: 600;
color: var(--accent);
border-top: 1px solid rgba(0,0,0,0.08);
margin-top: 2px;
padding-top: 10px;
}
.category-combobox__option--create{
display: flex;
align-items: baseline;
gap: 6px;
border-top: 1px solid rgba(0,0,0,0.08);
margin-top: 2px;
padding-top: 10px;
font-weight: 500;
}
.category-combobox__option--create:hover,
.category-combobox__option--create.is-active{
background: color-mix(in srgb, rgb(34, 120, 72) 10%, transparent);
}
.category-combobox__plus{
flex-shrink: 0;
font-weight: 600;
color: color-mix(in srgb, rgb(34, 120, 72) 75%, var(--muted));
}
.category-combobox__create-text{
color: color-mix(in srgb, rgb(34, 120, 72) 55%, var(--muted));
font-size: 13px;
}
/* Add-transaction: repeat row + optional last txn (wide toolbar) */
.tx-add-schedule-toolbar{
display: flex;
flex-wrap: wrap;
gap: 16px 28px;
align-items: flex-start;
padding: 8px 0 12px;
border-bottom: 1px solid rgba(0,0,0,0.10);
}
.tx-add-schedule-toolbar__left{
flex: 1 1 280px;
min-width: 0;
}
.tx-add-schedule-toolbar__left .tx-add-schedule-field--end-date{
margin-top: 10px;
margin-left: 18px;
max-width: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px 10px;
flex-wrap: wrap;
min-width: 0;
}
.tx-add-schedule-toolbar__left .tx-add-schedule-field--end-date label{
width: auto;
flex-shrink: 0;
margin: 0;
}
.tx-add-schedule-toolbar__left .tx-add-schedule-field--end-date input[type="date"]{
width: auto;
max-width: 12.5rem;
flex: 0 1 auto;
min-width: 0;
}
.tx-add-schedule-toolbar__right{
flex: 0 1 14rem;
min-width: 10rem;
}
/* Hide right column when only "Ends after" (and optional last-txn field) can live there; "Ends on" is under the recurring row. */
.tx-add-schedule-toolbar__right:not(:has(#txAddEndCountWrap:not([hidden]))):not(:has(#txAddLastTxnFieldWrap:not([hidden]))){
display: none;
}
.tx-add-repeat-row{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
}
.tx-add-repeat-yes{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
cursor: pointer;
margin: 0;
white-space: nowrap;
}
.tx-add-repeat-yes input{
width: 18px;
height: 18px;
accent-color: var(--accent);
}
.tx-add-recurrence-inline{
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
font-size: 14px;
color: var(--muted);
white-space: nowrap;
}
.tx-add-recurrence-inline__every{
color: var(--muted);
font-size: 14px;
flex-shrink: 0;
}
.tx-add-recurrence-select{
flex: 1 1 auto;
min-width: 0;
width: auto;
max-width: 9.25rem;
font-size: 14px;
padding: 6px 8px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--panel);
color: var(--text);
}
.tx-add-recurrence-inline[hidden]{
display: none !important;
}
.tx-add-schedule-field{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.tx-add-schedule-field label{
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: none;
letter-spacing: 0;
}
.tx-add-schedule-field input[type="date"]{
width: 100%;
max-width: 100%;
font-size: 14px;
padding: 8px 6px;
border: none;
border-bottom: 1px solid rgba(0,0,0,0.18);
border-radius: 0;
background: transparent;
color: var(--text);
}
.tx-add-schedule-field input[type="number"]{
width: 100%;
max-width: 100%;
font-size: 14px;
padding: 8px 6px;
border: none;
border-bottom: 1px solid rgba(0,0,0,0.18);
border-radius: 0;
background: transparent;
color: var(--text);
}
.tx-add-schedule-field input[type="number"]:focus{
outline: none;
border-bottom-color: var(--accent);
box-shadow: none;
}
.tx-add-schedule-field input[type="date"]:focus{
outline: none;
border-bottom-color: var(--accent);
box-shadow: none;
}
.tx-add-schedule-field--last{
position: relative;
}
.tx-add-field-hint{
font-size: 11px;
color: var(--muted);
margin-top: 2px;
}
.tx-add-schedule-field--last[hidden]{
display: none !important;
}
.tx-add-schedule-field--end-count[hidden]{
display: none !important;
}
.tx-add-schedule-field--end-date[hidden]{
display: none !important;
}
.tx-edit-ends-after-row{
display: flex;
align-items: baseline;
gap: 8px;
}
.tx-edit-top{
margin: -12px -14px 0;
padding: 12px 14px 12px;
background: var(--accent);
border-radius: 14px 14px 0 0;
border-bottom: 1px solid rgba(0,0,0,0.18);
}
.tx-edit-mode-banner{
font-size: 1.05rem;
font-weight: 600;
margin: 0 0 10px;
line-height: 1.25;
color: rgba(255,255,255,0.92);
}
/* Series notes moved into the main panel (recurring only); keep spacing from Account/Category. */
.tx-edit-notes-row--in-panel{
margin-top: 10px;
}
.tx-edit-schedule--locked select:disabled,
.tx-edit-schedule--locked label[for="instanceRecurrence"]{
opacity: 0.9;
}
/* Transaction edit sheet: wide enough for color swatches + Clear (aligns with Add transaction). */
#txEditInner.modal{
width: min(92vw, 640px);
max-width: 640px;
max-height: min(92vh, 720px);
overflow-y: auto;
padding: 10px 12px 8px;
box-sizing: border-box;
--tx-field-bg: #ffffff;
--tx-field-border: rgba(17, 24, 39, 0.12);
--tx-field-border-hover: rgba(17, 24, 39, 0.18);
--tx-field-radius: 8px;
--tx-field-height: 36px;
--tx-field-py: 7px;
--tx-field-px: 10px;
--tx-field-font: 13px;
--tx-field-focus-border: color-mix(in srgb, var(--accent) 50%, rgba(17, 24, 39, 0.14));
--tx-field-focus-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}
#txEditInner.modal.modal--expected-edit{
width: min(92vw, 640px);
max-width: 640px;
padding: 0;
}
/* Footer: Delete left · Close | Save right. */
#txEditInner > .modal-actions.modal-actions--tx-edit-foot{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 10px 12px;
margin-top: 6px;
padding: 12px 0 8px;
border-top: 1px solid rgba(17, 24, 39, 0.05);
}
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row,
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row--main{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
width: auto;
flex: 0 1 auto;
min-width: 0;
margin-left: auto;
}
#txEditInner > .modal-actions #txEditSaveRow.tx-edit-save-cell{
display: flex;
flex: 0 1 auto;
align-items: stretch;
min-width: 0;
max-width: 10.5rem;
}
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row #txEditSave,
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row #txEditRecurringUpdateBtn{
width: auto;
min-width: 5.75rem;
max-width: none;
box-sizing: border-box;
padding: 0 16px;
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 12.5px;
}
#txEditSave,
#txEditRecurringUpdateBtn{
background: var(--accent);
border: 1px solid color-mix(in srgb, var(--accent) 82%, #0d1f18);
color: #fff;
font-weight: 650;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.16) inset,
0 1px 2px rgba(11, 61, 46, 0.12);
}
#txEditSave:hover,
#txEditRecurringUpdateBtn:hover{
background: color-mix(in srgb, var(--accent) 92%, #000);
border-color: color-mix(in srgb, var(--accent) 72%, #0d1f18);
color: #fff;
filter: none;
}
#txAddCancel,
#txEditCancel,
#txEditInner #txEditCancel.tx-edit-cancel-btn,
#txEditInner #txEditCancel.tx-edit-dismiss--close{
flex: 0 0 auto;
width: auto !important;
min-width: 0;
min-height: 32px;
padding: 0 12px !important;
background: transparent !important;
border: 1px solid rgba(17, 24, 39, 0.1) !important;
color: rgba(71, 85, 105, 0.78) !important;
font-weight: 500 !important;
font-size: 12px !important;
border-radius: 8px;
box-shadow: none !important;
transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
#txAddCancel:hover,
#txEditCancel:hover,
#txEditInner #txEditCancel.tx-edit-dismiss--close:hover{
background: rgba(248, 250, 252, 0.95) !important;
border-color: rgba(17, 24, 39, 0.14) !important;
color: rgba(51, 65, 85, 0.9) !important;
filter: none;
}
#txEditInner > .modal-actions > #txEditDelete.danger,
#txEditDelete.danger.tx-edit-delete-link{
align-self: center;
flex: 0 0 auto;
margin: 0;
width: auto;
min-height: 30px;
padding: 0 12px;
background: #fff !important;
border: 1px solid rgba(167, 55, 68, 0.26) !important;
color: rgba(167, 55, 68, 0.72) !important;
font-weight: 550 !important;
font-size: 12px !important;
text-decoration: none;
box-shadow: none !important;
border-radius: 8px;
transition:
background 0.14s ease,
border-color 0.14s ease,
color 0.14s ease,
box-shadow 0.14s ease;
}
#txEditInner > .modal-actions > #txEditDelete.danger:hover,
#txEditInner > .modal-actions > #txEditDelete.danger:focus-visible,
#txEditDelete.danger.tx-edit-delete-link:hover,
#txEditDelete.danger.tx-edit-delete-link:focus-visible{
background: rgba(167, 55, 68, 0.04) !important;
border-color: rgba(167, 55, 68, 0.38) !important;
color: rgba(167, 55, 68, 0.86) !important;
text-decoration: none;
filter: none !important;
box-shadow: none !important;
}
#txEditInner > .modal-actions > #txEditDelete.danger:active,
#txEditDelete.danger.tx-edit-delete-link:active{
background: rgba(167, 55, 68, 0.08) !important;
border-color: rgba(167, 55, 68, 0.42) !important;
color: rgba(167, 55, 68, 0.9) !important;
filter: none !important;
}
#txEditInner > .modal-actions > #txEditDelete.danger:focus-visible,
#txEditDelete.danger.tx-edit-delete-link:focus-visible{
outline: 2px solid color-mix(in srgb, var(--danger) 24%, transparent) !important;
outline-offset: 2px !important;
}
#txEditInner #txEditRecurringPrimaryActions.tx-edit-recurring-update-row{
display: none !important;
}
.tx-edit-divider{
margin: 0 -14px 8px;
border-bottom: 1px solid rgba(17, 24, 39, 0.06);
}
.tx-edit-account-category-row{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: start;
}
.tx-edit-account-category-row.tx-edit-account-category-row--recurring{
grid-template-columns: 1fr 1fr;
}
@media (max-width: 519px){
.tx-edit-account-category-row.tx-edit-account-category-row--recurring{
grid-template-columns: 1fr;
}
}
.modal--expected-edit{
max-width: 620px;
max-height: min(92vh, 820px);
overflow-y: auto;
padding: 0;
}
/* Recurring: green header flush with modal top (same bleed as .modal h3 on Add transaction). */
.modal--expected-edit .tx-edit-top{
margin: 0;
padding: 10px 14px 8px;
border-radius: 14px 14px 0 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.modal--expected-edit #txEditIntro{
/* Remove top whitespace above the green header; keep side padding for errors/hidden fields. */
padding: 0 14px;
}
.modal--expected-edit #txEditIntro #txEditErr{
margin: 0 0 10px;
}
/* Form rhythm inside the transaction sheet: light breathing room between rows. */
#expectedEditInstancePanel .tx-add-vspace{
height: 5px;
}
#expectedEditInstancePanel .tx-add-vspace--lg{
height: 8px;
}
#expectedEditInstancePanel .tx-add-vspace--sm{
height: 4px;
}
.modal--expected-edit > .modal-actions{
margin: 0 14px 8px;
padding-top: 4px;
}
/* === Recurring/transaction edit modal: density + hierarchy polish === */
.modal--expected-edit .tx-edit-mode-banner{
font-size: 0.88rem;
font-weight: 650;
margin: 0;
letter-spacing: -0.01em;
line-height: 1.25;
color: rgba(255, 255, 255, 0.95);
}
.modal--expected-edit .tx-edit-top #txEditNotesRow{
/* Notes is moved out for recurring; hide any residual notes inside the header. */
display: none;
}
.modal--expected-edit #expectedEditInstancePanel{
padding: 10px 14px 8px;
}
.modal--expected-edit #txEditRecurringScheduleWrap + .tx-add-vspace{
height: 6px;
}
.modal--expected-edit #expectedEditInstancePanel #txEditRecurringScheduleWrap{
margin-top: 2px;
}
/* Edit Transaction: Date → Repeat had no .tx-add-vspace (unlike other rows). */
#txEditInner:not(.modal--expected-edit) #expectedEditInstancePanel > #txEditRecurringScheduleWrap{
margin-top: 5px;
}
.modal--tx-add #txAddScheduleCompact{
margin-top: 4px;
}
.modal--expected-edit #txEditAccountCol{
margin-top: 4px;
padding-top: 6px;
border-top: 1px solid rgba(17, 24, 39, 0.04);
}
.modal--expected-edit .tx-edit-notes-row{
margin-top: 0;
padding-top: 0;
border-top: none;
}
.modal--expected-edit .tx-edit-notes-in-advanced{
margin-top: 6px;
padding-top: 4px;
border-top: 1px solid rgba(17, 24, 39, 0.04);
}
.modal--expected-edit .tx-edit-notes-in-advanced .form-row-h__label label{
font-size: 10px;
font-weight: 500;
color: rgba(100, 116, 139, 0.68);
}
.modal--expected-edit #expectedEditInstancePanel > .tx-edit-divider{
display: none;
}
/* Label column + vertical padding so fields are not stacked tight. */
.modal--expected-edit .form-row-h{
gap: 4px 8px;
}
.modal--expected-edit #expectedEditInstancePanel > .form-row-h,
.modal--expected-edit #expectedEditInstancePanel .tx-edit-recurrence-ends-row > .form-row-h,
.modal--expected-edit #expectedEditInstancePanel #txEditAccountCol .form-row-h,
.modal--expected-edit #expectedEditInstancePanel .tx-edit-notes-row.form-row-h,
.modal--expected-edit #expectedEditInstancePanel .tx-edit-cat-color-row.form-row-h,
.modal--expected-edit #expectedEditInstancePanel .tx-edit-notes-in-advanced.form-row-h,
.modal--expected-edit #expectedEditInstancePanel .expected-second-day-row.form-row-h,
.modal--expected-edit #expectedEditInstancePanel .tx-edit-ends-detail.form-row-h{
padding-block: 4px;
}
.modal--expected-edit .form-row-h__label{
flex: 0 0 5.75rem;
max-width: 30%;
}
.modal--expected-edit .form-row-h__label label{
font-size: 10.5px;
color: rgba(100, 116, 139, 0.72);
font-weight: 500;
}
.modal--expected-edit .tx-add-optional-mark{
margin-left: 2px;
font-weight: 400;
font-style: italic;
font-size: 0.82em;
letter-spacing: 0.01em;
text-transform: none;
color: rgba(100, 116, 139, 0.72);
}
/* Edit transaction: one neutral field style (Amount, Category, Date, Repeat, Ends, Account, Notes). */
#txEditInner #expectedEditInstancePanel :is(
.form-row-h__field > input:not([type="checkbox"]):not([type="radio"]),
.form-row-h__field > select,
.form-row-h__field .category-combobox__input,
#txEditNotes.input-notes-flex,
#txEditDate,
#instanceRecurrence,
#instanceEndsMode,
#instanceAccountId,
.tx-edit-ends-after-row > input,
.expected-second-day-row .form-row-h__field > input[type="date"]
){
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-height: var(--tx-field-height);
padding: var(--tx-field-py) var(--tx-field-px);
font-size: var(--tx-field-font);
font-weight: 500;
line-height: 1.25;
color: var(--text);
border: 1px solid var(--tx-field-border);
border-radius: var(--tx-field-radius);
background: var(--tx-field-bg);
opacity: 1;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#txEditInner #expectedEditInstancePanel :is(
.form-row-h__field > input:not([type="checkbox"]):not([type="radio"]),
.form-row-h__field > select,
.form-row-h__field .category-combobox__input,
#txEditNotes.input-notes-flex,
#txEditDate,
#instanceRecurrence,
#instanceEndsMode,
#instanceAccountId,
.tx-edit-ends-after-row > input,
.expected-second-day-row .form-row-h__field > input[type="date"]
):hover:not(:disabled){
border-color: var(--tx-field-border-hover);
}
#txEditInner #expectedEditInstancePanel :is(
.form-row-h__field > input:not([type="checkbox"]):not([type="radio"]):focus,
.form-row-h__field > select:focus,
.form-row-h__field .category-combobox__input:focus,
#txEditNotes.input-notes-flex:focus,
#txEditDate:focus,
#instanceRecurrence:focus,
#instanceEndsMode:focus,
#instanceAccountId:focus,
.tx-edit-ends-after-row > input:focus,
.expected-second-day-row .form-row-h__field > input[type="date"]:focus
){
outline: none;
border-color: var(--tx-field-focus-border);
box-shadow: var(--tx-field-focus-shadow);
background: var(--tx-field-bg);
}
#txEditInner #expectedEditInstancePanel :is(
.form-row-h__field > input:not([type="checkbox"]):not([type="radio"]):disabled,
.form-row-h__field > select:disabled,
.form-row-h__field .category-combobox__input:disabled
){
opacity: 0.58;
cursor: not-allowed;
background: rgba(15, 23, 42, 0.04);
border-color: rgba(17, 24, 39, 0.08);
color: rgba(71, 85, 105, 0.65);
}
#txEditInner #expectedEditInstancePanel #instanceEndsMode.tx-field--inactive{
opacity: 1;
cursor: default;
pointer-events: none;
background: var(--tx-field-bg);
border-color: var(--tx-field-border);
color: var(--text);
}
#txEditInner #expectedEditInstancePanel .form-row-h__field > input[type="date"]{
padding-right: 8px;
}
#txEditInner #expectedEditInstancePanel .form-row-h__field > input[type="date"]::-webkit-calendar-picker-indicator,
#txEditInner #expectedEditInstancePanel #txEditDate::-webkit-calendar-picker-indicator{
margin: 0;
opacity: 0.5;
cursor: pointer;
}
#txEditInner #expectedEditInstancePanel .form-row-h__field > input[type="date"]:hover:not(:disabled)::-webkit-calendar-picker-indicator,
#txEditInner #expectedEditInstancePanel #txEditDate:hover:not(:disabled)::-webkit-calendar-picker-indicator{
opacity: 0.72;
}
#txEditInner #expectedEditInstancePanel .money-input{
display: flex;
align-items: stretch;
min-height: var(--tx-field-height);
border: 1px solid var(--tx-field-border);
border-radius: var(--tx-field-radius);
background: var(--tx-field-bg);
overflow: hidden;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
#txEditInner #expectedEditInstancePanel .money-input:hover{
border-color: var(--tx-field-border-hover);
}
#txEditInner #expectedEditInstancePanel .money-input:focus-within{
border-color: var(--tx-field-focus-border);
box-shadow: var(--tx-field-focus-shadow);
}
#txEditInner #expectedEditInstancePanel .money-input input{
flex: 1 1 auto;
min-width: 0;
min-height: 0;
border: none;
background: transparent;
border-radius: 0;
padding: var(--tx-field-py) var(--tx-field-px) var(--tx-field-py) 4px;
font-size: var(--tx-field-font);
font-weight: 500;
font-variant-numeric: tabular-nums;
line-height: 1.25;
color: var(--text);
-moz-appearance: textfield;
}
#txEditInner #expectedEditInstancePanel .money-input input:focus{
outline: none;
box-shadow: none;
}
#txEditInner #expectedEditInstancePanel .money-input__prefix{
display: flex;
align-items: center;
padding: 0 4px 0 var(--tx-field-px);
font-size: var(--tx-field-font);
font-weight: 500;
color: rgba(75, 85, 99, 0.82);
background: transparent;
border: none;
}
#txEditInner #expectedEditInstancePanel .form-row-h__field > input:not([type="checkbox"]):not([type="radio"]),
#txEditInner #expectedEditInstancePanel .form-row-h__field > select,
#txEditInner #expectedEditInstancePanel .form-row-h__field > .money-input,
#txEditInner #expectedEditInstancePanel .form-row-h__field > .kind-toggle{
width: 98%;
max-width: 98%;
box-sizing: border-box;
}
.modal--tx-add .tx-add-form .form-row-h__field > input:not([type="checkbox"]):not([type="radio"]),
.modal--tx-add .tx-add-form .form-row-h__field > select,
.modal--tx-add .tx-add-form .form-row-h__field > .money-input,
.modal--tx-add .tx-add-form .form-row-h__field > .kind-toggle,
.modal--tx-add .tx-add-form .form-row-h__field.tx-add-category-field{
width: 98%;
max-width: 98%;
box-sizing: border-box;
}
.modal--tx-add .tx-add-form .tx-add-category-field .tx-quick-chips{
width: 100%;
max-width: 100%;
}
.modal--tx-add .tx-add-form .tx-add-category-field .category-combobox,
.modal--tx-add .tx-add-form .tx-add-category-field .category-combobox__input{
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Type toggle: same filled Income/Expense treatment as Add transaction. */
.modal--expected-edit .kind-toggle,
#txEditInner .kind-toggle{
border-color: rgba(17, 24, 39, 0.075);
background: rgba(15, 23, 42, 0.022);
max-width: none;
}
.modal--expected-edit .kind-toggle .kind-opt{
min-height: 30px;
padding: 4px 10px;
font-size: 12px;
color: rgba(71, 85, 105, 0.58);
}
#txEditInner .kind-toggle .kind-opt{
min-height: 32px;
padding: 5px 10px;
font-size: 12px;
color: rgba(71, 85, 105, 0.58);
}
.modal--expected-edit .kind-toggle .kind-opt + .kind-opt,
#txEditInner .kind-toggle .kind-opt + .kind-opt{
border-left-color: rgba(17, 24, 39, 0.06);
}
/* Advanced Option: subtle expandable row (not a faux input). */
#expectedEditInstancePanel .tx-edit-advanced{
margin: 4px 0 0;
border: none;
border-radius: 0;
background: transparent;
}
#expectedEditInstancePanel .tx-edit-advanced + .tx-add-vspace{
height: 6px;
}
#expectedEditInstancePanel .tx-edit-advanced__summary{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
cursor: pointer;
list-style: none;
min-height: 32px;
padding: 6px 0;
user-select: none;
border-radius: 6px;
transition: background 0.14s ease, color 0.14s ease;
}
#expectedEditInstancePanel .tx-edit-advanced__label-col{
position: relative;
flex: 0 0 auto;
width: auto;
max-width: none;
min-width: 0;
}
#expectedEditInstancePanel .tx-edit-advanced__summary:hover{
background: rgba(17, 24, 39, 0.03);
}
#expectedEditInstancePanel .tx-edit-advanced__summary::-webkit-details-marker{
display: none;
}
#expectedEditInstancePanel .tx-edit-advanced__chev{
position: absolute;
left: -10px;
top: 50%;
width: 5px;
height: 5px;
margin: 0;
border-right: 1.5px solid rgba(100, 116, 139, 0.55);
border-bottom: 1.5px solid rgba(100, 116, 139, 0.55);
transform: translateY(-58%) rotate(-45deg);
transition: transform 0.15s ease;
}
#expectedEditInstancePanel .tx-edit-advanced[open] .tx-edit-advanced__chev{
transform: translateY(-42%) rotate(45deg);
}
#expectedEditInstancePanel .tx-edit-advanced__label{
display: block;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.3;
color: rgba(100, 116, 139, 0.72);
white-space: nowrap;
}
#expectedEditInstancePanel .tx-edit-advanced__body{
padding: 2px 2px 6px 14px;
}
#expectedEditInstancePanel .tx-edit-recurrence-ends-row{
display: flex;
flex-direction: column;
gap: 4px;
}
#expectedEditInstancePanel .tx-edit-recurrence-ends-row > .form-row-h{
margin: 0;
min-width: 0;
}
#expectedEditInstancePanel .tx-edit-recurrence-ends-row + .expected-second-day-row{
margin-top: 4px;
}
#expectedEditInstancePanel #txEditEndCountRow{
margin-top: 2px;
}
#expectedEditInstancePanel .form-row-h{
gap: 4px 8px;
}
#expectedEditInstancePanel .form-row-h__label label{
font-size: 10.5px;
}
/* Compact color row in edit modal: swatches + Clear. */
#expectedEditInstancePanel .tx-edit-cat-color-row.form-row-h{
align-items: flex-start;
}
#expectedEditInstancePanel .tx-edit-cat-color-row .form-row-h__label{
padding-top: 3px;
}
#expectedEditInstancePanel .tx-edit-cat-color-field .cat-color-row.tx-edit-cat-color-panel{
margin: 0;
padding: 0;
gap: 6px 8px;
border-radius: 0;
background: transparent;
border: none;
flex-wrap: wrap;
display: flex;
align-items: center;
}
#expectedEditInstancePanel .tx-edit-cat-color-field .cat-color-row.tx-edit-cat-color-panel .cat-color-row__swatches{
gap: 5px;
overflow: visible;
flex-wrap: wrap;
min-width: 0;
flex: 1 1 auto;
}
#expectedEditInstancePanel .tx-edit-cat-color-field .cat-color-row.tx-edit-cat-color-panel .tx-edit-cat-color-clear{
flex: 0 0 auto;
margin-left: auto;
}
#expectedEditInstancePanel .tx-edit-cat-color-field .cat-color-row.tx-edit-cat-color-panel .cat-swatch{
width: 14px;
height: 14px;
box-sizing: border-box;
flex: 0 0 auto;
}
#expectedEditInstancePanel .tx-edit-cat-color-field .cat-color-row.tx-edit-cat-color-panel .cat-swatch.is-active{
outline-width: 2px;
outline-offset: 1px;
}
#expectedEditInstancePanel .tx-edit-cat-color-field .cat-color-row.tx-edit-cat-color-panel .cat-swatch--custom::before{
font-size: 12px;
}
.modal--expected-edit .tx-edit-cat-color-clear{
appearance: none;
background: transparent !important;
border: none !important;
padding: 2px 4px !important;
margin-left: 4px;
font: inherit;
font-size: 11px !important;
font-weight: 500 !important;
color: rgba(100, 116, 139, 0.78) !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
cursor: pointer;
box-shadow: none !important;
min-height: 0 !important;
border-radius: 0 !important;
}
.modal--expected-edit .tx-edit-cat-color-clear:hover{
color: rgba(17, 24, 39, 0.86) !important;
}
.modal--expected-edit .tx-edit-cat-color-clear[disabled]{
opacity: 0.4;
cursor: not-allowed;
text-decoration: none !important;
}
/* Recurring schedule: soft cluster for recurrence + variable amount. */
.modal--expected-edit .tx-edit-recurring-group{
position: relative;
margin: 4px 0 0;
padding: 4px 0 2px;
border-radius: 8px;
background: rgba(248, 250, 252, 0.42);
border: 1px solid rgba(17, 24, 39, 0.05);
box-shadow: none;
}
.modal--expected-edit .tx-edit-recurring-group::before{
content: "Schedule";
display: block;
font-size: 8px;
font-weight: 550;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.48);
margin: 0 0 1px;
}
.modal--expected-edit .tx-edit-recurring-group .tx-add-vspace{
height: 0;
display: none;
}
.modal--expected-edit .tx-edit-recurring-group #txEditRecurringVariableWrap{
margin-top: 4px;
padding-top: 0;
border-top: none;
width: 100%;
max-width: 100%;
}
.modal--expected-edit #expectedEditInstancePanel .expected-second-day-row.form-row-h{
display: flex;
margin-top: 4px;
}
.modal--expected-edit #expectedEditInstancePanel .expected-second-day-row.form-row-h .form-row-h__label label{
font-size: 10.5px;
font-weight: 500;
padding-top: 7px;
color: rgba(100, 116, 139, 0.72);
}
.modal--expected-edit #expectedEditInstancePanel .expected-second-day-row .expected-second-day-row__hint{
grid-column: auto;
margin: 2px 0 0;
max-width: none;
font-size: 9.5px;
line-height: 1.32;
color: rgba(100, 116, 139, 0.52);
}
.modal--expected-edit #expectedEditInstancePanel .tx-edit-variable-form-row{
margin-top: 4px;
width: 100%;
}
.modal--expected-edit #expectedEditInstancePanel .tx-edit-variable-toggle{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
width: 100%;
max-width: 100%;
margin: 0;
cursor: pointer;
user-select: none;
}
.modal--expected-edit #expectedEditInstancePanel .tx-edit-variable-toggle__head{
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
gap: 0.4rem;
max-width: 100%;
}
.modal--expected-edit #expectedEditInstancePanel .tx-edit-variable-toggle__label{
font-size: 10.5px;
font-weight: 500;
line-height: 1.3;
color: rgba(100, 116, 139, 0.72);
white-space: nowrap;
}
.modal--expected-edit #expectedEditInstancePanel .tx-edit-variable-row__hint{
display: block;
margin: 0;
padding: 0 0 0 calc(13px + 0.4rem);
font-size: 9.5px;
line-height: 1.32;
color: rgba(100, 116, 139, 0.52);
white-space: nowrap;
max-width: 100%;
}
.modal--expected-edit .tx-edit-variable-row__input{
flex: 0 0 auto;
width: 13px;
height: 13px;
margin: 0.12em 0 0;
accent-color: var(--accent);
cursor: pointer;
}
.tx-edit-variable-hint{
display: block;
font-size: 10px;
font-weight: 400;
color: rgba(100, 116, 139, 0.72);
letter-spacing: 0;
line-height: 1.25;
}
/* Ends dropdown: matches other selects, narrower so it doesn't dominate. */
.modal--expected-edit .tx-edit-ends-mode-select{
font-size: 13px;
}
.modal--expected-edit .tx-edit-ends-after-row{
display: flex;
align-items: center;
gap: 8px;
}
.modal--expected-edit .tx-edit-ends-after-row > input{
width: 5.5rem;
flex: 0 0 5.5rem;
}
.modal--expected-edit .tx-edit-ends-after-row .tx-add-field-hint{
font-size: 11px;
color: rgba(100, 116, 139, 0.78);
}
/* Recurring edit sheet: inherit footer hierarchy from #txEditInner rules. */
.modal--expected-edit > .modal-actions.modal-actions--tx-edit-foot{
margin-top: 4px;
padding-top: 10px;
padding-bottom: 8px;
}
.expected-modal-mode-row{
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 10px 14px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.expected-modal-mode-label{
font-size: 12px;
color: var(--muted);
text-transform: none;
letter-spacing: 0.3px;
font-weight: 600;
}
.expected-modal-mode-options{
display: flex;
flex-wrap: nowrap;
gap: 12px 22px;
margin-left: auto;
white-space: nowrap;
}
.expected-modal-mode-opt{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
cursor: pointer;
color: var(--text);
}
.expected-modal-hint{
margin: 0 0 10px;
font-size: 12px;
color: var(--muted);
line-height: 1.4;
}
.expected-delete-actions{
display: flex;
flex-direction: column;
gap: 8px;
}
.expected-remove-btn{
width: 100%;
max-width: 320px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
background: color-mix(in srgb, var(--accent) 15%, transparent);
color: var(--text);
font: inherit;
font-size: 13px;
cursor: pointer;
text-align: center;
}
.expected-remove-btn:hover{
filter: brightness(1.05);
}
.expected-remove-btn--strong{
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--text);
}
.expected-remove-btn--strong:hover{
filter: brightness(1.05);
}
/* Collapsible projection panel */
.projection-panel .panel-header{
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
}
.projection-panel .panel-collapse-btn{
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.projection-panel .panel-collapse-btn svg{
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 160ms ease;
}
.projection-panel:not(.projection-panel--collapsed) .panel-collapse-btn svg{
transform: rotate(180deg);
}
.projection-panel--collapsed .projection-panel-body{
display: none;
}
.modal h3:not(.sr-only){
box-sizing: border-box;
width: calc(100% + 32px);
margin: -16px -16px 10px;
padding: 11px 16px;
font-size: 14.5px;
font-weight: 750;
letter-spacing: 0.2px;
color: #fff;
background: var(--accent);
border-radius: 14px 14px 0 0;
border-bottom: 1px solid rgba(0,0,0,0.18);
text-transform: none;
}
/* Zero-padding modals: header must match modal width (no negative-margin bleed). */
.modal.modal--apply-scope > h3:not(.sr-only){
width: 100%;
max-width: 100%;
margin: 0;
}
.modal.modal--account > h3{
width: calc(100% + 38px);
margin: -17px -19px 11px;
padding: 13px 19px 12px;
font-size: 1rem;
}
.modal.modal--account .account-modal__info{
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0 0 11px;
padding: 6px 9px;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.07);
background: rgba(15, 23, 42, 0.025);
color: rgba(71, 85, 105, 0.82);
}
.modal.modal--account .account-modal__info-icon{
flex: 0 0 auto;
display: inline-flex;
margin-top: 1px;
color: rgba(100, 116, 139, 0.72);
}
.modal.modal--account .account-modal__info-icon svg{
display: block;
}
.modal.modal--account .account-modal__info-copy{
min-width: 0;
}
.modal.modal--account .account-modal__info-copy p{
margin: 0;
font-size: 0.72rem;
line-height: 1.38;
font-weight: 450;
color: rgba(71, 85, 105, 0.78);
}
.modal.modal--account .account-modal__info-copy p + p{
margin-top: 2px;
color: rgba(100, 116, 139, 0.68);
}
.modal.modal--account #accErr.error{
margin-top: 0;
margin-bottom: 6px;
}
.modal.modal--account .account-modal__row{
gap: 11px 17px;
margin-bottom: 11px;
}
.modal.modal--account .account-modal__row:last-of-type{
margin-bottom: 0;
}
.modal.modal--account .account-modal__row--balance{
align-items: start;
}
.modal.modal--account .account-modal__row > div,
.modal.modal--account .account-modal__field{
display: flex;
flex-direction: column;
min-width: 0;
}
.modal.modal--account label{
display: block;
margin: 0 0 4px;
font-size: 0.74rem;
font-weight: 520;
letter-spacing: 0.01em;
color: rgba(71, 85, 105, 0.78);
}
.modal.modal--account input[type="text"],
.modal.modal--account input[type="date"],
.modal.modal--account select{
min-height: 38px;
padding: 6px 11px;
font-size: 0.88rem;
border-radius: 8px;
box-sizing: border-box;
}
.modal.modal--account .money-input{
min-height: 38px;
align-items: stretch;
border-radius: 8px;
background: rgba(0, 0, 0, 0.02);
}
.modal.modal--account .money-input__prefix{
padding: 0 0 0 10px;
font-size: 0.84rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.72);
background: transparent;
border-right: none;
}
.modal.modal--account .money-input input{
min-height: 36px;
padding: 6px 11px 6px 4px;
font-size: 0.88rem;
font-weight: 500;
-moz-appearance: textfield;
appearance: textfield;
}
.modal.modal--account .money-input input::-webkit-outer-spin-button,
.modal.modal--account .money-input input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
.modal.modal--account .account-modal__fieldHelp{
margin: 3px 0 0;
max-width: none;
font-size: 0.68rem;
line-height: 1.32;
color: rgba(100, 116, 139, 0.52);
}
.modal.modal--account .modal-actions.account-modal__actions{
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
margin-top: 13px;
padding-top: 11px;
border-top: 1px solid rgba(17, 24, 39, 0.06);
}
.modal.modal--account .account-modal__footnote{
margin: 0;
font-size: 0.68rem;
line-height: 1.32;
color: rgba(100, 116, 139, 0.55);
}
.modal.modal--account .account-modal__actions-buttons{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.modal.modal--account #cancelAccountEditBtn,
.modal.modal--account .account-modal__secondary{
min-height: 36px;
padding: 6px 15px;
font-size: 0.86rem;
font-weight: 540;
border-radius: 8px;
border: 1px solid rgba(17, 24, 39, 0.12);
background: rgba(255, 255, 255, 0.96);
color: rgba(71, 85, 105, 0.82);
box-shadow: none;
}
.modal.modal--account #cancelAccountEditBtn:hover{
border-color: rgba(17, 24, 39, 0.16);
background: rgba(248, 250, 252, 0.98);
color: rgba(30, 41, 59, 0.9);
}
.modal.modal--account .account-modal__primary{
min-height: 36px;
padding: 6px 17px;
border-radius: 8px;
background: var(--accent);
border: 1px solid rgba(11, 61, 46, 0.28);
color: #fff;
font-size: 0.88rem;
font-weight: 620;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.12) inset,
0 4px 10px -8px rgba(11, 61, 46, 0.35);
}
.modal.modal--account .account-modal__primary:hover{
background: color-mix(in srgb, var(--accent) 92%, #000);
filter: none;
}
/* “Your forecast is ready” — match account-setup success headline (green type, no green bar) */
#bwForecastReadyModal .modal--forecast-ready > h3{
width: 100%;
max-width: 100%;
margin: 0 0 6px;
padding: 0;
text-align: center;
border-radius: 0;
border-bottom: none;
box-sizing: border-box;
background: transparent !important;
color: rgba(11, 61, 46, 0.92);
font-size: 1.06rem;
font-weight: 800;
letter-spacing: 0.01em;
line-height: 1.35;
text-transform: none;
}
#bwForecastReadyModal .modal--forecast-ready > h3::before{
content: "✓";
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 8px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, #fff);
color: color-mix(in srgb, var(--accent) 82%, #000);
font-size: 0.8rem;
font-weight: 800;
vertical-align: -2px;
}
#bwForecastReadyModal .modal--forecast-ready{
overflow: hidden;
max-width: 420px;
padding: 18px 22px 14px;
box-sizing: border-box;
}
#bwForecastReadyModal .bw-forecast-ready__body{
text-align: left;
color: var(--text);
font-size: 14px;
line-height: 1.45;
}
#bwForecastReadyModal .bw-forecast-ready__tagline{
margin: 0 0 6px;
font-size: 0.86rem;
font-weight: 500;
line-height: 1.32;
color: rgba(17, 24, 39, 0.64);
text-align: center;
}
#bwForecastReadyModal .bw-forecast-ready__can-list{
margin: 0 0 4px;
padding: 0;
list-style: none;
color: var(--text);
font-weight: 500;
display: flex;
flex-direction: column;
gap: 7px;
}
#bwForecastReadyModal .bw-forecast-ready__can-list li{
display: flex;
align-items: flex-start;
gap: 9px;
font-size: 0.92rem;
line-height: 1.4;
padding: 0;
}
#bwForecastReadyModal .bw-forecast-ready__can-list li::before{
content: "✓";
flex: 0 0 auto;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 14%, #fff);
color: color-mix(in srgb, var(--accent) 80%, #000);
font-weight: 800;
font-size: 0.78rem;
margin-top: 1px;
}
#bwForecastReadyModal .bw-forecast-ready__finePrint{
margin: 10px 0 0;
text-align: center;
font-size: 0.695rem;
font-weight: 500;
color: rgba(0, 0, 0, 0.42);
line-height: 1.4;
letter-spacing: 0.01em;
}
#bwForecastReadyModal .bw-forecast-ready__finePrint #bwForecastReadyPricingLine{
opacity: 0.88;
}
/* Hide legacy can-now / fine-list nodes if older cached markup is reused. */
#bwForecastReadyModal .bw-forecast-ready__can-now,
#bwForecastReadyModal .bw-forecast-ready__fine-list{
display: none;
}
#bwForecastReadyModal .bw-forecast-ready__fine-list li{
display: none;
}
#bwForecastReadyModal .bw-forecast-ready__fine-list li:last-child{
margin-bottom: 0;
}
#bwForecastReadyModal .bw-forecast-ready__actions{
margin-top: 2px;
padding-top: 0;
border-top: none;
}
#bwForecastReadyModal .bw-forecast-ready__actions.modal-actions > button{
max-width: none;
width: 100%;
}
#bwForecastReadyModal .bw-forecast-ready__cta{
box-sizing: border-box;
font-family: inherit;
font-size: 0.94rem;
font-weight: 650;
line-height: 1.25;
padding: 8px 14px;
border-radius: 11px;
border: 1px solid color-mix(in srgb, var(--accent) 78%, #0d1f18);
background: var(--accent);
color: #fff;
cursor: pointer;
box-shadow: 0 1px 2px rgba(11, 61, 46, 0.1);
}
#bwForecastReadyModal .bw-forecast-ready__cta:hover{
background: color-mix(in srgb, var(--accent) 92%, #000);
border-color: color-mix(in srgb, var(--accent) 82%, #0d1f18);
box-shadow: 0 2px 4px rgba(11, 61, 46, 0.12);
}
#bwForecastReadyModal .bw-forecast-ready__cta:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 45%, #fff);
outline-offset: 2px;
box-shadow: none;
}
/* "Go to Forecast" — secondary outlined CTA paired with tour start. */
#bwForecastReadyModal .bw-forecast-ready__skip{
box-sizing: border-box;
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
padding: 7px 14px;
border-radius: 11px;
border: 1px solid rgba(11, 61, 46, 0.18);
background: #fff;
color: rgba(11, 61, 46, 0.92);
box-shadow: none;
cursor: pointer;
margin-top: 5px;
}
#bwForecastReadyModal .bw-forecast-ready__skip:hover{
background: color-mix(in srgb, var(--accent) 5%, #fff);
border-color: rgba(11, 61, 46, 0.36);
color: rgba(11, 61, 46, 1);
}
#bwForecastReadyModal .bw-forecast-ready__skip:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 2px;
}
#bwForecastReadyModal .bw-forecast-ready__reassure{
margin: 6px 0 0;
text-align: center;
font-size: 0.72rem;
line-height: 1.32;
font-weight: 500;
color: rgba(100, 116, 139, 0.62);
}
/* ---------------------------------------------------------------------- */
/* First-run tour: spotlight backdrop + tooltip card */
/* ---------------------------------------------------------------------- */
.bw-tour-backdrop{
position: fixed;
inset: 0;
background: rgba(11, 61, 46, 0.18);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}
.bw-tour-backdrop--open{
opacity: 1;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce){
.bw-tour-backdrop{ transition: none; }
}
/* Target highlight ring. Applied to whatever element the current step
is pointing at. We use box-shadow rings so the element's layout is
untouched; the soft outer ring is the "spotlight" cue. */
.bw-tour-target{
box-shadow:
0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent),
0 0 0 8px color-mix(in srgb, var(--accent) 18%, transparent),
0 8px 28px -10px rgba(11, 61, 46, 0.35) !important;
border-radius: 12px;
transition: box-shadow 220ms ease, background-color 220ms ease;
}
@media (prefers-reduced-motion: reduce){
.bw-tour-target{ transition: none; }
}
.bw-tour-support-highlight{
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--accent) 34%, transparent),
0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent);
border-radius: 12px;
transition: box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease;
}
@media (prefers-reduced-motion: reduce){
.bw-tour-support-highlight{ transition: none; }
}
/* Step 2 "Cash Outlook" treatment: brighter background + softer green
outline + a subtle outer glow so the warning system reads as the
primary focus on the page. Used on top of `.bw-tour-target`. */
.bw-tour-target--cash-outlook{
background-color: color-mix(in srgb, var(--accent) 5%, #ffffff) !important;
box-shadow:
0 0 0 1.5px color-mix(in srgb, var(--accent) 42%, transparent),
0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent),
0 0 28px 6px color-mix(in srgb, var(--accent) 16%, transparent),
0 14px 40px -18px rgba(11, 61, 46, 0.32) !important;
border-radius: 14px;
}
/* Step 2 sidebar dimming. We slightly fade non-target sidebar cards so
the user understands the Cash Outlook section is the area being
discussed. The target's own ancestor chain stays at full opacity via
`:has(.bw-tour-target)`.
Two scopes:
1. Direct children of the sidebar (e.g. `#sidebarPendingTxCard`,
`#txAddFormHome`).
2. Direct children of the sticky-head row that holds Cash Outlook
AND the Settings nav rail — so the rail dims while Cash Outlook
stays bright. */
.sidebar.bw-tour-sidebar-dim > *,
.sidebar.bw-tour-sidebar-dim .sidebar-sticky-head > *{
transition: opacity 220ms ease;
}
.sidebar.bw-tour-sidebar-dim > *:not(:has(.bw-tour-target)):not(:has(.bw-tour-support-highlight)):not(.bw-tour-target):not(.bw-tour-support-highlight),
.sidebar.bw-tour-sidebar-dim .sidebar-sticky-head > *:not(:has(.bw-tour-target)):not(:has(.bw-tour-support-highlight)):not(.bw-tour-target):not(.bw-tour-support-highlight){
opacity: 0.5;
}
@media (prefers-reduced-motion: reduce){
.sidebar.bw-tour-sidebar-dim > *,
.sidebar.bw-tour-sidebar-dim .sidebar-sticky-head > *{
transition: none;
}
}
.bw-tour-tooltip{
position: fixed;
width: min(420px, calc(100vw - 28px));
background: #ffffff;
color: #1f2937;
border-radius: 14px;
border: 1px solid rgba(11, 61, 46, 0.10);
box-shadow:
0 1px 2px rgba(11, 61, 46, 0.06),
0 16px 32px -16px rgba(11, 61, 46, 0.22);
padding: 16px 18px 12px;
opacity: 0;
transform: translateY(4px);
transition: opacity 200ms ease, transform 200ms ease;
pointer-events: none;
font-family: inherit;
}
.bw-tour-tooltip--open{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce){
.bw-tour-tooltip{ transition: none; transform: none; }
}
.bw-tour-tooltip__arrow{
position: absolute;
width: 14px;
height: 14px;
background: #ffffff;
border-left: 1px solid rgba(11, 61, 46, 0.10);
border-top: 1px solid rgba(11, 61, 46, 0.10);
transform: rotate(45deg);
}
.bw-tour-tooltip__arrow[data-side="top"]{
top: -8px;
transform: rotate(45deg);
}
.bw-tour-tooltip__arrow[data-side="bottom"]{
bottom: -8px;
transform: rotate(225deg);
}
/* Side arrows for tooltips placed beside their target (Step 2). */
.bw-tour-tooltip__arrow[data-side="left"]{
left: -8px;
transform: rotate(-45deg);
}
.bw-tour-tooltip__arrow[data-side="right"]{
right: -8px;
transform: rotate(135deg);
}
.bw-tour-tooltip__head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.bw-tour-tooltip__counter{
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: color-mix(in srgb, var(--accent) 70%, #6b7280);
background: color-mix(in srgb, var(--accent) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
padding: 3px 8px;
border-radius: 999px;
}
.bw-tour-tooltip__close{
appearance: none;
background: transparent;
border: 0;
color: color-mix(in srgb, #1f2937 70%, transparent);
font-size: 20px;
line-height: 1;
width: 26px;
height: 26px;
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bw-tour-tooltip__close:hover{
background: rgba(11, 61, 46, 0.06);
color: #1f2937;
}
.bw-tour-tooltip__close:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 2px;
}
.bw-tour-tooltip__title{
margin: 2px 0 6px;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.3;
color: color-mix(in srgb, var(--accent) 80%, #1f2937);
letter-spacing: -0.005em;
}
.bw-tour-tooltip__context{
margin: -2px 0 5px;
font-size: 0.76rem;
line-height: 1.32;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(71, 85, 105, 0.72);
}
.bw-tour-tooltip__body{
margin: 0 0 3px;
font-size: 0.92rem;
line-height: 1.46;
color: #374151;
/* Preserve `\n\n` paragraph breaks in step copy without rendering
stray whitespace. */
white-space: pre-line;
}
.bw-tour-tooltip__helper{
margin: 3px 0 0;
padding: 8px 10px;
font-size: 0.84rem;
line-height: 1.45;
color: color-mix(in srgb, var(--accent) 72%, #374151);
background: color-mix(in srgb, var(--accent) 6%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
border-radius: 8px;
}
/* Informational example callout (e.g. minimum balance on tour step 2) */
.bw-tour-tooltip__helper.bw-tour-tooltip__helper--example{
margin: 4px 0 0;
padding: 6px 9px;
background: rgba(248, 250, 252, 0.92);
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 8px;
color: rgba(55, 65, 81, 0.78);
}
.bw-tour-tooltip__helper-example{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
width: 100%;
}
.bw-tour-tooltip__helper-example-label{
font-size: 0.72rem;
font-weight: 500;
line-height: 1.3;
color: rgba(100, 116, 139, 0.78);
text-align: left;
}
.bw-tour-tooltip__helper-example-amount{
font-size: 1.02rem;
font-weight: 750;
line-height: 1.1;
letter-spacing: -0.02em;
color: rgba(11, 61, 46, 0.88);
white-space: nowrap;
}
/* Action line (e.g. “Click any calendar day…”) on reconcile step */
.bw-tour-tooltip__instruction{
margin: 0 0 4px;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.34;
color: rgba(11, 61, 46, 0.82);
}
/* Reconcile tour (step 4): calm hierarchy, shared left edge, CTA > preview weight */
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview){
--bw-tour-rx-gap-1: 4px;
--bw-tour-rx-gap-2: 7px;
--bw-tour-rx-gap-3: 10px;
--bw-tour-rx-gap-4: 16px;
padding: 14px 18px 12px;
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__head{
margin-bottom: var(--bw-tour-rx-gap-1);
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__counter{
padding: 0;
border: 0;
background: transparent;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.07em;
color: rgba(100, 116, 139, 0.62);
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__close{
width: 24px;
height: 24px;
margin: -1px -2px 0 0;
font-size: 17px;
color: rgba(100, 116, 139, 0.55);
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__title{
margin: 0 0 var(--bw-tour-rx-gap-2);
font-size: 0.98rem;
font-weight: 650;
line-height: 1.3;
color: color-mix(in srgb, var(--accent) 72%, #1f2937);
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__body{
margin: 0 0 var(--bw-tour-rx-gap-2);
font-size: 0.86rem;
font-weight: 400;
line-height: 1.44;
color: rgba(55, 65, 81, 0.78);
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__instruction{
margin: 0 0 var(--bw-tour-rx-gap-3);
font-size: 0.78rem;
font-weight: 450;
line-height: 1.4;
color: rgba(71, 85, 105, 0.62);
}
/* Mini reconcile preview — supporting reassurance, not primary CTA weight */
.bw-tour-tooltip__helper.bw-tour-tooltip__helper--reconcile-preview{
margin: 0;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
}
.bw-tour-tooltip__reconcile-preview{
display: flex;
flex-direction: column;
gap: var(--bw-tour-rx-gap-1);
width: 100%;
padding: 8px 10px;
border-radius: 9px;
border: 1px solid rgba(148, 163, 184, 0.14);
background: rgba(248, 250, 252, 0.72);
text-align: left;
box-shadow: none;
}
.bw-tour-tooltip__reconcile-preview-dayrow{
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 0;
}
.bw-tour-tooltip__reconcile-preview-day{
display: flex;
align-items: baseline;
gap: 4px;
min-width: 0;
}
.bw-tour-tooltip__reconcile-preview-daynum{
font-size: 0.82rem;
font-weight: 650;
line-height: 1.15;
color: rgba(17, 24, 39, 0.82);
}
.bw-tour-tooltip__reconcile-preview-daymeta{
font-size: 0.64rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.58);
}
.bw-tour-tooltip__reconcile-preview-check{
flex: 0 0 auto;
align-self: center;
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.28);
background: rgba(255, 255, 255, 0.9);
color: rgba(71, 85, 105, 0.55);
font-size: 0.56rem;
font-weight: 600;
line-height: 1;
}
.bw-tour-tooltip__reconcile-preview-status{
font-size: 0.72rem;
font-weight: 450;
line-height: 1.32;
color: rgba(55, 65, 81, 0.68);
}
.bw-tour-tooltip__reconcile-preview-balance{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 8px 10px;
margin: 0;
padding: 5px 0 0;
border-top: 1px solid rgba(148, 163, 184, 0.12);
}
.bw-tour-tooltip__reconcile-preview-balance-k{
font-size: 0.68rem;
font-weight: 400;
line-height: 1.25;
color: rgba(100, 116, 139, 0.62);
}
.bw-tour-tooltip__reconcile-preview-balance-v{
font-size: 0.8rem;
font-weight: 550;
letter-spacing: -0.01em;
line-height: 1.15;
color: rgba(17, 24, 39, 0.78);
white-space: nowrap;
text-align: right;
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__note{
margin: var(--bw-tour-rx-gap-3) 0 0;
font-size: 0.7rem;
font-weight: 400;
line-height: 1.38;
color: rgba(100, 116, 139, 0.48);
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__actions{
margin-top: var(--bw-tour-rx-gap-4);
align-items: center;
gap: 10px;
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__skip{
display: inline-flex;
align-items: center;
align-self: center;
min-height: 30px;
padding: 0;
font-size: 0.76rem;
font-weight: 450;
line-height: 1;
color: rgba(100, 116, 139, 0.52);
}
.bw-tour-tooltip:has(.bw-tour-tooltip__helper--reconcile-preview) .bw-tour-tooltip__cta{
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.84rem;
font-weight: 600;
line-height: 1;
padding: 6px 13px;
min-height: 30px;
box-shadow: 0 1px 2px rgba(11, 61, 46, 0.08);
}
/* “Good for” example list (tour step 4 — variable amounts) */
.bw-tour-tooltip__helper.bw-tour-tooltip__helper--list{
margin: 3px 0 0;
padding: 5px 8px 6px;
background: rgba(248, 250, 252, 0.88);
border: 1px solid rgba(148, 163, 184, 0.16);
border-radius: 8px;
color: rgba(55, 65, 81, 0.78);
}
.bw-tour-tooltip__helper-list{
display: flex;
flex-direction: column;
gap: 4px;
text-align: left;
}
.bw-tour-tooltip__helper-list-lead{
display: flex;
align-items: center;
gap: 5px;
font-size: 0.72rem;
font-weight: 650;
line-height: 1.25;
color: rgba(11, 61, 46, 0.78);
}
.bw-tour-tooltip__helper-list-lead::before{
content: "✓";
flex: 0 0 auto;
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: color-mix(in srgb, var(--accent) 12%, #fff);
color: color-mix(in srgb, var(--accent) 78%, #000);
font-size: 0.62rem;
font-weight: 800;
line-height: 1;
}
.bw-tour-tooltip__helper-list-items{
margin: 0;
padding: 0 0 0 19px;
list-style: disc;
}
.bw-tour-tooltip__helper-list-items li{
margin: 0;
padding: 0;
font-size: 0.72rem;
font-weight: 500;
line-height: 1.32;
color: rgba(100, 116, 139, 0.78);
}
.bw-tour-tooltip__helper-list-items li + li{
margin-top: 1px;
}
.bw-tour-tooltip__note{
margin: 3px 0 0;
font-size: 0.7rem;
line-height: 1.32;
color: rgba(100, 116, 139, 0.52);
}
.bw-tour-tooltip__actions{
margin-top: 7px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.bw-tour-tooltip__skip{
appearance: none;
background: transparent;
border: 0;
padding: 0;
font: inherit;
font-size: 0.8rem;
font-weight: 500;
color: rgba(100, 116, 139, 0.5);
text-decoration: underline;
text-decoration-thickness: 0.5px;
text-underline-offset: 2px;
text-decoration-color: rgba(100, 116, 139, 0.35);
cursor: pointer;
}
.bw-tour-tooltip__skip:hover{
color: rgba(71, 85, 105, 0.72);
text-decoration-color: rgba(71, 85, 105, 0.45);
}
.bw-tour-tooltip__skip:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 2px;
border-radius: 4px;
}
.bw-tour-tooltip__cta{
box-sizing: border-box;
font-family: inherit;
font-size: 0.92rem;
font-weight: 700;
line-height: 1.2;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(0, 0, 0, 0.10);
background: var(--accent);
color: #fff;
cursor: pointer;
}
.bw-tour-tooltip__cta:hover{
background: color-mix(in srgb, var(--accent) 92%, #000);
}
.bw-tour-tooltip__cta:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 55%, #fff);
outline-offset: 2px;
}
.bw-tour-restart-link{
appearance: none;
background: transparent;
border: 0;
padding: 0;
font: inherit;
color: var(--accent);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.bw-tour-restart-link:hover{
color: color-mix(in srgb, var(--accent) 80%, #000);
}
.bw-tour-restart-link:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
outline-offset: 2px;
border-radius: 4px;
}
@keyframes bw-tour-soft-pulse{
0%, 100%{
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent),
0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}
50%{
box-shadow:
0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent),
0 0 0 7px color-mix(in srgb, var(--accent) 15%, transparent);
}
}
body[data-bw-view="calendar"] .cal-cell.bw-tour-target--calendar-add{
background: color-mix(in srgb, var(--accent) 6%, rgba(255, 255, 255, 0.9)) !important;
}
body[data-bw-view="calendar"] .cal-cell.bw-tour-target--calendar-add .cal-daynum{
justify-content: space-between;
}
body[data-bw-view="calendar"] .cal-cell.bw-tour-target--calendar-add .cal-daynum::before{
content: "+ Add item";
display: inline-flex;
align-items: center;
min-height: 19px;
padding: 0 7px;
border-radius: 999px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.02em;
color: rgba(11, 61, 46, 0.96);
background: color-mix(in srgb, var(--accent) 13%, #ffffff);
border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}
body[data-bw-view="calendar"] .cal-day-reconcile-btn.bw-tour-target--reconcile-head{
opacity: 1;
pointer-events: auto;
position: relative;
color: rgba(11, 61, 46, 0.92);
background: color-mix(in srgb, var(--accent) 8%, #ffffff);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent),
0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}
body[data-bw-view="calendar"] .cal-day-reconcile-btn.bw-tour-target--reconcile-head::after{
content: "Reconcile this day";
position: absolute;
right: 8px;
top: -12px;
padding: 2px 7px;
border-radius: 999px;
font-size: 8.5px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.02em;
color: rgba(11, 61, 46, 0.96);
background: #ffffff;
border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
box-shadow: 0 4px 14px -10px rgba(11, 61, 46, 0.32);
}
body[data-bw-view="calendar"] .cal-day-reconcile-btn.bw-tour-target--reconcile-head svg{
stroke-width: 2.1;
}
body[data-bw-view="calendar"] #sidebarPendingTxCard.bw-tour-support-highlight--sidebar-soft{
background: color-mix(in srgb, var(--accent) 3%, #ffffff);
border-color: color-mix(in srgb, var(--accent) 14%, rgba(17, 24, 39, 0.08));
}
body[data-bw-view="calendar"] #sidebarPendingTxCard.bw-tour-target--needs-review{
background: color-mix(in srgb, var(--accent) 5%, #ffffff);
border-color: color-mix(in srgb, var(--accent) 20%, rgba(17, 24, 39, 0.08));
}
body[data-bw-view="calendar"] #sidebarPendingTxCard.bw-tour-target--needs-review .sidebar-section-head{
color: rgba(11, 61, 46, 0.94);
}
body[data-bw-view="calendar"] .pending-attn-item.bw-tour-support-highlight--pending-item{
background: color-mix(in srgb, var(--accent) 6%, #ffffff);
border-color: color-mix(in srgb, var(--accent) 22%, rgba(17, 24, 39, 0.08));
animation: bw-tour-soft-pulse 2200ms ease-in-out infinite;
}
body[data-bw-view="calendar"] .pending-attn-item.bw-tour-support-highlight--pending-item::after{
content: "Variable amount";
position: absolute;
right: 10px;
top: -9px;
padding: 2px 6px;
border-radius: 999px;
font-size: 8.5px;
line-height: 1.2;
font-weight: 700;
letter-spacing: 0.02em;
color: rgba(11, 61, 46, 0.96);
background: #ffffff;
border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
box-shadow: 0 4px 14px -10px rgba(11, 61, 46, 0.28);
}
@media (prefers-reduced-motion: reduce){
body[data-bw-view="calendar"] .pending-attn-item.bw-tour-support-highlight--pending-item{
animation: none;
}
}
.badge{
font-size:12px;
padding:6px 8px;
border-radius: 10px;
border:1px solid var(--border);
cursor:pointer;
background: rgba(255,255,255,0.02);
}
.badge.expected-income{
border-color: rgba(76,209,123,0.35);
background: rgba(76,209,123,0.10);
}
.badge.expected-expense{
border-color: rgba(255,107,107,0.35);
background: rgba(255,107,107,0.10);
}
.badge.actual-income{
border-color: rgba(76,209,123,0.25);
}
.badge.actual-expense{
border-color: rgba(255,107,107,0.25);
}
.badge.disabled{
opacity:0.6;
cursor:default;
}
/* Reports: category totals */
.category-report-card{
padding-bottom: 16px;
}
.category-report-card__title{
margin: 0 0 8px;
font-size: 18px;
}
.category-report-card__hint{
margin: 0 0 12px;
line-height: 1.45;
max-width: 52rem;
}
.category-report-presets{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.category-report-preset-btn{
padding: 6px 12px;
font-size: 13px;
}
.category-report-year-label{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--muted);
}
.category-report-year-select{
min-width: 5.5rem;
}
.category-report-dates .row.two > div{
min-width: 0;
}
.category-report-mode{
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
}
.category-report-mode__opt{
margin: 0;
}
.category-report-summary{
margin: 10px 0 0;
}
.category-report-table-wrap{
margin-top: 14px;
overflow-x: auto;
}
.category-report-table{
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.category-report-table th,
.category-report-table td{
padding: 8px 10px;
border-bottom: 1px solid rgba(0,0,0,0.08);
vertical-align: top;
}
.category-report-table th{
text-align: left;
font-weight: 600;
color: var(--muted);
font-size: 12px;
white-space: nowrap;
}
.category-report-table td.num,
.category-report-table th.num{
text-align: right;
font-variant-numeric: tabular-nums;
}
.category-report-table tbody tr:hover{
background: rgba(0,0,0,0.03);
}
.category-report-table tfoot td{
font-weight: 600;
border-top: 1px solid rgba(0,0,0,0.12);
border-bottom: none;
}
.category-report-table .cat-report-est{
color: var(--muted);
}
/* Global toast (settings saves, etc.) */
.bw-toast{
position: fixed;
left: 50%;
bottom: 22px;
transform: translateX(-50%) translateY(12px);
z-index: 12000;
max-width: min(92vw, 380px);
padding: 9px 14px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
color: rgba(17, 24, 39, 0.92);
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(17, 24, 39, 0.1);
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease, transform 220ms ease;
}
.bw-toast.bw-toast--visible{
opacity: 1;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
}
/* Settings → Household: sectioned layout */
.settings-house-section{
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(17, 24, 39, 0.06);
}
.settings-house-section:first-of-type{
margin-top: 0;
padding-top: 0;
border-top: none;
}
#familyInviteWrap.family-invite-wrap{
margin-top: 0;
padding-top: 0;
border: none;
}
[data-settings-subsection="familySharing"]:not(.bw-household-settings-visible){
display: none !important;
}
[data-settings-nav-collaborators][hidden]{
display: none !important;
}
.family-invite-wrap[hidden],
[data-household-invites-only][hidden]{
display: none !important;
}
.settings-subsection{
margin: 0 0 12px;
}
.settings-subsection:last-child{
margin-bottom: 0;
}
.settings-subsection--spaced{
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(17, 24, 39, 0.06);
}
.settings-subsection-hint{
margin: 2px 0 8px;
font-size: 11.5px;
color: rgba(100, 116, 139, 0.85);
line-height: 1.35;
max-width: 44ch;
}
.settings-house-primary-btn{
margin-top: 6px;
}
/* Settings → Notifications: intentional rows */
.settings-notif-list{
list-style: none;
margin: 10px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
border-radius: 10px;
border: 1px solid rgba(17, 24, 39, 0.06);
overflow: hidden;
background: rgba(255, 255, 255, 0.55);
}
.settings-notif-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(17, 24, 39, 0.05);
}
.settings-notif-row:last-child{
border-bottom: none;
}
.settings-notif-row__main{
min-width: 0;
}
.settings-notif-row__label{
display: block;
font-size: 13px;
font-weight: 600;
color: rgba(17, 24, 39, 0.9);
}
.settings-notif-row__hint{
display: block;
margin-top: 2px;
font-size: 11px;
color: rgba(100, 116, 139, 0.85);
}
.settings-notif-pill{
flex-shrink: 0;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
}
.settings-notif-pill--on{
color: rgba(11, 61, 46, 0.9);
background: rgba(11, 61, 46, 0.1);
}
.settings-notif-pill--off{
color: rgba(75, 85, 99, 0.78);
background: rgba(15, 23, 42, 0.06);
}
.settings-notif-pill--soon{
color: rgba(100, 116, 139, 0.88);
background: rgba(100, 116, 139, 0.1);
}
.settings-notif-foot{
margin-top: 10px;
font-size: 11.5px;
line-height: 1.4;
max-width: 52ch;
}
/* =========================================================
In-app feedback widgets (floating button, modal, reactions, pulse)
Loaded on authenticated SPA pages via frontend/feedback.js.
========================================================= */
/* Floating launcher */
.bw-fb-launcher{
position: fixed;
right: 18px;
bottom: 18px;
z-index: 1200;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 0;
border-radius: 999px;
background: var(--accent);
color: #fff;
font: inherit;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.005em;
cursor: pointer;
box-shadow:
0 1px 0 rgba(0,0,0,0.06),
0 14px 28px -14px rgba(11, 61, 46, 0.55);
transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.bw-fb-launcher:hover{
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(0,0,0,0.07),
0 18px 30px -16px rgba(11, 61, 46, 0.6);
}
.bw-fb-launcher:focus-visible{
outline: none;
box-shadow:
0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent),
0 14px 28px -14px rgba(11, 61, 46, 0.55);
}
.bw-fb-launcher__icon{
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 720px){
.bw-fb-launcher{
right: 12px;
bottom: 12px;
padding: 10px 12px;
}
.bw-fb-launcher__label{
display: none;
}
.bw-fb-launcher{
width: 44px;
height: 44px;
padding: 0;
justify-content: center;
}
}
/* Bug modal */
.bw-fb-overlay{
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.42);
z-index: 1300;
}
.bw-fb-overlay.modal-overlay--open{
display: flex;
}
.bw-fb-modal{
width: min(560px, 94vw);
max-height: 92vh;
overflow: auto;
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px 22px 18px;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 20px 40px -16px rgba(15, 23, 42, 0.32);
}
.bw-fb-modal__head{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
margin-bottom: 14px;
}
.bw-fb-modal__eyebrow{
margin: 0 0 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.78);
}
.bw-fb-modal__title{
margin: 0 0 4px;
font-size: 1.1rem;
font-weight: 700;
color: #0f172a;
}
.bw-fb-modal__subtitle{
margin: 0;
font-size: 0.85rem;
color: rgba(71, 85, 105, 0.84);
max-width: 48ch;
line-height: 1.45;
}
.bw-fb-modal__close{
border: 0;
background: transparent;
font-size: 22px;
color: rgba(71, 85, 105, 0.7);
cursor: pointer;
padding: 4px 8px;
border-radius: 8px;
line-height: 1;
}
.bw-fb-modal__close:hover{
background: rgba(15, 23, 42, 0.06);
color: #0f172a;
}
.bw-fb-form{
display: grid;
gap: 14px;
}
.bw-fb-form__row{
display: grid;
gap: 6px;
}
.bw-fb-form__label{
margin: 0;
font-size: 12.5px;
font-weight: 600;
color: rgba(71, 85, 105, 0.94);
letter-spacing: 0.005em;
}
.bw-fb-form__hint{
font-weight: 400;
color: rgba(100, 116, 139, 0.78);
margin-left: 4px;
}
.bw-fb-form__input,
.bw-fb-form__textarea{
width: 100%;
font: inherit;
font-size: 0.92rem;
color: #0f172a;
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 10px;
padding: 10px 12px;
line-height: 1.45;
resize: vertical;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bw-fb-form__textarea{
min-height: 64px;
max-height: 240px;
}
.bw-fb-form__input:focus,
.bw-fb-form__textarea:focus{
outline: none;
border-color: color-mix(in srgb, var(--accent) 55%, #cbd5e1);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
/* Screenshot drop zone */
.bw-fb-drop{
border: 1.5px dashed rgba(15, 23, 42, 0.14);
border-radius: 12px;
padding: 14px;
background: #f8fafc;
text-align: center;
transition: border-color 0.15s ease, background 0.15s ease;
}
.bw-fb-drop.is-dragover{
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 5%, #ffffff);
}
.bw-fb-drop__empty{
display: grid;
justify-items: center;
gap: 4px;
color: rgba(71, 85, 105, 0.84);
}
.bw-fb-drop__title{
margin: 6px 0 0;
font-size: 0.9rem;
font-weight: 600;
color: rgba(31, 41, 55, 0.92);
}
.bw-fb-drop__hint{
margin: 0;
font-size: 12px;
color: rgba(100, 116, 139, 0.84);
}
.bw-fb-drop__btn{
margin-top: 8px;
border: 1px solid #E5E7EB;
background: #ffffff;
padding: 6px 12px;
border-radius: 999px;
font: inherit;
font-size: 0.85rem;
color: rgba(31, 41, 55, 0.92);
cursor: pointer;
}
.bw-fb-drop__btn:hover{
border-color: var(--accent);
color: var(--accent);
}
.bw-fb-drop__preview{
display: grid;
gap: 8px;
justify-items: center;
}
.bw-fb-drop__img{
max-width: 100%;
max-height: 220px;
border-radius: 8px;
border: 1px solid #E5E7EB;
}
.bw-fb-drop__remove{
border: 0;
background: transparent;
color: rgba(185, 28, 28, 0.78);
font: inherit;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
}
.bw-fb-drop__remove:hover{
text-decoration: underline;
}
.bw-fb-context{
margin: 0;
font-size: 12px;
color: rgba(100, 116, 139, 0.84);
}
.bw-fb-error{
margin: 0;
padding: 10px 12px;
border-radius: 10px;
background: #fff7f4;
border: 1px solid #fad7c5;
color: #8a3a1d;
font-size: 13px;
line-height: 1.45;
}
.bw-fb-form__actions{
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Feedback modal Cancel: paired with the filled green Submit.
Matches the submit's pill radius and roughly its height so the two
actions feel intentionally paired rather than "filled CTA + plain
text drifting beside it". */
.bw-fb-form__cancel{
background: #fff;
border: 1px solid rgba(11, 61, 46, 0.22);
color: rgba(11, 61, 46, 0.92);
padding: 9px 18px;
font: inherit;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
border-radius: 999px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.bw-fb-form__cancel:hover{
background: color-mix(in srgb, var(--accent) 5%, #fff);
border-color: rgba(11, 61, 46, 0.36);
color: rgba(11, 61, 46, 1);
}
.bw-fb-form__cancel:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
outline-offset: 2px;
}
.bw-fb-form__submit{
background: var(--accent);
color: #fff;
border: 0;
padding: 9px 18px;
border-radius: 999px;
font: inherit;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 10px 22px -12px rgba(11, 61, 46, 0.55);
transition: background 0.15s ease, transform 0.15s ease;
}
.bw-fb-form__submit:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
transform: translateY(-1px);
}
.bw-fb-form__submit:disabled{
background: #E5E7EB;
color: rgba(71, 85, 105, 0.66);
cursor: not-allowed;
box-shadow: none;
}
/* Quick reactions (attached to cards / surfaces) */
.bw-fb-reactions{
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed rgba(15, 23, 42, 0.06);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 12px;
color: rgba(100, 116, 139, 0.88);
}
.bw-fb-reactions__label{
font-weight: 500;
letter-spacing: 0.005em;
}
.bw-fb-reactions__btns{
display: inline-flex;
align-items: center;
gap: 6px;
}
.bw-fb-reactions__btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 999px;
border: 1px solid #E5E7EB;
background: #ffffff;
color: rgba(71, 85, 105, 0.84);
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bw-fb-reactions__btn:hover:not(:disabled){
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 6%, #ffffff);
}
.bw-fb-reactions__btn.is-active{
border-color: var(--accent);
color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, #ffffff);
}
.bw-fb-reactions__btn:disabled{
opacity: 0.55;
cursor: default;
}
.bw-fb-reactions__follow{
flex: 1 1 100%;
display: grid;
gap: 6px;
}
.bw-fb-reactions__text{
width: 100%;
border: 1px solid #E5E7EB;
border-radius: 10px;
padding: 8px 10px;
font: inherit;
font-size: 13px;
resize: vertical;
min-height: 56px;
}
.bw-fb-reactions__follow-actions{
display: flex;
justify-content: flex-end;
}
.bw-fb-reactions__send{
background: var(--accent);
color: #fff;
border: 0;
padding: 6px 14px;
border-radius: 999px;
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.bw-fb-reactions__send:hover:not(:disabled){
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
}
.bw-fb-reactions__thanks{
color: var(--accent);
font-weight: 500;
}
/* Beta pulse prompt */
.bw-fb-pulse{
position: fixed;
right: 18px;
bottom: 76px;
z-index: 1199;
width: min(340px, 92vw);
background: #ffffff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 16px;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.06),
0 18px 36px -16px rgba(15, 23, 42, 0.28);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.bw-fb-pulse.is-visible{
opacity: 1;
transform: translateY(0);
}
.bw-fb-pulse__head{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
}
.bw-fb-pulse__eyebrow{
margin: 0 0 2px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(11, 61, 46, 0.78);
}
.bw-fb-pulse__title{
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
line-height: 1.3;
}
.bw-fb-pulse__close{
border: 0;
background: transparent;
font-size: 18px;
color: rgba(71, 85, 105, 0.7);
cursor: pointer;
padding: 0 4px;
border-radius: 6px;
}
.bw-fb-pulse__close:hover{
background: rgba(15, 23, 42, 0.06);
color: #0f172a;
}
.bw-fb-pulse__body{
margin: 8px 0 12px;
font-size: 13px;
line-height: 1.5;
color: rgba(51, 65, 85, 0.92);
}
.bw-fb-pulse__rate{
display: flex;
gap: 6px;
margin-bottom: 8px;
}
.bw-fb-pulse__rate-btn{
flex: 1 1 0;
padding: 6px 8px;
border: 1px solid #E5E7EB;
background: #ffffff;
border-radius: 999px;
font: inherit;
font-size: 12px;
cursor: pointer;
color: rgba(71, 85, 105, 0.92);
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.bw-fb-pulse__rate-btn:hover{
border-color: var(--accent);
color: var(--accent);
}
.bw-fb-pulse__rate-btn.is-active{
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, #ffffff);
color: var(--accent);
font-weight: 600;
}
.bw-fb-pulse__text{
width: 100%;
border: 1px solid #E5E7EB;
border-radius: 10px;
padding: 8px 10px;
font: inherit;
font-size: 13px;
resize: vertical;
min-height: 52px;
margin-bottom: 10px;
}
.bw-fb-pulse__actions{
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.bw-fb-pulse__never{
background: transparent;
border: 0;
font: inherit;
font-size: 12px;
color: rgba(100, 116, 139, 0.8);
cursor: pointer;
padding: 4px 6px;
border-radius: 6px;
}
.bw-fb-pulse__never:hover{
color: rgba(31, 41, 55, 0.94);
background: rgba(15, 23, 42, 0.04);
}
.bw-fb-pulse__send{
background: var(--accent);
color: #fff;
border: 0;
padding: 6px 14px;
border-radius: 999px;
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.bw-fb-pulse__send:hover{
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
}
/* ============================================================
Forecast Preferences (Settings → Preferences pane)
Card-based "personal forecasting preferences" layout. The
pane itself owns spacing tokens so individual cards stay
visually paired. All selectors are scoped to .prefs-pane to
avoid leaking onto Accounts / Preferences / Billing.
============================================================ */
.prefs-pane{
--prefs-card-bg: #fbfcfc;
--prefs-card-bg-tinted: color-mix(in srgb, var(--accent) 5.5%, #fbfcfc 94.5%);
--prefs-card-bg-alt: rgba(248, 250, 252, 0.92);
--prefs-card-border: rgba(11, 61, 46, 0.11);
--prefs-card-shadow:
0 1px 0 rgba(255, 255, 255, 0.9) inset,
0 1px 2px rgba(15, 23, 42, 0.04),
0 10px 28px -16px rgba(11, 61, 46, 0.14);
--prefs-text: #0f172a;
--prefs-text-soft: rgba(30, 41, 59, 0.88);
--prefs-text-mute: rgba(71, 85, 105, 0.72);
--prefs-divider: rgba(17, 24, 39, 0.07);
display: flex;
flex-direction: column;
gap: 36px;
padding: 8px 0 12px;
max-width: 1080px;
margin-inline: auto;
width: 100%;
}
.prefs-pane__head{
margin: 0 0 6px;
padding-bottom: 8px;
}
.prefs-pane__title{
font-size: clamp(1.35rem, 1.1rem + 0.6vw, 1.55rem);
font-weight: 750;
letter-spacing: -0.02em;
color: var(--prefs-text);
margin: 0;
line-height: 1.2;
}
.prefs-pane__lede{
margin: 6px 0 0;
font-size: 0.86rem;
line-height: 1.45;
color: var(--prefs-text-mute);
max-width: 42ch;
}
.prefs-pane__footnote{
margin: 4px 2px 0;
font-size: 0.76rem;
line-height: 1.45;
color: rgba(100, 116, 139, 0.68);
font-style: normal;
}
.prefs-card{
background: var(--prefs-card-bg);
border: 1px solid var(--prefs-card-border);
border-radius: 16px;
box-shadow: var(--prefs-card-shadow);
padding: 22px 26px 22px;
display: flex;
flex-direction: column;
gap: 20px;
}
.prefs-card--elevated{
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.88) inset,
0 2px 4px rgba(15, 23, 42, 0.045),
0 14px 36px -18px rgba(11, 61, 46, 0.2);
}
.prefs-card--tinted{
background: var(--prefs-card-bg-tinted);
}
.prefs-card--alerts{
background: var(--prefs-card-bg-alt);
border-color: rgba(100, 116, 139, 0.12);
}
.prefs-card--tour{
padding: 16px 20px;
background: linear-gradient(135deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.85) 100%);
border-color: rgba(100, 116, 139, 0.1);
gap: 0;
}
.prefs-card__head{
display: flex;
flex-direction: column;
gap: 4px;
}
.prefs-card__head--row{
flex-direction: row;
align-items: flex-start;
gap: 14px;
}
.prefs-card__head-text{
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.prefs-card__icon{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 12px;
color: color-mix(in srgb, var(--accent) 75%, #1e293b);
background: color-mix(in srgb, var(--accent) 9%, #ffffff);
border: 1px solid color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.8));
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.prefs-card__icon--muted{
color: rgba(71, 85, 105, 0.82);
background: rgba(255, 255, 255, 0.65);
border-color: rgba(148, 163, 184, 0.2);
}
.prefs-card__icon-svg{
display: block;
}
.prefs-card__title{
margin: 0;
font-size: 1.06rem;
font-weight: 750;
letter-spacing: -0.02em;
color: var(--prefs-text);
line-height: 1.25;
}
.prefs-card__title--inline{
font-size: 1rem;
}
.prefs-card__lede{
margin: 0;
font-size: 0.8rem;
line-height: 1.45;
color: var(--prefs-text-mute);
}
/* Subgroup stacks inside Forecast defaults */
.prefs-stack{
display: flex;
flex-direction: column;
gap: 20px;
}
.prefs-field-group{
padding: 18px 20px;
border-radius: 13px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(17, 24, 39, 0.05);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.96) inset;
}
.prefs-card--tinted .prefs-field-group{
background: rgba(255, 255, 255, 0.55);
}
/* Field row */
.prefs-field{
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 0;
border-top: none;
}
.prefs-field-group .prefs-field + .prefs-field{
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--prefs-divider);
}
.prefs-field__label{
font-size: 0.875rem;
font-weight: 650;
color: var(--prefs-text-soft);
letter-spacing: -0.01em;
}
.prefs-field__hint{
margin: 0;
font-size: 0.76rem;
line-height: 1.4;
color: var(--prefs-text-mute);
}
.prefs-field__control{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 0;
}
.prefs-field__control--threshold{
align-items: stretch;
gap: 14px;
}
@media (min-width: 480px){
.prefs-field__control--threshold{
align-items: center;
}
}
.prefs-field__control--threshold .prefs-field__save{
padding: 10px 18px;
min-height: 42px;
}
.prefs-field__save{
flex: 0 0 auto;
}
.prefs-field__helper{
margin: 4px 0 0;
font-size: 0.74rem;
line-height: 1.4;
color: rgba(100, 116, 139, 0.7);
}
.prefs-field__helper--tight{
margin-top: 2px;
}
.prefs-field__err{
margin: 4px 0 0 !important;
font-size: 0.8rem;
}
.prefs-field__saved{
margin: 4px 0 0;
font-size: 0.78rem;
color: color-mix(in srgb, var(--accent) 72%, var(--text));
}
.prefs-pane .prefs-money.money-input{
max-width: 200px;
}
.prefs-select{
appearance: none;
-webkit-appearance: none;
background-color: #ffffff;
background-image:
linear-gradient(45deg, transparent 50%, rgba(75, 85, 99, 0.65) 50%),
linear-gradient(135deg, rgba(75, 85, 99, 0.65) 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
border: 1px solid rgba(11, 61, 46, 0.16);
border-radius: 10px;
padding: 9px 36px 9px 12px;
font: inherit;
font-size: 14px;
font-weight: 500;
color: var(--prefs-text);
min-width: 220px;
cursor: pointer;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.prefs-select:hover{
border-color: color-mix(in srgb, var(--accent) 30%, rgba(11, 61, 46, 0.16));
}
.prefs-select:focus-visible{
outline: none;
border-color: color-mix(in srgb, var(--accent) 55%, rgba(11, 61, 46, 0.16));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* Segmented control — clearer inactive “tray” */
.prefs-segmented{
display: inline-flex;
background: rgba(241, 245, 249, 0.95);
border: 1px solid rgba(11, 61, 46, 0.12);
border-radius: 12px;
padding: 4px;
gap: 3px;
box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}
.prefs-segmented input[type="radio"]{
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.prefs-segmented__opt{
font-size: 13px;
font-weight: 640;
color: rgba(71, 85, 105, 0.82);
padding: 9px 16px;
border-radius: 9px;
cursor: pointer;
transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
user-select: none;
}
.prefs-segmented__opt:hover{
color: var(--prefs-text);
background: rgba(255, 255, 255, 0.72);
}
.prefs-segmented input[type="radio"]:checked + .prefs-segmented__opt{
background: color-mix(in srgb, var(--accent) 94%, #0a1f18 6%);
color: #ffffff;
box-shadow: 0 2px 6px rgba(11, 61, 46, 0.22);
}
.prefs-segmented input[type="radio"]:focus-visible + .prefs-segmented__opt{
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: 2px;
}
/* Alerts — list rows as scannable blocks */
.prefs-toggles{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.prefs-toggle{
display: flex;
align-items: center;
gap: 16px;
padding: 16px 16px;
margin: 0;
border: 1px solid rgba(17, 24, 39, 0.05);
border-radius: 12px;
background: rgba(255, 255, 255, 0.6);
transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.prefs-toggle--row:hover:not(.prefs-toggle--disabled){
background: rgba(255, 255, 255, 0.94);
border-color: color-mix(in srgb, var(--accent) 14%, rgba(17, 24, 39, 0.06));
box-shadow: 0 2px 10px -6px rgba(11, 61, 46, 0.12);
}
.prefs-toggle--disabled{
opacity: 0.52;
background: rgba(248, 250, 252, 0.55);
border-style: dashed;
border-color: rgba(148, 163, 184, 0.25);
}
.prefs-toggle--disabled:hover{
border-color: rgba(148, 163, 184, 0.28);
}
.prefs-toggle__main{
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.prefs-toggle__titleline{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.prefs-toggle__label{
font-size: 0.9rem;
font-weight: 650;
color: var(--prefs-text);
letter-spacing: -0.01em;
}
.prefs-toggle__hint{
font-size: 0.76rem;
color: rgba(100, 116, 139, 0.78);
line-height: 1.4;
}
.prefs-toggle--disabled .prefs-toggle__label{
color: rgba(71, 85, 105, 0.72);
font-weight: 600;
}
.prefs-soon-pill{
flex: 0 0 auto;
font-size: 0.62rem;
font-weight: 750;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(100, 116, 139, 0.85);
background: rgba(241, 245, 249, 0.95);
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 999px;
padding: 4px 9px;
line-height: 1;
}
.prefs-switch{
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
width: 42px;
height: 24px;
cursor: pointer;
}
.prefs-switch input[type="checkbox"]{
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.prefs-switch__track{
position: absolute;
inset: 0;
background: rgba(17, 24, 39, 0.16);
border-radius: 999px;
transition: background-color 160ms ease;
}
.prefs-switch__track::after{
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #ffffff;
border-radius: 999px;
box-shadow: 0 1px 3px rgba(17, 24, 39, 0.2);
transition: transform 160ms ease;
}
.prefs-switch input[type="checkbox"]:checked + .prefs-switch__track{
background: color-mix(in srgb, var(--accent) 82%, #000 0%);
}
.prefs-switch input[type="checkbox"]:checked + .prefs-switch__track::after{
transform: translateX(18px);
}
.prefs-switch input[type="checkbox"]:focus-visible + .prefs-switch__track{
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.prefs-switch--disabled{
cursor: not-allowed;
filter: grayscale(0.4);
}
.prefs-switch--disabled .prefs-switch__track{
background: rgba(148, 163, 184, 0.35);
}
/* Product tour — compact horizontal help row */
.prefs-tour-inline{
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.prefs-tour-inline__copy{
flex: 1 1 200px;
min-width: 0;
}
.prefs-tour-inline__lede{
margin: 2px 0 0;
font-size: 0.78rem;
line-height: 1.4;
color: rgba(100, 116, 139, 0.78);
}
.prefs-tour-cta{
margin-left: auto;
background: color-mix(in srgb, var(--accent) 92%, #000 8%);
color: #ffffff;
border: 0;
border-radius: 10px;
padding: 10px 18px;
font: inherit;
font-size: 0.86rem;
font-weight: 650;
cursor: pointer;
transition: background-color 140ms ease, transform 80ms ease;
white-space: nowrap;
}
.prefs-tour-cta:hover{
background: color-mix(in srgb, var(--accent) 84%, #000 16%);
}
.prefs-tour-cta:active{
transform: translateY(0.5px);
}
.prefs-tour-cta:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
outline-offset: 2px;
}
body[data-bw-view="settings"] .settings-nav.settings-nav--sidebar{
padding: 6px 2px 8px;
background: transparent;
border: 0;
box-shadow: none;
}
body[data-bw-view="settings"] .settings-nav.settings-nav--flat{
padding: 4px 0 6px;
gap: 1px;
}
body[data-bw-view="settings"] .settings-nav--flat .settings-nav-item{
padding: 7px 8px 7px 14px;
font-size: 12px;
font-weight: 520;
border-radius: 8px;
margin: 1px 0;
color: rgba(71, 85, 105, 0.72);
}
body[data-bw-view="settings"] .settings-nav--flat .settings-nav-item:hover{
background: rgba(15, 23, 42, 0.035);
color: rgba(30, 41, 59, 0.92);
}
body[data-bw-view="settings"] .settings-nav--flat .settings-nav-item.is-active{
background: rgba(255, 255, 255, 0.5);
box-shadow: none;
font-weight: 640;
color: rgba(15, 23, 42, 0.94);
}
body[data-bw-view="settings"] .settings-nav--flat .settings-nav-item.is-active::before{
left: 4px;
width: 2px;
top: 20%;
bottom: 20%;
background: color-mix(in srgb, var(--accent) 50%, transparent);
}
@media (max-width: 720px){
.prefs-card{
padding: 18px 16px 18px;
}
.prefs-pane{
gap: 26px;
}
.prefs-segmented{
flex-wrap: wrap;
width: 100%;
}
.prefs-tour-inline{
flex-direction: column;
align-items: stretch;
}
.prefs-tour-cta{
margin-left: 0;
width: 100%;
text-align: center;
}
.prefs-field-group{
padding: 14px 14px;
}
}
/* Mobile-first cleanup pass: phone layouts should stack intentionally instead
of compressing desktop assumptions into 390px widths. */
@media (max-width: 768px){
:root{
--app-top-nav-offset: 116px;
}
html,
body{
max-width: 100vw;
overflow-x: hidden;
}
.container,
.app-layout,
.sidebar,
.main-column,
.main-column-aux,
.calendar-panel,
.calendar-panel-sticky-zone,
.calendar-scroll,
.card,
.tm,
body.landing-page .landing-main,
body.landing-page .landing-shell,
body.landing-page .landing-hero__inner,
body.landing-page .landing-preview__demo{
max-width: 100%;
min-width: 0;
}
.container{
padding-left: 10px;
padding-right: 10px;
}
.top-nav{
padding: 10px 0 8px;
}
.top-nav__inner{
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title actions"
"tabs tabs";
gap: 8px 10px;
align-items: center;
padding-left: 10px;
padding-right: 10px;
}
.top-nav__title{
grid-area: title;
width: 100%;
min-width: 0;
padding-left: 0;
justify-content: flex-start;
}
.top-nav__actions{
grid-area: actions;
padding-right: 0;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.top-nav__actions .top-nav__admin{
margin-right: 0;
}
.top-nav__logout,
.top-nav__actions .top-nav__admin{
font-size: 0.84rem;
line-height: 1.1;
padding: 7px 10px;
border-radius: 12px;
}
.top-nav .app-title--logo > a{
padding: 0;
border-radius: 0;
background: transparent;
border: none;
box-shadow: none;
}
.top-nav .app-title--logo .app-logo{
height: 40px;
max-width: min(272px, 58vw);
}
.top-nav__tabs{
grid-area: tabs;
display: flex;
gap: 8px;
width: 100%;
max-width: 100%;
margin: 2px 0 0;
padding: 0 0 6px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.top-nav__tabs::-webkit-scrollbar{
display: none;
}
.top-nav__tab{
flex: 0 0 auto;
white-space: nowrap;
scroll-snap-align: start;
padding: 8px 11px;
font-size: 0.88rem;
border-radius: 12px;
}
.top-nav__tab.is-active::after{
left: 8px;
right: 8px;
bottom: 4px;
height: 2px;
}
.top-nav__inner--simple{
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "title actions";
justify-items: stretch;
row-gap: 0;
}
.top-nav__inner--simple .top-nav__title{
width: auto;
justify-content: flex-start;
padding-left: 0;
}
.top-nav__inner--simple .top-nav__actions{
justify-self: end;
}
body.login-page:not(.signup-page):not(.invite-page) .top-nav .app-title--logo > a,
body.landing-page .top-nav .app-title--logo > a{
padding: 0;
}
body.login-page:not(.signup-page):not(.invite-page) .top-nav .app-title--logo .app-logo,
body.landing-page .top-nav .app-title--logo .app-logo{
height: 40px;
max-width: min(272px, 58vw);
}
.app-layout,
body[data-bw-view="calendar"] .app-layout,
body[data-bw-view="transactions"] .app-layout,
body[data-bw-view="reports"] .app-layout,
body[data-bw-view="settings"] .app-layout{
grid-template-columns: 1fr;
gap: 10px;
}
.sidebar,
body[data-bw-view="calendar"] .sidebar,
body[data-bw-view="transactions"] .sidebar,
body[data-bw-view="reports"] .sidebar,
body[data-bw-view="settings"] .sidebar{
position: static;
top: auto;
max-height: none;
overflow: visible;
padding-right: 0;
gap: 10px;
background: transparent;
}
.main-column,
.main-column-aux{
overflow: visible;
padding-right: 0;
}
.card{
border-radius: 12px;
}
.pending-attn-item{
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.pending-attn-meta{
align-self: auto;
}
.pending-attn-indicator{
align-self: center;
flex-shrink: 0;
}
body[data-bw-view="calendar"] .calendar-panel-sticky-zone{
position: static;
}
body[data-bw-view="calendar"] .calendar-sticky-header{
position: static;
top: auto;
}
body[data-bw-view="calendar"] .calendar-nav-bar{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto;
gap: 6px 8px;
padding: 8px;
border-radius: 14px;
align-items: center;
}
body[data-bw-view="calendar"] .calendar-nav-bar > *{
min-width: 0;
}
body[data-bw-view="calendar"] .cal-today-btn{
grid-column: 1;
grid-row: 1;
margin-left: 0;
justify-self: start;
}
body[data-bw-view="calendar"] .cal-detail-toggle{
grid-column: 2;
grid-row: 1;
justify-self: end;
width: auto;
max-width: none;
margin-right: 0;
flex-shrink: 0;
overflow: visible;
}
body[data-bw-view="calendar"] .cal-month-year{
grid-column: 1 / -1;
grid-row: 2;
justify-content: space-between;
gap: 8px;
width: 100%;
}
body[data-bw-view="calendar"] .cal-mode-wrap{
display: none;
}
.calendar--mobile{
display: flex;
flex-direction: column;
gap: 10px;
}
.calendar--mobile .cal-cell.cal-cell--out{
display: none;
}
.calendar--mobile .cal-cell{
min-height: 0 !important;
padding: 12px 12px 10px;
border-radius: 14px;
}
.calendar--mobile .cal-daynum{
justify-content: space-between;
gap: 7px;
margin-bottom: 8px;
padding-bottom: 8px;
}
.calendar--mobile .cal-daynum::before{
content: attr(data-mobile-label);
display: block;
min-width: 0;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.2;
color: rgba(31, 41, 55, 0.86);
}
.calendar--mobile .cal-daynum::after{
left: 0;
right: 0;
}
.calendar--mobile .cal-daynum-num{
display: none;
}
.calendar--mobile .cal-cell.cal-cell--today:not(.cal-cell--out):not(.cal-cell--before-start) .cal-daynum::before{
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 24%, #fff);
color: rgba(11, 61, 46, 0.98);
border: 1.5px solid rgba(11, 61, 46, 0.32);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.58),
0 1px 3px rgba(11, 61, 46, 0.12);
}
.calendar--mobile .cal-day-reconcile-btn{
opacity: 0;
width: 26px;
height: 26px;
pointer-events: none;
}
.calendar--mobile .cal-cell:not(.cal-cell--out):not(.cal-cell--before-start):focus-within .cal-day-reconcile-btn,
.calendar--mobile .cal-cell:not(.cal-cell--out):not(.cal-cell--before-start):hover .cal-day-reconcile-btn,
.calendar--mobile .cal-cell:not(.cal-cell--out):not(.cal-cell--before-start):active .cal-day-reconcile-btn,
.calendar--mobile .cal-day-reconcile-btn:hover,
.calendar--mobile .cal-day-reconcile-btn:focus-visible{
opacity: 1;
pointer-events: auto;
}
.calendar--mobile .cal-reconciled-mark{
opacity: 0;
pointer-events: none;
width: 16px;
height: 16px;
transform: translate(1px, -1px);
transition: opacity 0.14s ease;
}
.calendar--mobile .cal-cell.cal-cell--reconciled:focus-within .cal-reconciled-mark,
.calendar--mobile .cal-cell.cal-cell--reconciled:hover .cal-reconciled-mark,
.calendar--mobile .cal-cell.cal-cell--reconciled:active .cal-reconciled-mark{
opacity: 1;
}
.calendar--mobile .cal-reconciled-mark svg{
width: 8px;
height: 8px;
}
.calendar--mobile .cal-cell-stack{
gap: 8px;
}
.calendar--mobile .cal-day-txns{
gap: 6px;
}
.calendar--mobile .cal-day-tx-line{
font-size: var(--cal-tx-font-size, 11.29px);
min-height: 17px;
}
.calendar--mobile .cal-cell--density-sparse .cal-day-tx-line{
font-size: var(--cal-tx-font-size, 11.29px);
min-height: 20px;
}
.calendar--mobile .cal-cell--density-dense .cal-day-tx-line{
font-size: var(--cal-tx-font-size, 11.29px);
min-height: 15px;
}
.calendar--mobile .cal-day-more{
margin-top: 2px;
font-size: 10.5px;
}
.calendar--mobile .cal-ledger-metrics{
margin-top: 2px;
padding-top: 8px;
border-top: 1px solid rgba(17, 24, 39, 0.06);
align-items: stretch;
text-align: left;
}
.calendar--mobile .cal-ledger-metrics .cal-stat{
text-align: left;
}
.calendar--mobile .cal-balance-strip__row{
justify-content: space-between;
gap: 10px;
}
.calendar--mobile .cal-balance-strip__row::before{
content: "Projected balance";
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.01em;
color: rgba(100, 116, 139, 0.76);
}
.calendar--mobile .cal-stat.cal-balance{
font-size: 13.5px;
}
.calendar--mobile .cal-cell--density-sparse .cal-stat.cal-balance{
font-size: 14px;
}
.calendar--mobile .cal-cell--no-tx .cal-stat.cal-balance{
font-size: 12.5px;
font-weight: 560;
color: rgba(100, 116, 139, 0.5);
}
.calendar--mobile .cal-stat.cal-balance.cal-balance--below-floor{
font-size: 13px;
font-weight: 540;
}
body[data-bw-view="transactions"] .tm{
width: 100%;
}
body[data-bw-view="transactions"] .tm__head{
gap: 12px;
padding-top: 2px;
}
body[data-bw-view="transactions"] .tm__headActions{
width: 100%;
padding-top: 0;
}
body[data-bw-view="transactions"] .tm-primary-action{
width: 100%;
min-height: 44px;
font-size: 0.86rem;
}
body[data-bw-view="transactions"] .tm__searchRow{
grid-template-columns: 1fr;
gap: 8px;
}
body[data-bw-view="transactions"] .tm__field--search input[type="search"],
body[data-bw-view="transactions"] .tm__field--search input,
body[data-bw-view="transactions"] .tm__moreFiltersBtn{
border-radius: 10px;
min-height: 44px;
}
body[data-bw-view="transactions"] .tm__moreFiltersBtn{
width: 100%;
margin-left: 0;
}
body[data-bw-view="transactions"] .tm__chips{
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 2px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
body[data-bw-view="transactions"] .tm__chips::-webkit-scrollbar{
display: none;
}
body[data-bw-view="transactions"] .tm-chip{
flex: 0 0 auto;
min-height: 36px;
padding-left: 10px;
padding-right: 10px;
font-size: 0.78rem;
}
body[data-bw-view="transactions"] .tm__advanced{
padding: 10px;
}
body[data-bw-view="transactions"] .tm__toolbarRow,
body[data-bw-view="transactions"] .tm__toolbarRow + .tm__toolbarRow{
grid-template-columns: 1fr;
margin-top: 8px;
}
body[data-bw-view="transactions"] .tm-insight-grid__inner{
grid-template-columns: 1fr;
gap: 8px;
}
.modal-overlay{
padding: 10px;
align-items: flex-start;
overflow-y: auto;
}
.modal,
.modal--tx-add,
#txEditInner.modal,
.modal--expected-edit{
width: calc(100vw - 24px);
max-width: none;
max-height: calc(100vh - 24px);
margin: 6px auto;
overflow-y: auto;
}
.modal--tx-add{
padding: 12px;
}
.modal--tx-add > h3{
width: calc(100% + 24px);
margin: -12px -12px 10px;
padding: 10px 12px;
}
.tx-edit-top{
margin: -12px -14px 0;
padding: 11px 12px 11px;
}
.modal--expected-edit .tx-edit-top{
margin: 0;
}
.tx-add-form .form-row-h,
#txEditInner .form-row-h,
.modal--expected-edit #expectedEditInstancePanel .form-row-h,
.tx-add-schedule-compact .form-row-h,
.expected-second-day-row{
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.modal--tx-add .tx-add-form .form-row-h,
.modal--tx-add .tx-add-schedule-compact .form-row-h,
.modal--tx-add .tx-add-end-detail__row,
.modal--tx-add #txAddRecurringBlock .tx-add-second-monthly-row,
.modal--tx-add .tx-add-variable-block,
.modal--tx-add .tx-add-advanced__panel{
grid-template-columns: 1fr;
row-gap: 8px;
}
.modal--tx-add .tx-add-variable-form-row{
display: contents;
}
.modal--tx-add .tx-add-variable-block .form-row-h__label{
grid-column: 1;
grid-row: 1;
padding-right: 0;
justify-content: flex-end;
text-align: right;
}
.modal--tx-add .tx-add-variable-block .form-row-h__label label{
text-align: right;
}
.modal--tx-add .tx-add-variable-block__caption{
padding-left: 0;
}
.modal--tx-add .tx-add-variable-block .tx-add-variable-field-wrap{
grid-column: 1;
grid-row: 2;
}
.modal--tx-add .tx-add-variable-block__caption{
grid-column: 1;
grid-row: 3;
}
.modal--tx-add .tx-add-cat-color-row,
.modal--tx-add .tx-add-notes-row{
display: grid;
grid-template-columns: 1fr;
gap: 5px;
}
.modal--tx-add .tx-add-form .form-row-h__label{
padding-top: 0;
}
.modal--tx-add .tx-quick-chips{
flex-wrap: nowrap;
overflow-x: auto;
}
.modal.modal--account{
width: calc(100vw - 24px);
max-width: none;
padding: 14px 14px 12px;
}
.modal.modal--account > h3{
width: calc(100% + 28px);
margin: -14px -14px 10px;
padding: 11px 14px 10px;
}
.modal.modal--account .account-modal__row.row.two{
grid-template-columns: 1fr;
gap: 10px;
}
.modal.modal--account .account-modal__info{
width: 100%;
}
.modal.modal--account .account-modal__actions-buttons{
width: 100%;
justify-content: stretch;
}
.modal.modal--account .account-modal__actions-buttons .account-modal__primary,
.modal.modal--account .account-modal__actions-buttons #cancelAccountEditBtn{
flex: 1 1 auto;
min-width: 0;
}
.expected-second-day-row{
grid-template-columns: 1fr;
}
.expected-second-day-row label{
white-space: normal;
padding-top: 0;
}
.form-row-h__label,
.tx-add-form .form-row-h__label,
.modal--tx-add .tx-add-form .form-row-h__label{
flex: 0 0 auto;
max-width: none;
width: 100%;
}
.form-row-h__field{
justify-content: flex-start;
padding-top: 0;
}
.tx-add-second-monthly__row,
.row.row-recurring-head{
grid-template-columns: 1fr;
flex-wrap: wrap;
}
.tx-add-end-count-field{
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.tx-add-end-count-field input[type="number"]{
max-width: none;
}
.modal--tx-add .tx-add-form .modal-actions.modal-actions--tx-add-foot .row.two.tx-add-actions-row,
#txEditInner > .modal-actions.modal-actions--tx-edit-foot{
flex-wrap: wrap;
row-gap: 10px;
}
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row,
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row--main,
.modal--expected-edit > .modal-actions #txEditFooterSecondary.tx-edit-actions-row{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 8px;
width: auto;
flex: 1 1 auto;
}
#txEditInner > .modal-actions #txEditSaveRow.tx-edit-save-cell{
max-width: none;
flex: 1 1 8rem;
}
.tx-add-btn-primary,
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row #txEditSave,
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row #txEditRecurringUpdateBtn{
width: 100%;
min-height: 38px !important;
}
#txAddCancel,
#txEditInner > .modal-actions #txEditCancel,
#txEditInner #txEditCancel.tx-edit-dismiss--close{
width: auto !important;
align-self: center;
min-height: 36px !important;
}
#txEditInner > .modal-actions.modal-actions--tx-edit-foot{
flex-wrap: wrap;
row-gap: 8px;
}
#txEditInner > .modal-actions > #txEditDelete.danger,
#txEditDelete.danger.tx-edit-delete-link{
align-self: center;
margin: 0;
order: 1;
}
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row,
#txEditInner > .modal-actions #txEditFooterSecondary.tx-edit-actions-row--main,
.modal--expected-edit > .modal-actions #txEditFooterSecondary.tx-edit-actions-row{
order: 2;
margin-left: auto;
width: auto;
flex: 1 1 auto;
justify-content: flex-end;
}
.modal--tx-add .tx-add-actions-row #txAddCancel{
width: auto;
align-self: center;
min-height: 36px !important;
}
.modal--expected-edit #expectedEditInstancePanel{
padding: 12px 12px 14px;
}
.modal--expected-edit > .modal-actions{
margin: 0 12px 12px;
}
body.landing-page .landing-main{
padding-top: 0.45rem;
padding-bottom: 0.8rem;
}
body.landing-page .landing-shell{
padding-left: max(0.75rem, env(safe-area-inset-left));
padding-right: max(0.75rem, env(safe-area-inset-right));
gap: 0.8rem;
}
body.landing-page .landing-hero__inner{
gap: 0.82rem;
padding-top: 0;
}
body.landing-page .landing-hero__copy{
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
body.landing-page .landing-hero__text,
body.landing-page .landing-hero__sub{
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
white-space: normal;
text-wrap: balance;
overflow-wrap: anywhere;
text-align: center;
}
body.landing-page .landing-hero__text{
font-size: calc(clamp(1.52rem, 6.8vw, 1.72rem) * var(--hero-text-scale, 0.95));
line-height: 1.08;
}
body.landing-page .landing-hero__sub{
padding-left: 0;
padding-right: 0;
font-size: clamp(0.88rem, 3.6vw, 1.05rem);
line-height: 1.38;
}
body.landing-page .landing-hero__microtrust{
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
align-items: center;
}
body.landing-page .landing-hero__microtrust-item{
white-space: normal;
text-wrap: pretty;
}
body.landing-page .landing-hero-forecast__copy{
max-width: 100%;
width: 100%;
text-align: center;
align-items: center;
}
body.landing-page .landing-hero-forecast__copy .landing-cal-peek__title,
body.landing-page .landing-hero-forecast__copy .landing-cal-peek__lede{
max-width: 100%;
width: 100%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
body.landing-page .landing-hero__cta{
width: 100%;
max-width: 20rem;
margin-top: 0.48rem;
}
body.landing-page .landing-hero__viz{
max-width: none;
}
body.landing-page .landing-hero-viz{
padding: 12px 12px 10px;
border-radius: 16px;
}
body.landing-page .landing-hero-cal.landing-hero-viz{
padding: 12px 14px 11px;
}
body.landing-page .landing-hero-cal .landing-hero-viz__week{
gap: 10px;
margin-bottom: 2px;
padding: 0 0.1rem;
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell{
min-height: 3.2rem;
padding: 6px 7px 7px;
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--watch{
padding: 7px 7px 7px;
}
body.landing-page .landing-hero-cal .landing-hero-viz__cell--watch .landing-hero-viz__b{
font-size: 13px;
}
body.landing-page #landingHeroForecast .landing-hero-cal__insight{
margin-top: 0.72rem;
padding: 0.32rem 0.46rem;
max-width: 82%;
}
body.landing-page .landing-hero-viz__week{
gap: 4px;
}
body.landing-page .landing-hero-viz__cell{
padding: 5px 3px 6px;
}
body.landing-page .landing-hero-viz__d{
font-size: 9.25px;
}
body.landing-page .landing-hero-viz__b{
font-size: 10.25px;
}
body.landing-page .landing-hero-viz__chartWrap{
margin-top: 7px;
}
body.landing-page .landing-hero-viz__spark{
height: 46px;
margin-top: 7px;
}
body.landing-page .landing-hero-viz__timeline .landing-hero-viz__spark{
margin-top: 0;
}
body.landing-page .landing-hero-viz__horizon{
margin-top: 2px;
font-size: 0.57rem;
text-align: center;
padding-right: 0;
}
body.landing-page .landing-hero-viz__foot{
margin-top: 5px;
}
body.landing-page .landing-preview__demo{
padding: 0.72rem 0.72rem 0.74rem;
gap: 0.6rem;
border-radius: 14px;
}
body.landing-page .landing-preview__tagline{
font-size: 0.88rem;
line-height: 1.28;
}
body.landing-page .landing-preview__transferBand{
max-width: 100%;
padding: 0.58rem 0.68rem 0.62rem;
}
body.landing-page .landing-preview__transferAmt{
font-size: clamp(1.12rem, 6.8vw, 1.42rem);
}
body.landing-page .landing-preview__transferFoot{
font-size: 0.82rem;
line-height: 1.34;
}
body.landing-page .landing-cal-peek__inner{
gap: 0.7rem;
}
body.landing-page .landing-cal-peek__frame{
padding: 10px;
}
body.landing-page .landing-cal-peek__svg{
width: 100%;
height: auto;
}
body.landing-page .landing-below-preview{
padding: 10px 8px 12px;
gap: 0.7rem;
}
body.landing-page .landing-below-preview .landing-how__steps{
gap: 6px;
}
body.landing-page .landing-below-preview .landing-how__steps li{
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
column-gap: 10px;
row-gap: 2px;
padding: 0;
align-items: start;
}
body.landing-page .landing-below-preview .landing-how__steps li::before{
position: static;
grid-column: 1;
grid-row: 1 / span 2;
width: 22px;
height: 22px;
font-size: 10px;
}
body.landing-page .landing-below-preview .landing-how__stepTitle,
body.landing-page .landing-below-preview .landing-how__stepBody{
grid-column: 2;
}
body.landing-page .landing-below-preview .landing-how__stepTitle{
font-size: 12.5px;
line-height: 1.24;
}
body.landing-page .landing-below-preview .landing-how__stepBody{
margin-top: 1px;
font-size: 10.9px;
line-height: 1.34;
}
body.landing-page .landing-below-preview .landing-why__list{
gap: 10px;
}
body.landing-page .landing-below-preview .landing-why__item{
padding: 10px 11px;
border-radius: 12px;
border: 1px solid rgba(11, 61, 46, 0.08);
background: rgba(255, 255, 255, 0.86);
}
body.landing-page .landing-below-preview .landing-why__line{
max-width: none;
gap: 3px;
}
}
@media (max-width: 560px){
:root{
--app-top-nav-offset: 110px;
}
.container{
padding-left: 8px;
padding-right: 8px;
}
.top-nav__inner{
padding-left: 8px;
padding-right: 8px;
gap: 7px 8px;
}
.top-nav .app-title--logo .app-logo{
height: 38px;
max-width: min(252px, 56vw);
}
.top-nav__logout,
.top-nav__actions .top-nav__admin{
font-size: 0.8rem;
padding: 6px 9px;
}
.top-nav__tab{
padding: 7px 10px;
font-size: 0.84rem;
}
body.landing-page .landing-main{
padding-top: 0.35rem;
}
body.landing-page .landing-preview__demo,
body.landing-page .landing-cal-peek__frame,
body.landing-page .landing-emotional-band{
padding-left: 10px;
padding-right: 10px;
}
body.landing-page .landing-emotional-band{
gap: 12px;
padding-top: 12px;
padding-bottom: 12px;
}
}