/* * Lupa — redesigned brand stylesheet. * * Design intent: warm modern, friendly-precise. A bank that feels like a * person who is good with numbers — not a bank that feels like a bank. * * Tokens follow the structure of the original lupa.css so the existing * server-rendered components (page.rs, account_card.rs, chat_pane.rs, etc.) * can adopt this with minimal churn. New tokens are added; nothing the old * sheet exposed has been renamed. * * Card-style variants (data-card-style="bordered|shadowed|flat") tune * the elevation language. */ :root { /* ── Type ────────────────────────────────────────────────── */ --font-display: 'Instrument Serif', 'Iowan Old Style', 'Georgia', serif; --font-body: 'Inter', 'Helvetica Neue', system-ui, -apple-system, sans-serif; --font-numeric: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace; /* Type scale — tighter at the top so a bank feels calm, not loud. */ --type-display-size: 2.75rem; --type-display-line: 1.05; --type-heading-size: 1.125rem; --type-heading-line: 1.35; --type-body-size: 0.9375rem; --type-body-line: 1.55; --type-caption-size: 0.8125rem; --type-caption-line: 1.45; --type-balance-size: 1.625rem; /* ── Spacing ─────────────────────────────────────────────── */ --space-tight: 0.25rem; --space-compact: 0.5rem; --space-snug: 0.75rem; --space-default: 1rem; --space-loose: 1.5rem; --space-section: 2.5rem; --space-page: 3.5rem; /* ── Radii ───────────────────────────────────────────────── */ --radius-control: 0.625rem; --radius-card: 1rem; --radius-pill: 999px; /* ── Motion ──────────────────────────────────────────────── */ --motion-instant: 80ms; --motion-quick: 180ms; --motion-considered: 360ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); } /* ──────────────────────────────────────────────────────────────── * Theme: warm cream (default — the "house" palette) * Refined version of the existing palette: same temperature, more * paper-feel, navy slightly desaturated to feel inked rather than * corporate. * ──────────────────────────────────────────────────────────────── */ :root, .theme-cream { --surface-page: oklch(0.972 0.012 84); /* warm cream */ --surface-elevated: oklch(0.992 0.005 84); /* paper white */ --surface-sunken: oklch(0.952 0.014 82); /* card-on-card */ --surface-tint: oklch(0.94 0.018 80); /* hover, subtle */ --text-primary: oklch(0.245 0.018 250); /* warm ink */ --text-secondary: oklch(0.50 0.014 250); --text-muted: oklch(0.65 0.012 250); --text-on-accent: oklch(0.985 0.005 84); --accent: oklch(0.42 0.10 255); /* dusk navy */ --accent-hover: oklch(0.36 0.10 255); --accent-soft: oklch(0.94 0.025 255); /* tint */ --accent-foreground: oklch(0.985 0.005 84); --positive: oklch(0.50 0.10 158); /* moss */ --negative: oklch(0.52 0.13 28); /* terracotta */ --warning: oklch(0.65 0.12 75); --border-subtle: oklch(0.90 0.014 80); --border-strong: oklch(0.82 0.016 80); --shadow-card: 0 1px 0 oklch(0.90 0.012 80 / 0.6), 0 12px 24px -18px oklch(0.30 0.05 80 / 0.25); --shadow-pop: 0 1px 0 oklch(0.90 0.012 80 / 0.6), 0 22px 40px -22px oklch(0.30 0.05 80 / 0.32); } /* ──────────────────────────────────────────────────────────────── * Theme: dark (V14.3) * * Triggered when `` — set either by the * theme-resolver middleware (when the user picked Dark explicitly via * the topnav toggle and that choice is stored in the `lupa_theme` * cookie) OR by the prefers-color-scheme IIFE in `layouts/page.html` * (when the user picked System or has no cookie and their OS prefers * dark). Same token names as `.theme-cream`; values inverted to dark * surfaces + light text, with the accent ramp brightened so it stays * legible against the dark background. * * `@media (prefers-color-scheme: dark)` covers the corner case of a * very-early request whose IIFE hasn't yet flipped the data-theme * attribute (the inline IIFE runs synchronously in so this * shouldn't actually fire in practice — it's a defensive fallback so * users with NO cookie at all still get dark mode without a FOUC if * the script ever fails to execute). The `[data-theme="dark"]` * selector takes precedence when present. * ──────────────────────────────────────────────────────────────── */ :root[data-theme="dark"], :root[data-theme="dark"] .theme-cream, .theme-dark { --surface-page: oklch(0.18 0.014 250); /* deep ink */ --surface-elevated: oklch(0.22 0.012 250); /* card */ --surface-sunken: oklch(0.15 0.014 250); /* page-on-page recess */ --surface-tint: oklch(0.26 0.014 250); /* hover, subtle */ --text-primary: oklch(0.94 0.008 84); /* warm cream */ --text-secondary: oklch(0.72 0.012 250); --text-muted: oklch(0.55 0.014 250); --text-on-accent: oklch(0.985 0.005 84); --accent: oklch(0.68 0.13 255); /* lifted dusk navy */ --accent-hover: oklch(0.74 0.13 255); --accent-soft: oklch(0.30 0.07 255); /* tint */ --accent-foreground: oklch(0.18 0.014 250); --positive: oklch(0.65 0.13 158); /* moss, lifted */ --negative: oklch(0.68 0.16 28); /* terracotta, lifted */ --warning: oklch(0.78 0.14 75); --border-subtle: oklch(0.30 0.014 250); --border-strong: oklch(0.42 0.014 250); --shadow-card: 0 1px 0 oklch(0.10 0.012 250 / 0.6), 0 12px 24px -18px oklch(0.04 0.05 80 / 0.50); --shadow-pop: 0 1px 0 oklch(0.10 0.012 250 / 0.6), 0 22px 40px -22px oklch(0.04 0.05 80 / 0.60); } /* Defensive @media fallback for browsers that haven't yet processed * the inline IIFE that sets `data-theme="dark"`. Lower specificity * than `[data-theme="dark"]` above by intent — this catches the * "no cookie, no script-run" edge but defers to whatever * data-theme the IIFE / cookie ultimately produces. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme]) { --surface-page: oklch(0.18 0.014 250); --surface-elevated: oklch(0.22 0.012 250); --surface-sunken: oklch(0.15 0.014 250); --surface-tint: oklch(0.26 0.014 250); --text-primary: oklch(0.94 0.008 84); --text-secondary: oklch(0.72 0.012 250); --text-muted: oklch(0.55 0.014 250); --text-on-accent: oklch(0.985 0.005 84); --accent: oklch(0.68 0.13 255); --accent-hover: oklch(0.74 0.13 255); --accent-soft: oklch(0.30 0.07 255); --accent-foreground: oklch(0.18 0.014 250); --positive: oklch(0.65 0.13 158); --negative: oklch(0.68 0.16 28); --warning: oklch(0.78 0.14 75); --border-subtle: oklch(0.30 0.014 250); --border-strong: oklch(0.42 0.014 250); --shadow-card: 0 1px 0 oklch(0.10 0.012 250 / 0.6), 0 12px 24px -18px oklch(0.04 0.05 80 / 0.50); --shadow-pop: 0 1px 0 oklch(0.10 0.012 250 / 0.6), 0 22px 40px -22px oklch(0.04 0.05 80 / 0.60); } } /* ──────────────────────────────────────────────────────────────── * Base * ──────────────────────────────────────────────────────────────── */ /* V15: paint the html/body backgrounds with the page surface so a * short page doesn't leave the browser's default white showing below * the .lupa-screen container. Pre-V15 only `.lupa-screen` carried the * background and dark mode looked half-done — the dashboard's content * went dark but the viewport's bottom strip stayed white. Painting * the body too keeps the dark canvas continuous to the viewport * edges. The reset also zeroes default body margin so the screen * content reaches the topnav cleanly. */ html, body { background-color: var(--surface-page); color: var(--text-primary); margin: 0; min-height: 100vh; } .lupa-screen { background: var(--surface-page); color: var(--text-primary); font-family: var(--font-body); font-size: var(--type-body-size); line-height: var(--type-body-line); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; min-height: 100%; padding: var(--space-loose) var(--space-page) var(--space-page); container-type: inline-size; } .lupa-main { display: flex; flex-direction: column; gap: var(--space-section); } .mono-numeric { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'zero' 1; letter-spacing: -0.01em; } .text-secondary { color: var(--text-secondary); } .text-muted { color: var(--text-muted); } /* ──────────────────────────────────────────────────────────────── * Page chrome — wordmark + nav * ──────────────────────────────────────────────────────────────── */ .lupa-page-header { margin-bottom: var(--space-section); } .lupa-page-nav { display: flex; align-items: center; gap: var(--space-loose); } .lupa-wordmark { display: inline-flex; align-items: baseline; gap: 0.4rem; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--text-primary); letter-spacing: -0.01em; } .lupa-wordmark__mark { font-family: var(--font-body); font-size: 1.05rem; color: var(--accent); transform: translateY(-1px); } .lupa-wordmark__text { font-style: italic; } .lupa-page-nav__links { display: flex; gap: var(--space-default); margin-left: var(--space-loose); } .lupa-nav-link { color: var(--text-secondary); text-decoration: none; font-size: var(--type-body-size); padding: var(--space-tight) var(--space-compact); border-radius: var(--radius-pill); transition: color var(--motion-quick), background var(--motion-quick); } .lupa-nav-link:hover { color: var(--text-primary); } .lupa-nav-link--active { color: var(--text-primary); background: var(--surface-tint); } .lupa-page-nav__pull-right { margin-left: auto; } .lupa-session-chip { display: inline-flex; align-items: center; gap: var(--space-compact); padding: var(--space-tight) var(--space-snug); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-elevated); font-size: var(--type-caption-size); color: var(--text-secondary); } .lupa-session-chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); } /* ──────────────────────────────────────────────────────────────── * Greeting — sets the tone for the whole product. * Serif + warm copy = "your friend who's good with money." * ──────────────────────────────────────────────────────────────── */ .lupa-greeting { display: flex; flex-direction: column; gap: var(--space-tight); max-width: 42rem; } .lupa-greeting__title { font-family: var(--font-display); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: 400; letter-spacing: -0.015em; margin: 0; color: var(--text-primary); text-wrap: balance; } .lupa-greeting__title em { font-style: italic; color: var(--accent); } .lupa-greeting__sub { margin: 0; color: var(--text-secondary); font-size: var(--type-body-size); text-wrap: pretty; } /* ──────────────────────────────────────────────────────────────── * Summary strip — at-a-glance numbers above the fold * ──────────────────────────────────────────────────────────────── */ .lupa-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr) auto) 1fr; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0; padding: var(--space-loose) var(--space-loose); background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); } .lupa-summary__cell { display: flex; flex-direction: column; gap: var(--space-tight); padding: 0 var(--space-loose); } .lupa-summary__cell:first-child { padding-left: 0; } .lupa-summary__cell:last-child { padding-right: 0; } .lupa-summary__divider { width: 1px; background: var(--border-subtle); margin: 0; } .lupa-summary__label { font-size: var(--type-caption-size); color: var(--text-secondary); } .lupa-summary__value { font-size: var(--type-balance-size); font-weight: 500; color: var(--text-primary); letter-spacing: -0.015em; } .lupa-summary__value--up { color: var(--positive); } .lupa-summary__value--down { color: var(--negative); } .lupa-summary__unit { font-family: var(--font-body); font-size: var(--type-caption-size); color: var(--text-secondary); font-weight: 400; letter-spacing: 0; margin-left: 0.15em; } .lupa-summary__sub { font-family: var(--font-body); font-size: var(--type-caption-size); color: var(--text-secondary); font-weight: 400; letter-spacing: 0; margin-left: 0.15em; } /* ──────────────────────────────────────────────────────────────── * Two-column layout — accounts + chat (co-equal) * The chat column is wider than the original sidebar so it reads as * a workspace, not a widget. Sticky so it stays put as the account * list scrolls. * ──────────────────────────────────────────────────────────────── */ .lupa-grid-2col { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-loose); align-items: start; } @container (max-width: 1100px) { .lupa-grid-2col { grid-template-columns: 1fr; } } .lupa-aside { position: sticky; top: var(--space-loose); } .lupa-stack { display: flex; flex-direction: column; gap: var(--space-default); } .lupa-section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-compact); } .lupa-section-title { margin: 0; font-family: var(--font-body); font-size: var(--type-heading-size); font-weight: 600; letter-spacing: -0.005em; } .lupa-section-link { font-size: var(--type-caption-size); color: var(--accent); text-decoration: none; } .lupa-section-link:hover { color: var(--accent-hover); } /* ──────────────────────────────────────────────────────────────── * Card material — the visual elevation language. Three modes, * driven by data-card-style on .lupa-screen so the user can compare. * ──────────────────────────────────────────────────────────────── */ .lupa-card { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-loose); color: var(--text-primary); text-decoration: none; display: block; transition: transform var(--motion-quick) var(--ease-out), box-shadow var(--motion-quick) var(--ease-out), border-color var(--motion-quick); } .lupa-screen[data-card-style="bordered"] .lupa-card { box-shadow: none; border-color: var(--border-subtle); } .lupa-screen[data-card-style="shadowed"] .lupa-card { border-color: transparent; box-shadow: var(--shadow-card); } .lupa-screen[data-card-style="flat"] .lupa-card { background: var(--surface-sunken); border-color: transparent; box-shadow: none; } .lupa-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .lupa-screen[data-card-style="shadowed"] .lupa-card:hover { border-color: transparent; box-shadow: var(--shadow-pop); } /* ──────────────────────────────────────────────────────────────── * Account card * ──────────────────────────────────────────────────────────────── */ .lupa-account-list { display: flex; flex-direction: column; gap: var(--space-default); } .lupa-account-card { display: flex; flex-direction: column; gap: var(--space-snug); } .lupa-account-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-default); } .lupa-account-card__title { display: flex; flex-direction: column; gap: 2px; } .lupa-account-card__name { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; color: var(--text-primary); } .lupa-account-card__kind { font-size: var(--type-caption-size); color: var(--text-secondary); } .lupa-account-card__money { display: flex; align-items: baseline; gap: 0.35rem; } .lupa-account-card__balance { font-size: var(--type-balance-size); font-weight: 500; color: var(--text-primary); } .lupa-account-card__currency { font-size: var(--type-caption-size); color: var(--text-secondary); font-family: var(--font-body); } .lupa-account-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-default); color: var(--text-secondary); font-size: var(--type-caption-size); } .lupa-account-card__number { color: var(--text-muted); } .lupa-account-card__delta--up { color: var(--positive); } .lupa-account-card__delta--down { color: var(--negative); } /* Goal progress bar — used by the Cottage account */ .lupa-progress { height: 4px; background: var(--surface-tint); border-radius: var(--radius-pill); overflow: hidden; } .lupa-progress__fill { height: 100%; background: var(--accent); border-radius: inherit; } /* ──────────────────────────────────────────────────────────────── * Chat pane — designed to feel like a workspace, not a chatbot. * No bubble-shouting; agent text is editorial-weight, user text is * a quiet capsule, tool results are tabular. * ──────────────────────────────────────────────────────────────── */ .lupa-chat-pane { display: flex; flex-direction: column; gap: var(--space-default); height: calc(100vh - 12rem); min-height: 36rem; max-height: 48rem; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-default) var(--space-default) var(--space-snug); } .lupa-screen[data-card-style="shadowed"] .lupa-chat-pane { border-color: transparent; box-shadow: var(--shadow-card); } .lupa-screen[data-card-style="flat"] .lupa-chat-pane { background: var(--surface-sunken); border-color: transparent; } .lupa-chat-pane__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-default); padding: var(--space-tight) var(--space-compact) var(--space-default); border-bottom: 1px solid var(--border-subtle); } .lupa-chat-pane__title { display: flex; align-items: center; gap: var(--space-snug); } .lupa-chat-pane__avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.05rem; } .lupa-chat-pane__heads { display: flex; flex-direction: column; gap: 1px; } .lupa-chat-pane__name { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.1; font-style: italic; color: var(--text-primary); } .lupa-chat-pane__status { font-size: var(--type-caption-size); color: var(--text-secondary); display: inline-flex; align-items: center; gap: 0.4rem; } .lupa-chat-pane__status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); } .lupa-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 0; background: transparent; color: var(--text-secondary); font-size: 1rem; border-radius: var(--radius-pill); cursor: pointer; } .lupa-iconbtn:hover { background: var(--surface-tint); color: var(--text-primary); } .lupa-chat-thread { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-snug); padding: var(--space-default) var(--space-compact); min-height: 0; } .lupa-chat-daymark { align-self: center; font-size: var(--type-caption-size); color: var(--text-muted); padding: 2px var(--space-snug); margin: var(--space-tight) 0 var(--space-compact); } .lupa-chat-message { max-width: 85%; padding: var(--space-snug) var(--space-default); border-radius: var(--radius-card); font-size: var(--type-body-size); line-height: 1.5; position: relative; } .lupa-chat-message__body { display: block; } .lupa-chat-message__ts { display: block; font-size: 0.7rem; color: var(--text-muted); margin-top: 4px; letter-spacing: 0; } .lupa-chat-message--user { align-self: flex-end; background: var(--accent-soft); color: var(--text-primary); border-top-right-radius: var(--space-tight); } .lupa-chat-message--agent { align-self: flex-start; background: transparent; padding-left: var(--space-compact); padding-right: var(--space-compact); border-radius: 0; /* No bubble — agent speaks like a person, not a box. */ } .lupa-chat-message--tool { align-self: flex-start; background: var(--surface-tint); color: var(--text-secondary); font-family: var(--font-numeric); font-size: 0.8125rem; border-radius: var(--radius-control); border-top-left-radius: var(--space-tight); } /* ──────────────────────────────────────────────────────────────── * Confirmation card — the moment the agent asks for a nod. * ──────────────────────────────────────────────────────────────── */ .lupa-confirmation-card { align-self: stretch; background: var(--surface-page); border: 1px solid var(--border-strong); border-radius: var(--radius-card); padding: var(--space-default) var(--space-default) var(--space-snug); display: flex; flex-direction: column; gap: var(--space-snug); margin-top: var(--space-compact); } .lupa-confirmation-card__header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-default); padding-bottom: var(--space-snug); border-bottom: 1px dashed var(--border-subtle); } .lupa-confirmation-card__eyebrow { font-size: var(--type-caption-size); color: var(--text-secondary); font-style: italic; font-family: var(--font-display); font-size: 1rem; } .lupa-confirmation-card__amount { font-size: 1.5rem; font-weight: 500; color: var(--text-primary); letter-spacing: -0.01em; } .lupa-confirmation-card__currency { font-family: var(--font-body); font-size: var(--type-caption-size); color: var(--text-secondary); font-weight: 400; margin-left: 0.15em; letter-spacing: 0; } .lupa-confirmation-card__rows { margin: 0; display: flex; flex-direction: column; gap: var(--space-tight); } .lupa-confirmation-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-default); font-size: var(--type-caption-size); } .lupa-confirmation-card__row dt { color: var(--text-secondary); margin: 0; } .lupa-confirmation-card__row dd { color: var(--text-primary); margin: 0; text-align: right; } .lupa-confirmation-card__actions { display: flex; gap: var(--space-compact); margin-top: var(--space-tight); } .lupa-confirmation-card__actions .lupa-button { flex: 1 1 auto; } /* ──────────────────────────────────────────────────────────────── * Suggestions row + input * ──────────────────────────────────────────────────────────────── */ .lupa-chat-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-tight); padding: var(--space-tight) var(--space-compact); } .lupa-suggestion { border: 1px solid var(--border-subtle); background: var(--surface-page); color: var(--text-secondary); font-family: inherit; font-size: var(--type-caption-size); padding: 0.35rem var(--space-snug); border-radius: var(--radius-pill); cursor: pointer; transition: color var(--motion-quick), border-color var(--motion-quick), background var(--motion-quick); } .lupa-suggestion:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface-tint); } .lupa-chat-input { display: flex; gap: var(--space-compact); padding: var(--space-compact) var(--space-compact) 0; border-top: 1px solid var(--border-subtle); } .lupa-chat-input__field { flex: 1 1 auto; resize: none; min-height: 2.5rem; border: 0; background: transparent; padding: 0.6rem 0.75rem; font: inherit; color: var(--text-primary); outline: none; } .lupa-chat-input__field::placeholder { color: var(--text-muted); } .lupa-chat-input__send { align-self: flex-end; } /* ──────────────────────────────────────────────────────────────── * Buttons * ──────────────────────────────────────────────────────────────── */ .lupa-button { border-radius: var(--radius-control); border: 1px solid transparent; padding: 0.55rem 0.95rem; font-family: inherit; font-size: var(--type-body-size); font-weight: 500; cursor: pointer; transition: background var(--motion-quick), border-color var(--motion-quick), color var(--motion-quick), transform var(--motion-instant); line-height: 1.2; } .lupa-button:active { transform: translateY(1px); } .lupa-button--primary { background: var(--accent); color: var(--accent-foreground); } .lupa-button--primary:hover { background: var(--accent-hover); } .lupa-button--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .lupa-button--secondary:hover { background: var(--surface-tint); } /* ──────────────────────────────────────────────────────────────── * Login hero (V13) * * The pre-auth surface. Per LoginScreen.md: a single centered hero * column over a quiet duotone background, with the value statement in * display type as the only loud element. Pre-V13 the template * referenced these classes but had no CSS rules — the section * collapsed to default block flow, dragging the hero to the top-left * and pushing the spec drawer aside (which also lacked rules) inline * underneath. * * The hero centers in the viewport via the existing `.lupa-screen` * container, with an absolutely-positioned `__bg` layer painting the * radial-gradient tint behind the centered `__inner` column. Mobile * scales the statement down per the spec (1.85rem ≈ 30px), desktop * uses the full --type-display-size (2.75rem ≈ 44px). * ──────────────────────────────────────────────────────────────── */ .lupa-login-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 14rem); /* leaves room for top-nav + footer */ padding: var(--space-section) var(--space-default); overflow: hidden; border-radius: var(--radius-card); } .lupa-login-hero__bg { position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 35%, var(--accent-soft) 0%, transparent 65%), linear-gradient(180deg, var(--surface-page) 0%, var(--surface-sunken) 100%); pointer-events: none; z-index: 0; } .lupa-login-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-loose); max-width: 32rem; width: 100%; background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); padding: var(--space-section); box-shadow: var(--shadow-card); } .lupa-login-hero__wordmark { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--text-primary); letter-spacing: -0.01em; } .lupa-login-hero__statement { font-family: var(--font-display); font-size: 1.85rem; line-height: 1.08; color: var(--text-primary); margin: 0; letter-spacing: -0.02em; } @container (min-width: 600px) { .lupa-login-hero__statement { font-size: var(--type-display-size); } } .lupa-login-hero__lede { color: var(--text-secondary); line-height: var(--type-body-line); margin: 0; max-width: 30rem; } .lupa-sandbox-badge { /* Pre-tinted warning fill to stay compatible with browsers that don't yet support the `oklch(from var(--warning) ...)` relative colour syntax. The values are derived from --warning's (oklch 0.65 0.12 75) by stepping the lightness toward paper and dropping chroma — same hue, calmer surface. */ display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; font-size: var(--type-caption-size); text-transform: uppercase; letter-spacing: 0.08em; background: oklch(0.93 0.06 75); color: oklch(0.45 0.12 75); border: 1px solid oklch(0.85 0.09 75); border-radius: var(--radius-pill); font-weight: 600; } .lupa-login-cta { /* Slightly larger padding + body-size label per the LoginScreen spec — distinguishes the primary entry-action from inline form buttons elsewhere. */ padding: 0.75rem 1.25rem; font-size: var(--type-body-size); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-compact); } /* ──────────────────────────────────────────────────────────────── * Spec drawer (V13) * * Off-canvas panel that opens from the right edge of the viewport. * Hidden by default (translateX off-screen + visibility:hidden). The * page-layout JS toggles `body.lupa-spec-drawer-open` and the * drawer's `aria-hidden` attribute; CSS does the visual reveal. * * Pre-V13 the drawer had no rules at all so it sat in normal block * flow underneath the page content as a stripe of unstyled text — a * "Specification ✕ / Open the drawer to see the spec for this surface." * panel that looked like a broken error region. The aria-hidden * attribute was correct; only the visual hiding was missing. * ──────────────────────────────────────────────────────────────── */ .lupa-spec-drawer { position: fixed; top: 0; right: 0; /* V13.5 second pass: use explicit height instead of top+bottom * positioning. With `top: 0; bottom: 0;` the height is implicit * and Safari + some Chrome versions size the drawer's flex children * relative to its `auto` height (= content height) rather than the * computed 100vh, which silently breaks the flex-1+overflow-y * scroll inside `.lupa-spec-drawer-body`. `height: 100dvh` (with * `100vh` fallback) makes the drawer's box explicitly viewport- * tall so the body's `flex: 1; overflow-y: auto;` operates against * a real, constrained parent height. `dvh` is the dynamic viewport * unit that excludes browser chrome (mobile Safari toolbar) so the * drawer doesn't get clipped behind it. */ height: 100vh; height: 100dvh; width: min(36rem, 100vw); background: var(--surface-elevated); border-left: 1px solid var(--border-subtle); box-shadow: var(--shadow-pop); transform: translateX(100%); transition: transform var(--motion-considered) var(--ease-out), visibility 0s linear var(--motion-considered); visibility: hidden; z-index: 50; display: flex; flex-direction: column; overflow: hidden; } body.lupa-spec-drawer-open .lupa-spec-drawer { transform: translateX(0); transition: transform var(--motion-considered) var(--ease-out), visibility 0s linear 0s; visibility: visible; } .lupa-spec-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-loose); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .lupa-spec-drawer-title { margin: 0; font-family: var(--font-body); font-size: var(--type-heading-size); font-weight: 600; color: var(--text-primary); } .lupa-spec-drawer-close { background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); width: 2rem; height: 2rem; cursor: pointer; color: var(--text-secondary); font-size: 1.25rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background var(--motion-quick), border-color var(--motion-quick), color var(--motion-quick); } .lupa-spec-drawer-close:hover { background: var(--surface-tint); border-color: var(--border-strong); color: var(--text-primary); } .lupa-spec-drawer-body { /* V13.5 second pass: explicit `flex: 1 1 0` so the basis is zero * (Safari + Firefox both interpret unqualified `flex: 1` as * `1 1 0%` here, but Chrome on some channels has computed it as * `1 1 auto` historically; spelling out the basis defends against * that). `min-height: 0` is still required to override the * implicit `min-content` floor on flex children. The combination * makes the body genuinely scroll-on-hover; pre-V13.5 the user * had to click inside the body to focus it before the wheel * would direct events to it. * * The body itself is NOT a flex container — when it was, the * nested-flex behaviour interfered with the parent flex's * scroll containment in ways that varied by browser. Children * (breadcrumb, tabs, content article, rail aside) flow as plain * blocks; spacing comes from per-child margins below. */ flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-loose); color: var(--text-primary); } /* Replace the dropped flex `gap` with margins between siblings. */ .lupa-spec-drawer-body > * + * { margin-top: var(--space-default); } .lupa-spec-drawer-body p { margin: 0 0 var(--space-default); } .lupa-spec-drawer-body p:last-child { margin-bottom: 0; } /* V13.5: drawer's inner elements — rendered after a /spec?path=… * fetch swaps the body. Pre-V13.5 these had no styling so the * breadcrumb, tab nav, content article, and "Composes / Used by" * rail rendered as default underlined links + bare block elements, * making it unclear which surfaces are navigable. */ .lupa-spec-drawer-breadcrumb { display: flex; align-items: center; gap: var(--space-tight); flex-wrap: wrap; flex-shrink: 0; } .lupa-spec-drawer-breadcrumb a { color: var(--text-secondary); text-decoration: none; font-weight: 500; transition: color var(--motion-quick); } .lupa-spec-drawer-breadcrumb a:hover { color: var(--accent); text-decoration: underline; } .lupa-spec-drawer-breadcrumb__current { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .lupa-spec-drawer-tabs { display: inline-flex; gap: 0; padding: var(--space-tight); background: var(--surface-sunken); border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); align-self: flex-start; flex-shrink: 0; } .lupa-spec-drawer-tab { display: inline-flex; align-items: center; gap: var(--space-tight); padding: 0.4rem 0.85rem; border-radius: var(--radius-pill); color: var(--text-secondary); font-size: var(--type-body-size); font-weight: 500; text-decoration: none; transition: background var(--motion-quick), color var(--motion-quick); } .lupa-spec-drawer-tab:hover { color: var(--text-primary); } .lupa-spec-drawer-tab--active { background: var(--surface-elevated); color: var(--text-primary); box-shadow: var(--shadow-card); } .lupa-spec-drawer-tab__count { background: var(--surface-tint); color: var(--text-secondary); border-radius: var(--radius-pill); padding: 0.05rem 0.45rem; font-size: var(--type-caption-size); font-variant-numeric: tabular-nums; } .lupa-spec-drawer-content { display: flex; flex-direction: column; gap: var(--space-default); } .lupa-spec-drawer-content-header { display: flex; flex-direction: column; gap: var(--space-tight); padding-bottom: var(--space-default); border-bottom: 1px solid var(--border-subtle); } .lupa-spec-drawer-content-title { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; font-weight: 400; letter-spacing: -0.01em; color: var(--text-primary); } .lupa-spec-drawer-content-path { font-family: var(--font-numeric); font-size: var(--type-caption-size); color: var(--text-muted); word-break: break-all; } .lupa-spec-drawer-rendered { color: var(--text-primary); line-height: var(--type-body-line); } .lupa-spec-drawer-rendered h1, .lupa-spec-drawer-rendered h2, .lupa-spec-drawer-rendered h3 { margin: var(--space-loose) 0 var(--space-compact); font-family: var(--font-body); font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; } .lupa-spec-drawer-rendered h1:first-child, .lupa-spec-drawer-rendered h2:first-child, .lupa-spec-drawer-rendered h3:first-child { margin-top: 0; } .lupa-spec-drawer-rendered h1 { font-size: 1.35rem; } .lupa-spec-drawer-rendered h2 { font-size: 1.15rem; } .lupa-spec-drawer-rendered h3 { font-size: 1rem; } .lupa-spec-drawer-rendered p { margin: 0 0 var(--space-default); } .lupa-spec-drawer-rendered ul, .lupa-spec-drawer-rendered ol { margin: 0 0 var(--space-default); padding-left: var(--space-loose); } .lupa-spec-drawer-rendered li { margin-bottom: var(--space-tight); } .lupa-spec-drawer-rendered a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .lupa-spec-drawer-rendered a:hover { color: var(--accent-hover); } .lupa-spec-drawer-rendered code { font-family: var(--font-numeric); font-size: 0.92em; background: var(--surface-sunken); padding: 0.1em 0.35em; border-radius: 4px; } .lupa-spec-drawer-rendered pre { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); padding: var(--space-snug); overflow-x: auto; margin: 0 0 var(--space-default); font-size: var(--type-caption-size); line-height: 1.5; } .lupa-spec-drawer-rendered pre code { background: transparent; padding: 0; border-radius: 0; } .lupa-spec-drawer-rendered blockquote { margin: 0 0 var(--space-default); padding-left: var(--space-default); border-left: 3px solid var(--border-subtle); color: var(--text-secondary); } .lupa-spec-drawer-rendered table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-default); font-size: var(--type-caption-size); } .lupa-spec-drawer-rendered th, .lupa-spec-drawer-rendered td { text-align: left; padding: var(--space-tight) var(--space-snug); border-bottom: 1px solid var(--border-subtle); } .lupa-spec-drawer-rendered th { font-weight: 600; color: var(--text-primary); } /* Rail — "Composes" / "Used by" sidelinks at the bottom of the * drawer body. These ARE the answer to the user's "navigate to the * contexts/projection/data that are relevant" — clearly grouped * under headings, each as a tappable card. */ .lupa-spec-drawer-rail { display: flex; flex-direction: column; gap: var(--space-default); padding-top: var(--space-default); border-top: 1px solid var(--border-subtle); } .lupa-spec-drawer-rail-section { display: flex; flex-direction: column; gap: var(--space-compact); } .lupa-spec-drawer-rail-heading { margin: 0; font-family: var(--font-body); font-size: var(--type-caption-size); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); } .lupa-spec-drawer-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-tight); } .lupa-spec-drawer-rail-list li { margin: 0; } .lupa-spec-drawer-rail-list a { display: block; padding: var(--space-snug) var(--space-default); background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); color: var(--text-primary); text-decoration: none; transition: border-color var(--motion-quick), background var(--motion-quick); } .lupa-spec-drawer-rail-list a:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--text-primary); } /* B14.14 chat-confirm outcome fragment. Replaces the pending card in * place after the user clicks Confirm — same paper-card shape as * the pending card it succeeds, with a coloured left border calling * out the result and a small reference line for the bank's wire id. * Sits inside the chat thread's pending-card slot. */ .lupa-chat-outcome { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-strong); border-radius: var(--radius-card); padding: var(--space-default); display: flex; flex-direction: column; gap: var(--space-tight); margin-bottom: var(--space-default); } .lupa-chat-outcome--success { border-left-color: var(--positive); } .lupa-chat-outcome--replay { border-left-color: var(--accent); } .lupa-chat-outcome--failure { border-left-color: var(--negative); } .lupa-chat-outcome__headline { margin: 0; color: var(--text-primary); } .lupa-chat-outcome__detail, .lupa-chat-outcome__reference, .lupa-chat-outcome__retry { margin: 0; } .lupa-chat-outcome__retry a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* Tests-tab content + per-test cards */ .lupa-spec-drawer-content--tests { display: flex; flex-direction: column; gap: var(--space-default); } .lupa-spec-drawer-test-card { padding: var(--space-default); background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); } /* ──────────────────────────────────────────────────────────────── * Account-detail screen (V13 second pass) * * Mirrors the AccountList visual language — paper-on-cream cards with * subtle borders, no shadow by default, display-font for the name — * but adapted to a list of many small rows rather than a handful of * large tiles. The transaction-row markup uses `` / `` for * historical reasons (TransactionTable was originally drafted as a * `` and the row template still emits the table elements); * since the surrounding section is NOT a `
` we explicitly * override the default `display: table-row` / `display: table-cell` * so the row lays out predictably regardless. (Future cleanup: the * row template should switch to plain `
`s, but that's a * markup-touching change with regression-test surface; the * display-override is the lower-risk fix.) * ──────────────────────────────────────────────────────────────── */ /* Stack utility — `--loose` modifier for the wider gap the detail * screen wants between the back-link, hero, filter strip, and * transaction list sections. */ .lupa-stack--loose { gap: var(--space-section); } /* Visually-hidden helper for accessibility-only labels (the search * label that's hidden visually but read by screen readers). */ .lupa-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Account hero — sits at the top of the detail screen carrying the * account name, masked number, current balance, and (optional) * sparkline. Card-shaped to match the account-list tiles. */ .lupa-account-hero { display: flex; align-items: center; gap: var(--space-loose); padding: var(--space-loose); background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); } /* Sparkline — server-rendered SVG with a fixed viewBox (240×56). The * renderer intentionally omits explicit `width` / `height` attributes * so the CSS owns sizing; pre-V13.4 there was no CSS rule and the SVG * defaulted to filling its flex parent, blowing up to viewport size * and clipping the hero text on the right. Constrained here to its * intrinsic dimensions; flex-shrink:0 keeps it from collapsing on * narrow viewports. */ .lupa-account-hero-sparkline { flex: 0 0 auto; width: 240px; height: 56px; display: block; } .lupa-account-hero-sparkline[data-empty="true"] { display: none; } .lupa-account-hero-text { display: flex; flex-direction: column; gap: var(--space-tight); min-width: 0; flex: 1; } .lupa-account-hero-name { margin: 0; font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; color: var(--text-primary); } .lupa-account-hero-number { margin: 0; font-size: var(--type-caption-size); color: var(--text-muted); } .lupa-account-hero-balance { display: flex; align-items: baseline; gap: 0.4rem; margin-top: var(--space-compact); } .lupa-account-hero-amount { font-size: 2rem; font-weight: 500; color: var(--text-primary); line-height: 1; } .lupa-account-hero-available { margin: 0; font-size: var(--type-caption-size); color: var(--text-secondary); } /* Filter strip — the chip group + search input above the transaction * list. Pre-V13 the chips rendered as default-underlined `` tags * with no surrounding layout; the search input had no styling. */ .lupa-filter-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-default); } .lupa-filter-chip-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-compact); } .lupa-filter-chip { display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-elevated); color: var(--text-secondary); font-size: var(--type-caption-size); font-weight: 500; text-decoration: none; transition: background var(--motion-quick), border-color var(--motion-quick), color var(--motion-quick); } .lupa-filter-chip:hover { border-color: var(--border-strong); color: var(--text-primary); } .lupa-filter-chip--active { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); } .lupa-filter-chip--active:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-foreground); } .lupa-filter-search { display: inline-flex; align-items: center; gap: var(--space-compact); } .lupa-filter-search-input { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); padding: 0.4rem 0.7rem; font-family: inherit; font-size: var(--type-caption-size); color: var(--text-primary); min-width: 14rem; transition: border-color var(--motion-quick); } .lupa-filter-search-input:focus { border-color: var(--accent); outline: none; } .lupa-filter-search-input::placeholder { color: var(--text-muted); } /* Date-range picker — used as the picker_html slot above the * transaction list. Two date inputs side-by-side with small labels. */ .lupa-date-range { display: flex; flex-wrap: wrap; gap: var(--space-default); padding: var(--space-default) 0; align-items: flex-end; } .lupa-field { display: flex; flex-direction: column; gap: var(--space-tight); } .lupa-field__label { font-size: var(--type-caption-size); color: var(--text-secondary); font-weight: 500; } .lupa-field input[type="date"] { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); padding: 0.4rem 0.7rem; font-family: inherit; font-size: var(--type-body-size); color: var(--text-primary); transition: border-color var(--motion-quick); } .lupa-field input[type="date"]:focus { border-color: var(--accent); outline: none; } .lupa-field__error { font-size: var(--type-caption-size); color: var(--negative); } /* Transaction list section — the wrapper around the day-grouped rows. */ .lupa-tx-section { display: flex; flex-direction: column; gap: var(--space-default); } .lupa-transaction-list { display: flex; flex-direction: column; gap: var(--space-snug); /* Override the default `display: list-item` from `role="list"`. */ } .lupa-transaction-day-header { font-size: var(--type-caption-size); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--text-secondary); margin-top: var(--space-default); padding-bottom: var(--space-tight); border-bottom: 1px solid var(--border-subtle); } .lupa-transaction-day-header:first-child { margin-top: 0; } /* Transaction row (V13.3) — div-based after the markup change away * from bare
/
. The HTML5 parser strips bare table elements * that appear outside a , which left every class we attached * to /
absent from the rendered DOM and the spans inside * flowing block-by-block. The row template now uses
s; the * class contract (and the V8 / V9 hx-* hooks) is unchanged. * * The row carries both `lupa-transaction-row` (semantic) and * `lupa-tx-row` (legacy alias). All rules apply to both so a future * deprecation of one doesn't break the layout. */ .lupa-transaction-row { display: flex; align-items: center; gap: var(--space-default); padding: var(--space-snug) var(--space-default); background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); transition: border-color var(--motion-quick), transform var(--motion-instant); width: 100%; box-sizing: border-box; } .lupa-transaction-row[hx-get] { cursor: pointer; } .lupa-transaction-row[hx-get]:hover { border-color: var(--border-strong); } .lupa-transaction-row[hx-get]:active { transform: translateY(1px); } .lupa-transaction-counterparty { display: flex; align-items: center; gap: var(--space-snug); flex: 1 1 auto; min-width: 0; } .lupa-transaction-counterparty-chip { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--text-secondary); font-size: var(--type-caption-size); font-weight: 600; flex-shrink: 0; } .lupa-transaction-counterparty-name { color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .lupa-transaction-category { display: inline-flex; align-items: center; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--text-secondary); font-size: var(--type-caption-size); font-weight: 500; flex-shrink: 0; } /* Date column — middle. Subtle, monospaced, fixed-min so the amount * column's right edge stays aligned across rows. */ .lupa-transaction-date { color: var(--text-secondary); font-size: var(--type-caption-size); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 6rem; text-align: right; } .lupa-transaction-amount-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: var(--space-tight); flex-shrink: 0; text-align: right; min-width: 8rem; } .lupa-transaction-amount { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-primary); } .lupa-transaction-amount--positive { color: var(--positive); } .lupa-transaction-amount--negative { color: var(--negative); } .lupa-transaction-balance-after { font-size: var(--type-caption-size); color: var(--text-muted); font-variant-numeric: tabular-nums; } /* Truncated-window note + load-more affordance */ .lupa-transaction-list-truncated-note { margin: var(--space-default) 0 0; padding: var(--space-snug) var(--space-default); background: var(--surface-sunken); border-radius: var(--radius-control); color: var(--text-secondary); } .lupa-transaction-list-loadmore { display: flex; justify-content: center; margin-top: var(--space-default); } /* Empty state — rendered when the working window has no * transactions. Centred illustration + heading + lede; same paper-card * shape as a transaction row so the surface stays cohesive. */ .lupa-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-snug); padding: var(--space-section) var(--space-loose); background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); color: var(--text-secondary); } .lupa-empty-state__illustration { color: var(--text-muted); opacity: 0.5; margin-bottom: var(--space-compact); } .lupa-empty-state .body-emphasis { color: var(--text-primary); } /* ──────────────────────────────────────────────────────────────── * App shell + chat dock (V14) * * Pre-V14 the chat pane was embedded inline in the /accounts body via * a two-column grid that lived only on that one screen. Other * authenticated pages (account detail, transfer, transactions) had no * chat at all, and the user had to navigate to /accounts (or the * dedicated /chat page) to talk to the agent. V14 promotes the chat * to a layout-level dock that ships on every page whose handler * passes `chat_aside_html: Some(...)` to `render_page`. * * The dock sits as a sibling of
in a flex shell. On desktop * the dock is fixed-width on the right with sticky positioning so it * stays in view as the main column scrolls; on viewports below the * mobile breakpoint (≤ 1100 px, matching the existing * `.lupa-grid-2col` collapse) the dock is hidden entirely and the * topnav "Chat" link routes users to the full-page /chat surface * instead — same pattern the dashboard's chat pane already used. * ──────────────────────────────────────────────────────────────── */ .lupa-app-shell { display: flex; align-items: flex-start; gap: var(--space-loose); flex: 1; min-width: 0; } .lupa-app-shell > .lupa-main { flex: 1 1 auto; min-width: 0; } .lupa-chat-dock { /* V14.3: default width bumped from 22rem → 33rem (50% wider) so * the conversation has room to breathe. The width is also * user-resizable via the drag handle on the left edge; the global * page-layout IIFE reads `localStorage["lupa_chat_dock_width"]` * on load and applies it via an inline `style="width: ...px"`, * so the customised size carries over between page navigations * (same-origin localStorage). The `flex` shorthand below uses * `0 0 var(...)` rather than a fixed `0 0 33rem` so the IIFE's * width override on the element flows through naturally. */ flex: 0 0 var(--lupa-chat-dock-width, 33rem); width: var(--lupa-chat-dock-width, 33rem); min-width: 22rem; max-width: 48rem; position: sticky; top: var(--space-loose); max-height: calc(100vh - var(--space-section)); display: flex; flex-direction: column; } /* V14.3: drag-handle on the left edge of the dock. Sits as a thin * absolute-positioned strip; widens the cursor target on hover so the * affordance is discoverable without crowding the layout. The handle * captures pointer events; the page-layout IIFE wires the actual * pointermove tracking + localStorage persist. Mobile hides it * alongside the dock itself via the existing media-query. */ .lupa-chat-dock { position: sticky; /* establish positioning context for the handle */ } .lupa-chat-dock-handle { position: absolute; top: 0; left: -6px; width: 12px; height: 100%; cursor: ew-resize; background: transparent; transition: background var(--motion-quick); /* hairline visual on hover — a subtle vertical line that reads as * a grabbable seam without competing with the dock content. */ } .lupa-chat-dock-handle::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 2px; height: 2.5rem; border-radius: var(--radius-pill); background: var(--border-subtle); transition: background var(--motion-quick), height var(--motion-quick); } .lupa-chat-dock-handle:hover::after, .lupa-chat-dock-handle[data-active="true"]::after { background: var(--accent); height: 4rem; } /* While dragging, lock the cursor and disable text selection page-wide * so the resize feels solid (no flickering from accidental selection). */ body[data-resizing-chat-dock="true"] { cursor: ew-resize; user-select: none; } body[data-resizing-chat-dock="true"] .lupa-chat-dock-handle { background: transparent; } @container (max-width: 1100px) { .lupa-chat-dock { display: none; } } /* Belt-and-suspenders: container queries depend on the host element's * `container-type`. `.lupa-screen` declares `container-type: inline-size` * (line 104) but if a future refactor drops it the dock would stay * visible at all sizes; this media-query backstop keeps the mobile * hide working regardless. */ @media (max-width: 1100px) { .lupa-chat-dock { display: none; } } /* ──────────────────────────────────────────────────────────────── * Transfer hub (V14.2) * * Pre-V14.2 the transfer screen had no CSS for any of its surfaces: * the kind tabs ("Between own accounts / Domestic / International") * rendered as a single underlined link blob, the form fields flowed * inline, the account-picker radios sat as bare default circles next * to wrapped text. Adding rules so each surface reads cleanly + * matches the rest of the redesigned dashboard's visual language. * ──────────────────────────────────────────────────────────────── */ .lupa-transfer-heading { margin: 0; font-family: var(--font-display); font-size: 2.25rem; line-height: 1.05; font-weight: 400; letter-spacing: -0.01em; color: var(--text-primary); } /* Tab nav — Between own / Domestic / International. Pill-style chips * matching `.lupa-filter-chip`'s shape so the kind switcher reads as * a sibling control, not a navigation menu. The active tab flips to * accent fill same as the filter chips. */ .lupa-tabs { display: inline-flex; flex-wrap: wrap; gap: var(--space-compact); padding: var(--space-tight); background: var(--surface-sunken); border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); align-self: flex-start; } .lupa-tab { display: inline-flex; align-items: center; padding: 0.45rem 1rem; border-radius: var(--radius-pill); color: var(--text-secondary); font-size: var(--type-body-size); font-weight: 500; text-decoration: none; transition: background var(--motion-quick), color var(--motion-quick); } .lupa-tab:hover { color: var(--text-primary); } .lupa-tab--active { background: var(--surface-elevated); color: var(--text-primary); box-shadow: var(--shadow-card); } .lupa-tab--active:hover { color: var(--text-primary); } /* Form region wrapper — hosts whichever kind's form is currently active * (HTMX swaps inside this region on tab click). */ .lupa-transfer-form-region { display: flex; flex-direction: column; } /* The form itself — flex column with consistent gap between fields. * The heading inside the section card uses --type-heading-size; the * `.heading` utility on the h2 already handles that. */ .lupa-transfer-form { display: flex; flex-direction: column; gap: var(--space-default); margin-top: var(--space-default); } /* Form-field wrapper — label above input(s). The picker-bearing * fields stretch full-width; text/date/note fields constrain their * inputs to a sensible reading width. */ .lupa-form-field { display: flex; flex-direction: column; gap: var(--space-tight); } .lupa-form-field-label { font-size: var(--type-caption-size); color: var(--text-secondary); font-weight: 500; } .lupa-form-field-error { margin: 0; font-size: var(--type-caption-size); color: var(--negative); } /* Plain inputs inside form-fields — note, execution date, recipient * name, BIC, etc. Match the `.lupa-filter-search-input` paper-card * shape so all form controls feel consistent. */ .lupa-form-field input[type="text"], .lupa-form-field input[type="date"], .lupa-form-field input[type="number"], .lupa-form-field input[type="search"], .lupa-form-field select { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); padding: 0.5rem 0.75rem; font-family: inherit; font-size: var(--type-body-size); color: var(--text-primary); transition: border-color var(--motion-quick); max-width: 28rem; } .lupa-form-field input:focus, .lupa-form-field select:focus { border-color: var(--accent); outline: none; } /* Account picker — radio cards. Each card is a tile with a leading * radio circle, the account label/last-4, and the balance on the * right. Selected state gets the accent border + tinted fill. The * native radio input is hidden visually but kept in the DOM so the * label-bound click and keyboard focus work natively. */ .lupa-account-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-compact); } .lupa-account-picker-card { display: flex; align-items: center; gap: var(--space-snug); padding: var(--space-snug) var(--space-default); background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-card); cursor: pointer; transition: border-color var(--motion-quick), background var(--motion-quick); } .lupa-account-picker-card:hover { border-color: var(--border-strong); } .lupa-account-picker-card--active, .lupa-account-picker-card:has(input[type="radio"]:checked) { border-color: var(--accent); background: var(--accent-soft); } .lupa-account-picker-card:has(input[type="radio"]:disabled) { opacity: 0.4; cursor: not-allowed; background: var(--surface-sunken); border-style: dashed; } .lupa-account-picker-card input[type="radio"] { /* Keep the native radio for keyboard / a11y; size it down so the * card itself dominates and the radio is a calm leading dot. */ margin: 0; flex-shrink: 0; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; } .lupa-account-picker-card-label { flex: 1 1 auto; min-width: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lupa-account-picker-card-balance { flex-shrink: 0; font-variant-numeric: tabular-nums; } /* Pending-card slot above the form — same paper-card shape, but with * an accent left border so it reads as "an action is waiting" rather * than just another form section. */ .lupa-pending-card-slot { margin-bottom: var(--space-default); } /* Money input — amount + currency row with a tighter min-width so * the currency dropdown sits next to (not below) the amount input. */ .lupa-money-input, .lupa-money-amount-row { display: flex; align-items: center; gap: var(--space-compact); flex-wrap: wrap; } .lupa-money-input input[type="number"], .lupa-money-input input[type="text"] { max-width: 12rem; font-variant-numeric: tabular-nums; } .lupa-money-input select { padding: 0.5rem 0.6rem; min-width: 5rem; } /* Execution date input — slightly narrower than the default text * inputs because date controls have native UI affordances browsers * already pad. */ .lupa-execution-date-input { max-width: 14rem; } /* Card section that hosts the form — match `.lupa-card` but allow * larger padding because the form is the surface, not a tile. */ .lupa-card[data-form] { padding: var(--space-section); display: flex; flex-direction: column; gap: var(--space-default); } .lupa-card[data-form] > h2 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; font-weight: 400; color: var(--text-primary); letter-spacing: -0.01em; }