/* ============================================================ BFF — styles.css Faithful vanilla reproduction of the Lovable prototype. Colors and type mirror the prototype's design tokens. Edit the --variables below to recolor the whole app. ============================================================ */ /* Hide the app until auth decides what to show, so signed-out visitors don't see the home screen flash before the login redirect (and signed-in users don't see placeholder data). JS adds .ready to ; a safety timeout guarantees reveal. */ html:not(.ready) body { visibility: hidden; } :root { --radius: 0.875rem; --background: oklch(0.985 0.008 95); --foreground: oklch(0.18 0.02 200); --surface: oklch(0.97 0.012 90); --card: oklch(1 0 0); --card-foreground: oklch(0.18 0.02 200); --primary: oklch(0.55 0.09 195); --primary-foreground: oklch(0.99 0 0); --primary-soft: oklch(0.93 0.03 195); --secondary: oklch(0.95 0.02 90); --muted: oklch(0.94 0.015 90); --muted-foreground: oklch(0.5 0.02 220); --accent: oklch(0.93 0.03 195); --destructive: oklch(0.6 0.2 25); --destructive-foreground: oklch(0.99 0 0); --success: oklch(0.65 0.15 155); --warning: oklch(0.85 0.14 90); --warning-foreground: oklch(0.35 0.08 80); --border: oklch(0.9 0.015 200); --input: oklch(0.92 0.012 200); --ring: oklch(0.55 0.09 195); --font-display: "Fraunces", ui-serif, Georgia, serif; --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --sidebar-w: 288px; --motion-scale: 1; } /* Dark mode — toggled from Profile (adds .dark to ) */ html.dark { --background: oklch(0.15 0.02 200); --foreground: oklch(0.98 0 0); --surface: oklch(0.2 0.025 200); --card: oklch(0.22 0.025 200); --card-foreground: oklch(0.98 0 0); --primary: oklch(0.65 0.11 195); --primary-foreground: oklch(0.12 0.02 200); --primary-soft: oklch(0.3 0.05 195); --muted: oklch(0.25 0.02 200); --muted-foreground: oklch(0.7 0.02 200); --border: oklch(0.3 0.02 200); } /* Large text — toggled from Profile (adds .large-text to ). The app sizes text in px, so we scale the whole UI up proportionally. */ html.large-text { zoom: 1.15; } /* High-contrast — toggled from Profile (adds .hc to ) */ html.hc { --border: oklch(0.35 0.02 200); --muted-foreground: oklch(0.28 0.02 220); } html.hc.dark { --border: oklch(0.75 0.02 200); --muted-foreground: oklch(0.85 0.02 200); } /* ---------- Base ---------- */ * { box-sizing: border-box; border-color: var(--border); } html, body { margin: 0; padding: 0; /* Stop iOS Safari from auto-inflating text (keeps sizes/alignment consistent between narrow-desktop and the real iPhone). */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; line-height: 1.5; /* Remove the grey flash iOS paints over tapped buttons/links. */ -webkit-tap-highlight-color: transparent; } /* Interactive elements: no 300ms tap delay, no double-tap zoom. */ button, a, .tile, .nav-link, .icon-btn, .chip, .pill-btn, .seg button, input[type="button"], input[type="submit"], label, summary { touch-action: manipulation; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } svg { display: block; } .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; } /* ---------- Layout shell ---------- */ .app { min-height: 100vh; min-height: 100dvh; } /* Desktop sidebar */ .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--sidebar-w); display: none; flex-direction: column; border-right: 2px solid var(--border); background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(8px); } .sidebar .brand { display: flex; align-items: center; gap: 8px; padding: 20px 24px; } .sidebar-nav { display: flex; flex-direction: column; gap: 6px; padding: 0 16px; flex: 1; } .sidebar-foot { border-top: 2px solid var(--border); padding: 16px; } .brand-logo { display: grid; place-items: center; height: 36px; width: 36px; border-radius: 12px; background: var(--primary); color: var(--primary-foreground); font-family: var(--font-display); font-weight: 700; font-size: 18px; overflow: hidden; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; } .brand-logo svg { height: 20px; width: 20px; } .brand-img { height: 26px; width: auto; display: block; } button.nav-profile, button.nav-link { width: 100%; border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left; } .nav-link { display: flex; align-items: center; gap: 12px; border-radius: 12px; padding: 12px 16px; font-size: 16px; font-weight: 500; color: var(--foreground); transition: background .15s, color .15s; } .nav-link svg { height: 20px; width: 20px; } .nav-link:hover { background: var(--muted); } .nav-link.active { background: var(--primary); color: var(--primary-foreground); } .nav-profile { display: flex; align-items: center; gap: 8px; border-radius: 12px; padding: 8px; color: var(--foreground); transition: background .15s; } .nav-profile:hover { background: var(--muted); } .nav-profile.active { background: var(--primary); color: var(--primary-foreground); } .nav-profile .np-icon { display: grid; place-items: center; height: 36px; width: 36px; border-radius: 12px; background: var(--muted); color: var(--foreground); } .nav-profile.active .np-icon { background: color-mix(in oklab, var(--primary-foreground) 20%, transparent); color: var(--primary-foreground); } .nav-profile span.np-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; } a.nav-profile, a.nav-link { text-decoration: none; } .nav-profile .np-avatar { border-radius: 999px; overflow: hidden; } .nav-profile .np-avatar svg { height: 20px; width: 20px; } .np-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .np-text .np-name { font-size: 14px; line-height: 1.2; } .np-sub { font-size: 12px; color: var(--muted-foreground); } .nav-profile.active .np-sub { color: color-mix(in oklab, var(--primary-foreground) 80%, transparent); } /* Home greeting profile chip */ .home-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .home-head > div { display: flex; flex-direction: column; gap: 2px; } .home-head .page-eyebrow { margin: 0; line-height: 1.2; } .home-head .page-title { margin: 0; line-height: 1.05; } .home-avatar { height: 68px; width: 68px; text-decoration: none; } .home-avatar svg { height: 32px; width: 32px; } /* Mobile header */ .mobile-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); background: color-mix(in oklab, var(--background) 85%, transparent); backdrop-filter: blur(8px); } .mh-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; } .mh-left, .mh-right { display: flex; align-items: center; gap: 8px; } .icon-btn { display: grid; place-items: center; height: 36px; width: 36px; border-radius: 999px; border: 0; background: transparent; color: var(--foreground); transition: background .15s; } .icon-btn:hover { background: var(--muted); } .icon-btn svg { height: 18px; width: 18px; } .icon-btn.muted { color: var(--muted-foreground); } .icon-btn.avatar { background: var(--muted); } .icon-btn.avatar.active { background: var(--primary); color: var(--primary-foreground); } .mobile-header .brand { display: flex; align-items: center; gap: 8px; } /* Mobile slide-out sheet */ .sheet-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .2s; } .sheet-overlay.open { opacity: 1; pointer-events: auto; } .sheet { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 288px; max-width: 85vw; background: var(--background); border-right: 1px solid var(--border); transform: translateX(-100%); transition: transform .2s ease; display: flex; flex-direction: column; } .sheet.open { transform: translateX(0); } .sheet-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); padding: 16px 20px; } .sheet-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px; } .sheet-nav .nav-link { padding: 12px; font-size: 14px; } .sheet-nav .nav-link svg { height: 16px; width: 16px; } /* Main content */ .main { padding: 24px 16px 40px; } .container { margin: 0 auto; max-width: 80rem; } @media (min-width: 768px) { .mobile-header { display: none; } .sidebar { display: flex; } .sheet, .sheet-overlay { display: none; } .main { margin-left: var(--sidebar-w); padding: 32px; } } @media (min-width: 640px) { .main { padding-left: 24px; padding-right: 24px; } } /* ---------- Page heading ---------- */ .page-eyebrow { font-size: 14px; color: var(--muted-foreground); } .page-title { font-size: 30px; font-weight: 700; margin-top: 4px; } @media (min-width: 640px) { .page-title { font-size: 36px; } } .head-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .head-between { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 24px; } /* ---------- Cards ---------- */ .card { border-radius: 24px; background: var(--card); padding: 24px; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent); } .card-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); } .card-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; } .card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .card-icon { display: grid; place-items: center; height: 36px; width: 36px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); } .card-icon svg { height: 16px; width: 16px; } /* Grids */ .grid { display: grid; gap: 20px; } /* Grid items default to min-width:auto, so a wide child (like the History chart) can force the shared mobile column wider than the screen, pushing every card in that grid past the right edge. min-width:0 lets them shrink to the container. */ .grid > * { min-width: 0; } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .mt-5 { margin-top: 20px; } .space-y > * + * { margin-top: 20px; } @media (min-width: 1024px) { /* auto-fit + a 300px floor: cards drop to 2 (then 1) columns before they get narrow enough to cramp the History control or wrap the Quick-add title, instead of always forcing 3 columns into whatever width is available. */ .grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .lg-col-2 { grid-column: span 2; } /* Desktop balance hero: only the "CURRENT BALANCE" eyebrow gets a slightly larger font on wide screens. The layout stays stacked (eyebrow → toggle row → account label → amount → In/Out pair below), same as mobile — no horizontal split. .hero-money keeps display:contents so it's transparent to layout. */ .hero-eyebrow { font-size: 15px; } } .sub-2 { display: grid; gap: 16px; } @media (min-width: 640px) { .sub-2 { grid-template-columns: 1fr 1fr; } } /* ---------- Hero balance card ---------- */ .hero { position: relative; overflow: hidden; border-radius: 24px; background: var(--primary); color: var(--primary-foreground); padding: 32px; } .hero .blob { position: absolute; border-radius: 999px; filter: blur(40px); } .hero .blob1 { right: -64px; top: -64px; height: 256px; width: 256px; background: rgba(255,255,255,.10); } .hero .blob2 { bottom: -80px; left: -40px; height: 224px; width: 224px; background: rgba(255,255,255,.05); } .hero-inner { position: relative; } .hero-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .9; margin: 0 0 18px; } .hero-label { font-size: 15px; font-weight: 600; opacity: .95; } .hero-money { display: contents; } .hero-amount-row { margin-top: 4px; display: flex; align-items: baseline; gap: 8px; } .hero-amount { font-family: var(--font-display); font-weight: 700; font-size: 60px; line-height: 1; } .hero-cents { font-size: 14px; opacity: .8; } .hero-stats { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 28rem; } .hero-stat { border-radius: 16px; background: rgba(255,255,255,.10); padding: 16px; backdrop-filter: blur(8px); } .hero-stat .hs-label { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .8; } .hero-stat .hs-label svg { height: 14px; width: 14px; } .hero-stat .hs-val { margin-top: 4px; font-family: var(--font-display); font-size: 24px; font-weight: 600; } /* ---------- Warning / heads-up card ---------- */ .warn-card { display: flex; flex-direction: column; justify-content: space-between; border-radius: 24px; padding: 24px; background: color-mix(in oklab, var(--warning) 25%, transparent); border: 1px solid color-mix(in oklab, var(--warning) 40%, transparent); } .warn-eyebrow { display: flex; align-items: center; gap: 8px; color: var(--warning-foreground); } .warn-eyebrow svg { height: 16px; width: 16px; } .warn-eyebrow p { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .warn-title { margin-top: 12px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--warning-foreground); } .warn-sub { margin-top: 4px; font-size: 14px; color: color-mix(in oklab, var(--warning-foreground) 80%, transparent); } .warn-btn { margin-top: 20px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--warning-foreground); color: var(--warning); padding: 8px 16px; font-size: 12px; font-weight: 500; } .warn-btn:hover { opacity: .9; } /* ---------- Progress tiles ---------- */ .tile { display: block; border-radius: 16px; background: var(--surface); padding: 16px; transition: transform .15s, background .15s, box-shadow .15s; } .tile.link:hover { transform: translateY(-2px); background: var(--primary-soft); box-shadow: 0 6px 16px rgba(0,0,0,.08); } .tile-top { display: flex; align-items: center; justify-content: space-between; } .tile-label { font-weight: 500; } .pct { font-size: 12px; font-weight: 600; color: var(--muted-foreground); } .pct.warn { color: var(--warning-foreground); } .bar { margin-top: 12px; height: 8px; overflow: hidden; border-radius: 999px; background: var(--border); } .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); } .bar > i.warn { background: var(--warning); } .tile-sub { margin-top: 8px; font-size: 12px; color: var(--muted-foreground); } .tile-name { font-weight: 500; } .saving-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; } .saving-amt { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .saving-amt .of { font-size: 14px; font-weight: 400; color: var(--muted-foreground); } .edit-controls { display: flex; align-items: center; gap: 12px; } /* ---------- Over-budget states ---------- */ .bar > i.over { background: var(--destructive); } .tile-over { background: color-mix(in oklab, var(--destructive) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--destructive) 30%, transparent); } .over-text { color: var(--destructive) !important; } .over-nudge { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); } .over-nudge-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; } .over-nudge-body { margin-top: 4px; font-size: 13px; color: var(--muted-foreground); line-height: 1.4; } .over-nudge-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 999px; } .warn-card.over { background: color-mix(in oklab, var(--destructive) 14%, transparent); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); } .warn-card.over .warn-eyebrow, .warn-card.over .warn-title { color: var(--destructive); } .warn-card.over .warn-sub { color: color-mix(in oklab, var(--destructive) 85%, transparent); } .warn-card.over .warn-btn { background: var(--destructive); color: #fff; } /* ---------- In / Out / Net summary (history) ---------- */ .io-summary { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .io-item { flex: 1; display: flex; flex-direction: column; gap: 2px; } .io-label { font-size: 12px; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .04em; } .io-val { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .io-val.pos { color: var(--success); } .io-val.neg { color: var(--destructive); } /* ---------- Recent list ---------- */ .list { margin-top: 16px; list-style: none; padding: 0; margin-bottom: 0; } .list.divide > li + li { border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); } .tx { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 16px; padding: 12px 8px; transition: transform .15s, background .15s; } .tx.hoverable:hover { transform: scale(1.02); background: var(--primary-soft); } .tx-left { display: flex; min-width: 0; flex: 1; align-items: center; gap: 12px; } .tx-ic { display: grid; height: 36px; width: 36px; flex-shrink: 0; place-items: center; border-radius: 999px; background: var(--primary-soft); color: var(--primary); } .tx-ic svg { height: 16px; width: 16px; } .tx-ic.big { height: 40px; width: 40px; } .tx-ic.uncat { background: color-mix(in oklab, var(--warning) 40%, transparent); color: var(--warning-foreground); } .tx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; } .tx-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted-foreground); } .tx-right { display: flex; flex-shrink: 0; align-items: center; gap: 8px; } .tx-amt { font-size: 14px; font-weight: 600; } .tx-amt.pos { color: var(--success); } .divide li { padding: 12px 0; list-style: none; } .divide .tx { padding: 0; border-radius: 0; } .divide .tx:hover { transform: none; background: transparent; } .badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 500; border: 0; } .badge.warn { background: color-mix(in oklab, var(--warning) 40%, transparent); color: var(--warning-foreground); } .badge.warn:hover { background: color-mix(in oklab, var(--warning) 60%, transparent); } .badge.soft { background: var(--primary-soft); color: var(--primary); } .badge.ok { background: color-mix(in oklab, var(--success, #16a34a) 18%, transparent); color: var(--success, #16a34a); } .badge svg { height: 12px; width: 12px; } .icon-edit { display: grid; height: 28px; width: 28px; place-items: center; border-radius: 999px; color: var(--muted-foreground); background: transparent; border: 0; } .icon-edit:hover { background: var(--background); color: var(--primary); } .icon-edit.ring { border: 1px solid var(--border); } .icon-edit.ring:hover { background: var(--primary-soft); } .icon-edit svg { height: 14px; width: 14px; } .small-edit { display: grid; height: 32px; width: 32px; place-items: center; border-radius: 999px; color: var(--muted-foreground); background: transparent; border: 0; } .small-edit:hover { background: var(--muted); color: var(--foreground); } .small-edit.danger:hover { background: color-mix(in oklab, var(--destructive, #dc2626) 14%, transparent); color: var(--destructive, #dc2626); } .small-edit svg { height: 14px; width: 14px; } /* ---------- Quick add ---------- */ .cat-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .cat-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; border-radius: 16px; background: var(--surface); padding: 12px; text-align: center; border: 0; color: inherit; transition: background .15s; } .cat-tile:hover { background: var(--primary-soft); } .cat-tile .ci { display: grid; height: 44px; width: 44px; place-items: center; border-radius: 999px; background: var(--primary-soft); color: var(--primary); } .cat-tile .ci svg { height: 20px; width: 20px; } .cat-tile .cl { font-size: 12px; font-weight: 500; } .cat-tile-add .ci { background: var(--surface); color: var(--muted-foreground); border: 1px dashed var(--border); } /* Color dot shown for user-created categories (which have no line icon). */ .cat-dot { display: inline-block; width: 16px; height: 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } .tx-ic .cat-dot { width: 18px; height: 18px; } /* ---------- Category editor / manager ---------- */ .overlay.stacked { z-index: 80; } /* sits above the add-transaction dialog */ .dialog.cat-editor, .dialog.cat-manage { max-width: 420px; } .input.input-error { border-color: var(--destructive); } .swatch-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } .cat-swatch { width: 30px; height: 30px; border-radius: 999px; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); padding: 0; transition: transform .1s; } .cat-swatch:hover { transform: scale(1.08); } .cat-swatch.active { border-color: var(--foreground); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--foreground); } .cat-swatch-lg { display: inline-block; width: 22px; height: 22px; border-radius: 999px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); } /* Keep the helper text clear of the color swatches above it */ .swatch-row + .field-hint { margin-top: 10px; } /* Icon picker in the category editor */ .icon-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .cat-icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1.5px solid var(--border, #e5e7eb); background: var(--card, #fff); color: var(--foreground, #111); padding: 0; transition: transform .1s, border-color .1s; } .cat-icon svg { width: 20px; height: 20px; } .cat-icon:hover { transform: scale(1.06); } .cat-icon.active { border-color: var(--foreground, #111); box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 3px var(--foreground, #111); } /* Colored category glyph in the manage-categories list */ .cmr-glyph { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex: 0 0 auto; } .cmr-glyph svg { width: 20px; height: 20px; } .cmr-glyph .cat-dot { width: 16px; height: 16px; } /* "See more" row at the bottom of the transaction list */ .see-more-row { list-style: none; display: flex; justify-content: center; padding: 12px 0 2px; } .see-more-btn { min-width: 160px; } /* Budget history dialog list */ .hist-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; } .hist-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px; border-radius: 12px; } .hist-row:hover { background: var(--surface); } .hist-main { min-width: 0; } .hist-range { font-size: 14px; font-weight: 600; margin: 0; } .hist-amt { font-size: 13px; color: var(--muted-foreground); margin: 2px 0 0; } .hist-amt .of { color: var(--muted-foreground); } /* Goals header actions */ .head-actions { display: flex; align-items: center; gap: 8px; } /* Unified Archive dialog */ .dialog-wide { max-width: 560px; } .arch-body { max-height: 60vh; overflow-y: auto; } .arch-head { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); margin: 18px 0 8px; } .arch-head:first-child { margin-top: 4px; } .arch-group { margin-bottom: 14px; } .arch-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .arch-group-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; } .tile-archived { opacity: 0.78; } .tile-archived .tile-name { display: flex; align-items: center; gap: 8px; } .cat-manage-list { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; } .cat-manage-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 12px; } .cat-manage-row:hover { background: var(--surface); } .cmr-name { flex: 1 1 auto; font-size: 14px; font-weight: 500; min-width: 0; } .cmr-lock { font-size: 11px; font-weight: 500; color: var(--muted-foreground); } .cmr-actions { display: flex; gap: 2px; flex: 0 0 auto; } /* Pencil chip that opens the category manager on the History filters row. */ .chip.chip-acct { display: inline-flex; align-items: center; gap: 6px; } .chip.chip-acct .cat-dot { width: 10px; height: 10px; } .acct-tag { display: inline-flex; align-items: center; gap: 4px; } .acct-tag .cat-dot { width: 9px; height: 9px; } .chip.chip-edit { display: inline-flex; align-items: center; padding: 6px 10px; color: var(--muted-foreground); } .chip.chip-edit svg { height: 14px; width: 14px; } .chip.chip-edit:hover { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 30%, transparent); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: 0; font-weight: 600; font-size: 14px; padding: 10px 16px; transition: opacity .15s, background .15s; color: inherit; } .btn svg { height: 16px; width: 16px; } .btn-primary { background: var(--primary); color: var(--primary-foreground); } .btn-primary:hover { opacity: .9; } .btn-primary:disabled { opacity: .5; cursor: not-allowed; } .btn-block { width: 100%; } .btn-outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); font-weight: 500; } .btn-outline:hover { background: var(--muted); } .btn-lg { padding: 12px 16px; } .link-inline { font-size: 12px; font-weight: 500; color: var(--primary); background: transparent; border: 0; } .link-inline:hover { text-decoration: underline; } .history-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); } .history-link:hover { color: var(--primary); } .history-link svg { height: 12px; width: 12px; } /* ---------- Period toggle / filters ---------- */ .seg { display: inline-flex; gap: 4px; border-radius: 999px; background: var(--surface); padding: 4px; } .seg button { border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--muted-foreground); transition: background .15s, color .15s; } .seg button:hover { color: var(--foreground); } .seg button.active { background: var(--primary); color: var(--primary-foreground); } /* On phones the Day/Week/Month/Year control can't fit beside the title, so let the card header wrap and give the control its own full row. */ @media (max-width: 560px) { .hist-head { flex-wrap: wrap; } .hist-head .seg { width: 100%; justify-content: space-between; } .hist-head .seg button { flex: 1; padding: 6px 8px; text-align: center; } } /* Let the History card header wrap: when the title and the Day/Week/Month/Year control can't share a line (narrow card in the 3-col grid, or a small screen), the control drops to its own line instead of overflowing. Driven by real available width via flexbox — deliberately NOT a container query, because container-type gives the card an intrinsic min-width that defeats the `.grid > * { min-width: 0 }` rule above and blows out the 3-column row. */ .hist-head { flex-wrap: wrap; } .hist-head > div:first-child { min-width: 0; } /* Keep the control at its natural size and let it push right on a shared line; when it can't fit it wraps whole (never stretched or squished) on desktop. */ .hist-head .seg { flex: 0 0 auto; margin-left: auto; } /* Home mini-history: always stack the period toggle directly under the "This week" heading, left-aligned, so it never floats off to the side. */ .hist-card .hist-head { flex-direction: column; align-items: flex-start; gap: 12px; } .hist-card .hist-head .seg { margin-left: 0; } .chip { border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); } .chip:hover { color: var(--foreground); } .chip.active { background: var(--primary-soft); color: var(--primary); border-color: color-mix(in oklab, var(--primary) 30%, transparent); } .pill-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; background: var(--card); padding: 6px 12px; font-size: 12px; font-weight: 500; border: 1px solid var(--border); color: inherit; } .pill-btn:hover { background: var(--surface); } .pill-btn svg { height: 14px; width: 14px; } .filters { display: flex; flex-wrap: wrap; gap: 8px; } .controls { margin-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* ---------- Chart ---------- */ .chart { width: 100%; height: 240px; } .chart.short { height: 224px; } .chart svg { width: 100%; height: 100%; overflow: visible; } .chart .grid-line { stroke: var(--border); stroke-dasharray: 3 3; } .chart .axis-label { fill: var(--muted-foreground); font-size: 11px; font-family: var(--font-sans); } .chart .line { fill: none; stroke: var(--primary); stroke-width: 2; } .chart-head { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .chart-nav { display: flex; align-items: center; gap: 8px; } .round-btn { display: grid; height: 32px; width: 32px; place-items: center; border-radius: 999px; color: var(--muted-foreground); border: 1px solid var(--border); background: transparent; } .round-btn:hover { background: var(--surface); color: var(--foreground); } .round-btn:disabled { opacity: .4; cursor: not-allowed; } .round-btn svg { height: 16px; width: 16px; } .chart-heading { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.1; } .chart-range { font-size: 12px; color: var(--muted-foreground); } /* ---------- Coach chat ---------- */ .coach-welcome { /* Soft purple (not the teal --primary and not a yellow warning) so the banner reads as calm/informational — matches the portfolio testing finding. */ margin-bottom: 20px; border-radius: 24px; padding: 20px; background: #F3F0FA; border: 1px solid #9B8EC4; } /* Dark mode: keep the calming purple but darken the fill so text stays readable. */ html.dark .coach-welcome { background: oklch(0.27 0.045 300); border-color: #9B8EC4; } .coach-welcome .cw-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; } /* Weekly tip card on the home page — same calming purple as Welcome to Coach, deliberately not a warning color. */ /* Full-width tip: icon on the left, title and body stacked beside it. */ .tip-card { margin-top: 20px; border-radius: 24px; padding: 20px; display: flex; gap: 14px; align-items: flex-start; background: #F3F0FA; border: 1px solid #9B8EC4; } html.dark .tip-card { background: oklch(0.27 0.045 300); border-color: #9B8EC4; } .tip-card .tip-ic { flex-shrink: 0; display: grid; place-items: center; height: 40px; width: 40px; border-radius: 999px; background: var(--card); color: oklch(0.5 0.14 300); } html.dark .tip-card .tip-ic { color: oklch(0.74 0.12 300); } .tip-card .tip-ic svg { width: 20px; height: 20px; } .tip-card .tip-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .tip-card .tip-body { margin-top: 2px; font-size: 14px; line-height: 1.6; color: color-mix(in oklab, var(--foreground) 82%, transparent); } /* Home: full-width balance hero, then the heads-up warning (when relevant) and the weekly tip stacked full-width beneath it — the tip reads as a slim secondary banner rather than competing with the balance. */ .hero-row { display: grid; gap: 20px; grid-template-columns: 1fr; } .hero-row > * { min-width: 0; } .home-right { display: flex; flex-direction: column; gap: 20px; } .home-right .tip-card { margin-top: 0; } .coach-welcome .cw-body { margin-top: 4px; font-size: 14px; line-height: 1.6; color: color-mix(in oklab, var(--foreground) 80%, transparent); } .chat-card { display: flex; flex-direction: column; height: 60vh; border-radius: 24px; background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent); } .chat-scroll { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; } .msg-row { display: flex; } .msg-row.you { justify-content: flex-end; } .msg-row.coach { justify-content: flex-start; } .bubble { max-width: 80%; border-radius: 16px; padding: 10px 16px; font-size: 14px; line-height: 1.6; } .bubble.you { background: var(--primary); color: var(--primary-foreground); } .bubble.coach { background: var(--surface); color: var(--foreground); } .chat-form { display: flex; align-items: center; gap: 8px; border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent); padding: 12px; } .chat-form input { flex: 1; border-radius: 999px; background: var(--surface); padding: 10px 16px; font-size: 14px; border: 1px solid transparent; outline: none; color: inherit; font-family: inherit; } .chat-form input:focus { border-color: color-mix(in oklab, var(--primary) 40%, transparent); } .send-btn { display: grid; height: 40px; width: 40px; place-items: center; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); border: 0; } .send-btn:hover { opacity: .9; } .send-btn svg { height: 16px; width: 16px; } /* ---------- Journal ---------- */ .journal-head-ic { display: grid; height: 40px; width: 40px; place-items: center; border-radius: 16px; background: var(--primary); color: var(--primary-foreground); } .journal-head-ic svg { height: 20px; width: 20px; } .field-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; } textarea.journal-area { width: 100%; resize: vertical; border-radius: 16px; background: var(--surface); padding: 16px; font-size: 14px; font-family: inherit; border: 1px solid transparent; outline: none; color: inherit; } textarea.journal-area:focus { border-color: color-mix(in oklab, var(--primary) 40%, transparent); } .entry { border-radius: 16px; background: var(--card); padding: 20px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent); } .entry-top { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .entry-date { font-size: 12px; color: var(--muted-foreground); } .entry-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; } .empty { border-radius: 16px; background: var(--surface); padding: 24px; font-size: 14px; color: var(--muted-foreground); } /* ---------- Inputs / fields ---------- */ .field { display: block; font-size: 14px; } .field > .lbl { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); } .input { width: 100%; border-radius: 12px; background: var(--surface); padding: 10px 14px; font-size: 14px; outline: none; color: inherit; border: 1px solid var(--border); font-family: inherit; } .input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent); } /* iOS Safari gives date/time inputs an intrinsic width that ignores width:100%, so the field bulges past the dialog edge. Force it to size like every other field. Scoped to date/time so the Category/Account