/* Hallmark · shape: app screen · genre: modern-minimal · theme: Dose (by request) · redesign: full · nav: grouped tool sidebar · footer: quiet data ledger · signature: translucent payday tray with daily allowance stub · states: empty, filled, error, saved, storage failure · dose: white · posture: committed · field: translucent mint · axes: light/grotesk-sans/chromatic-green · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: S; replace the dark result slab with measured compartments and a paper allowance stub, never a decorative organiser */
/* Hallmark · answered F14 · helpers explain financial boundaries; inline errors retain a stable line. No copy or wiring changes. */
/* Hallmark · material: theme-prescribed plastic rims and static window light; DM Mono only for dates and measured figures. No decorative motion or picture slots in app scope. */
/* Hallmark · finish-review: in-thread · 5 findings resolved · gap: none · final sweep: 0 FAIL, 0 REFLEX, 0 WARN · kept: all baseline links, fields, headings and script hooks */
@import url('./tokens.css');
@import url('./base.css');
@font-face { font-family: 'Schibsted Grotesk'; src: url('./fonts/schibsted-grotesk-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('./fonts/instrument-sans-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('./fonts/instrument-sans-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('./fonts/dm-mono-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('./fonts/dm-mono-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
html,body { overflow-x: clip; }
body { font-synthesis: none; }
button,a,input,select,textarea,summary,[tabindex] { -webkit-tap-highlight-color: var(--color-clear); }
button,a,input,select,textarea,summary,[tabindex]:not(main) { outline-offset: 3px; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline: 2px solid var(--color-focus); transition: none; }
button:disabled,input:disabled,select:disabled { opacity: .55; cursor: not-allowed; }
button[aria-busy='true'] { cursor: progress; }
button { cursor: pointer; }
button:active { transform: translateY(1px); }
a { text-decoration: none; }
p { max-width: 65ch; }
small,.quiet,.small-note { font-size: var(--text-sm); line-height: 1.55; color: var(--color-muted); }
h1 { font-size: var(--text-3xl); line-height: 1.2; max-width: 32ch; letter-spacing: -.045em; }
h2 { font-size: var(--text-lg); line-height: 1.35; max-width: 40ch; letter-spacing: -.025em; }
h3 { font-size: var(--text-md); line-height: 1.4; letter-spacing: -.015em; }
.icon { width: 20px; height: 20px; flex-shrink: 0; }
.app-frame { max-width: var(--container); margin-inline: auto; min-height: 100dvh; border-inline: 1px solid var(--color-rule-2); }
.topbar { display: grid; grid-template-columns: 230px minmax(0,1fr); align-items: center; min-height: 88px; border-bottom: 1px solid var(--color-rule); }
.brand { display: flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-lg); font-weight: 700; letter-spacing: -.04em; white-space: nowrap; font-size: 18px; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: var(--color-accent); color: var(--color-accent-ink); font-size: 26px; letter-spacing: -.08em; padding-right: var(--space-2xs); }
.brand-domain { font-weight: 400; color: var(--color-muted); }
.topbar-tools { display: flex; align-items: center; gap: var(--space-lg); padding-inline: var(--space-page); }
.search-wrap { display: flex; align-items: center; gap: var(--space-sm); position: relative; flex: 1; max-width: 400px; color: var(--color-muted); }
.search-wrap>svg { width: 19px; height: 19px; flex-shrink: 0; }
.search-wrap input { background: var(--color-clear); border: 1px solid var(--color-input-edge); border-radius: var(--radius-input); color: var(--color-ink); min-width: 0; width: 100%; height: 44px; font-size: var(--text-sm); padding-inline: var(--space-sm); }
.search-wrap kbd { font: inherit; font-size: var(--text-sm); border: 1px solid var(--color-rule); border-radius: 4px; width: 24px; text-align: center; }
.free-label { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.backup-link { font-size: var(--text-sm); }
.search-results { position: absolute; top: calc(100% + 8px); left: 0; width: min(400px,80dvw); background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-xs); z-index: var(--z-dropdown); }
.search-results a { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); min-height: 56px; border-radius: var(--radius-input); color: var(--color-ink); }
.search-results strong,.search-results small { display: block; }
.search-results a:hover { background: var(--color-paper-2); }
.search-results p { padding: var(--space-md); font-size: var(--text-sm); }
.app-body { display: grid; grid-template-columns: 230px minmax(0,1fr); }
.sidebar { background: var(--color-paper-2); border-right: 1px solid var(--color-rule); padding: var(--space-lg) var(--space-md); display: flex; flex-direction: column; gap: var(--space-xl); align-self: stretch; }
.nav-group { margin-bottom: var(--space-lg); }
.nav-label { font-size: var(--text-xs); color: var(--color-muted); padding: var(--space-xs) var(--space-sm); }
.nav-group a { min-height: 44px; display: flex; align-items: center; gap: var(--space-sm); border-radius: var(--radius-input); padding: var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 400; }
.nav-group a .icon { width: 18px; height: 18px; }
.nav-group a[aria-current='page'] { color: var(--color-accent-soft-ink); background: var(--color-accent-soft); }
.nav-group a:hover { background: var(--color-paper-3); }
.local-note { display: flex; align-items: flex-start; gap: var(--space-xs); margin-top: auto; padding: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); }
.local-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: var(--space-2xs); }
.local-note strong { display: block; font-weight: 500; }
.local-note p { margin-block: var(--space-xs); color: var(--color-muted); }
.local-note a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
main { min-width: 0; padding: var(--space-page); min-height: 900px; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-lg); }
.page-heading p { color: var(--color-muted); margin-top: var(--space-sm); font-size: var(--text-sm); }
.page-heading time { color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; padding-top: var(--space-xs); }
.welcome-note { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-lg); color: var(--color-accent); }
.welcome-note p { font-size: var(--text-sm); }
.workbench { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr); gap: var(--space-xl); align-items: start; }
.plan-form { padding-block: var(--space-xs); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.section-heading>.quiet { font-size: var(--text-xs); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-row) var(--space-md); }
.field { min-width: 0; }
.field-wide { grid-column: 1/-1; }
.field label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.field-shell { position: relative; }
.field-shell>input,.field-shell>select,.inline-form>input { width: 100%; min-width: 0; min-height: 46px; border: 1px solid var(--color-input-edge); border-radius: var(--radius-input); padding: var(--space-xs) var(--space-sm); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); line-height: 1.5; font-variant-numeric: tabular-nums; }
.field-shell.currency>span { position: absolute; left: var(--space-sm); top: 50%; transform: translateY(-50%); color: var(--color-muted); font-size: var(--text-sm); }
.field-shell.currency>input { padding-left: var(--space-xl); }
.field-shell input:focus-visible { outline-offset: -3px; }
.field small { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); }
input::placeholder { color: var(--color-muted); opacity: 1; }
input[aria-invalid='true'] { border-color: var(--color-error); }
input[type='date'] { min-width: 0; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; border: 1px solid var(--color-input-edge); border-radius: var(--radius-input); padding: var(--space-xs) var(--space-md); color: var(--color-ink); background: var(--color-paper); font-size: var(--text-sm); font-weight: 500; line-height: 1.5; text-align: center; text-decoration: none; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out); }
.button-primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
.button-primary:hover { background: var(--color-ink-2); }
.button-quiet { background: var(--color-clear); border-color: var(--color-rule); }
.button-quiet:hover { background: var(--color-paper-3); }
.button-small { padding-inline: var(--space-sm); background: var(--color-clear); border-color: var(--color-rule); }
.button .icon { width: 17px; height: 17px; }
.icon-button { width: 44px; min-width: 44px; height: 44px; border: 0; display: inline-grid; place-items: center; color: var(--color-muted); background: var(--color-clear); border-radius: var(--radius-input); }
.icon-button:hover { background: var(--color-paper-3); color: var(--color-ink); }
.form-error { min-height: 1.5em; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-error); }
.result-panel { display: flex; flex-direction: column; background: var(--color-field); color: var(--color-field-ink); padding: var(--space-lg); border-radius: var(--radius-panel); min-width: 0; }
.result-top { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--color-field-muted); }
.result-main { margin-block: var(--space-lg); }
.big-amount { display: block; font-size: var(--figure-md); line-height: 1.25; letter-spacing: -.04em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.result-main p { color: var(--color-field-muted); font-size: var(--text-sm); margin-top: var(--space-sm); }
.result-breakdown { margin: 0; display: grid; gap: var(--space-sm); font-size: var(--text-sm); }
.result-breakdown>div,.calculation-lines>div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.result-breakdown dt { color: var(--color-field-muted); }
dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.daily-result { border-top: 1px solid var(--color-field-rule); margin-top: var(--space-lg); padding-top: var(--space-md); }
.daily-result>div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.daily-result span { color: var(--color-field-muted); font-size: var(--text-sm); }
.daily-result strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.daily-result p { color: var(--color-field-muted); font-size: var(--text-xs); margin-top: var(--space-sm); }
.dashboard-bottom { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--space-xl); margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0; background: var(--color-clear); border: 0; color: var(--color-accent); font-size: var(--text-sm); font-weight: 500; }
.text-link:hover { text-decoration: underline; }
.text-link .icon { width: 16px; height: 16px; }
.empty { padding-block: var(--space-lg); }
.empty p { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-xs); }
.empty .text-link { margin-top: var(--space-xs); }
.ledger-row { display: flex; align-items: center; gap: var(--space-sm); min-height: 76px; border-bottom: 1px solid var(--color-rule-2); padding-block: var(--space-sm); }
.row-main { flex: 1; min-width: 0; }
.row-main strong { display: block; font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
.row-main small { display: block; margin-top: var(--space-2xs); font-size: var(--text-xs); }
.amount { font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-glyph { color: var(--color-muted); }
.date-tile { width: 36px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; font-size: var(--text-lg); }
.positive { color: var(--color-accent); }
.tool-strip { display: flex; gap: var(--space-lg); align-items: center; flex-wrap: wrap; margin-top: var(--space-xl); padding: var(--space-md) 0; border-top: 1px solid var(--color-rule); }
.tool-strip>p { margin-right: auto; color: var(--color-muted); font-size: var(--text-sm); }
.split-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); gap: var(--space-xl); align-items: start; }
.split-layout>section>h2,.calculator-layout>section>h2 { margin-bottom: var(--space-lg); }
.split-layout>section,.calculator-layout>section { min-width: 0; }
.stats-row { display: flex; flex-wrap: wrap; gap: var(--space-lg); padding-block: var(--space-lg); margin-bottom: var(--space-xl); border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }
.stat { flex: 1; min-width: 130px; display: flex; flex-direction: column; gap: var(--space-xs); }
.stat>span { font-size: var(--text-sm); color: var(--color-muted); }
.stat>strong { font-size: var(--text-xl); letter-spacing: -.04em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat>small { font-size: var(--text-xs); }
.small-note { margin-top: var(--space-md); }
.filters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-md); margin-bottom: var(--space-md); }
.bill-row { flex-wrap: wrap; }
.row-actions { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.method { border-top: 1px solid var(--color-rule); margin-top: var(--space-lg); padding-top: var(--space-sm); font-size: var(--text-sm); }
.method summary { cursor: pointer; min-height: 44px; align-content: center; color: var(--color-ink-2); }
.method summary .icon { display: inline-block; vertical-align: middle; margin-right: var(--space-xs); }
.method>div,.method>p { margin-block: var(--space-sm); }
.method p+p { margin-top: var(--space-sm); }
.method a,.explanation a { text-decoration: underline; text-underline-offset: 4px; }
.goals-list,.invoice-list { display: grid; gap: var(--space-xl); }
.goal-item,.invoice-item { border-top: 1px solid var(--color-ink-2); padding-top: var(--space-md); }
.goal-item .section-heading,.invoice-item .section-heading { margin-bottom: var(--space-sm); }
.goal-values { display: flex; align-items: baseline; gap: var(--space-xs); flex-wrap: wrap; font-size: var(--text-sm); }
.goal-values>strong { font-size: var(--text-xl); }
.goal-values>span { color: var(--color-muted); }
progress { display: block; appearance: none; width: 100%; height: 7px; border: 0; border-radius: 999px; background: var(--color-paper-3); color: var(--color-accent); margin-block: var(--space-md); }
progress::-webkit-progress-bar { background: var(--color-paper-3); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--color-accent); border-radius: 999px; }
progress::-moz-progress-bar { background: var(--color-accent); border-radius: 999px; }
.goal-meta { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-xs); color: var(--color-muted); }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-md); }
.inline-form>input { width: 130px; flex: 1; }
.inline-form>.form-error { flex-basis: 100%; }
.tag { display: inline-flex; align-items: center; font-size: var(--text-xs); padding: var(--space-2xs) var(--space-xs); background: var(--color-paper-3); border-radius: var(--radius-pill); color: var(--color-ink-2); }
.invoice-item>p { font-size: var(--text-sm); color: var(--color-muted); }
.invoice-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-block: var(--space-lg); font-size: var(--text-sm); }
.invoice-total>strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.calculator-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: var(--space-xl); }
.calculation-result { border-top: 2px solid var(--color-accent); padding-top: var(--space-lg); }
.calculation-result>h2 { margin-bottom: var(--space-lg); }
.calculation-result>span { display: inline-block; font-size: var(--text-sm); color: var(--color-muted); }
.calculation-result>.tag { color: var(--color-ink-2); }
.figure { display: block; font-size: var(--figure-md); line-height: 1.25; letter-spacing: -.04em; margin-block: var(--space-sm) var(--space-lg); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.calculation-result>p { font-size: var(--text-sm); }
.calculation-lines { display: grid; gap: var(--space-md); margin-block: var(--space-lg); font-size: var(--text-sm); }
.calculation-lines dt { color: var(--color-muted); }
.calculation-lines dd { font-weight: 500; }
.cost-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr) 44px; gap: var(--space-xs); align-items: end; margin-top: var(--space-md); }
.spaced { margin-top: var(--space-lg); }
.saved-products { margin-top: var(--space-xl); }
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-lg); border-bottom: 1px solid var(--color-rule); margin-bottom: var(--space-xl); }
.tabs a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--text-sm); border-bottom: 2px solid var(--color-clear); }
.tabs a[aria-current='page'] { border-color: var(--color-accent); color: var(--color-accent); }
.table-wrap { overflow: auto; max-height: 480px; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
th { text-align: left; font-weight: 500; white-space: nowrap; }
th,td { padding: var(--space-sm); border-bottom: 1px solid var(--color-rule); font-variant-numeric: tabular-nums; }
td { white-space: nowrap; }
.explanation { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.explanation h2 { margin-bottom: var(--space-md); }
.explanation p { font-size: var(--text-sm); color: var(--color-muted); }
.explanation p+p { margin-top: var(--space-md); }
.privacy-intro { display: flex; align-items: flex-start; gap: var(--space-lg); padding-block: var(--space-lg); }
.privacy-intro>.icon { width: 40px; height: 40px; color: var(--color-accent); }
.privacy-intro p { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.data-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-xl); margin-block: var(--space-xl); }
.data-actions section { border-top: 1px solid var(--color-rule); padding-top: var(--space-lg); }
.data-actions p { font-size: var(--text-sm); color: var(--color-muted); margin-block: var(--space-md) var(--space-lg); }
.data-actions button+button { margin-top: var(--space-sm); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.danger-zone p { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-xs); }
.notice { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); background: var(--color-accent-soft); color: var(--color-accent-soft-ink); font-size: var(--text-sm); margin-bottom: var(--space-lg); border-radius: var(--radius-input); }
.notice button { background: var(--color-clear); border: 0; text-decoration: underline; color: inherit; min-height: 44px; }
.notice-error { background: var(--color-error-soft); color: var(--color-error); }
.notice a { text-decoration: underline; }
.app-footer { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: space-between; padding: var(--space-lg) var(--space-page); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-xs); }
.app-footer a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
.app-footer>span { align-self: center; }
.feedback { position: fixed; bottom: var(--space-lg); left: 50%; transform: translateX(-50%); max-width: min(680px,calc(100% - 32px)); display: flex; align-items: center; gap: var(--space-md); background: var(--color-ink); color: var(--color-paper); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-card); box-shadow: var(--shadow-card); z-index: var(--z-toast); font-size: var(--text-sm); }
.feedback>button { color: var(--color-paper); background: var(--color-clear); border: 0; min-height: 44px; }
.feedback>button:not(.icon-button) { text-decoration: underline; white-space: nowrap; }
.feedback .icon-button { flex-shrink: 0; }
dialog { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: 85dvh; width: min(560px,calc(100% - 32px)); border: 0; border-radius: var(--radius-panel); padding: var(--space-lg); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); overflow: auto; }
dialog::backdrop { background: var(--color-overlay); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
dialog>div>p { font-size: var(--text-sm); }
dialog form { margin-top: var(--space-lg); }
.skip-link { position: fixed; top: var(--space-xs); left: var(--space-xs); padding: var(--space-sm); background: var(--color-accent); color: var(--color-accent-ink); transform: translateY(-200%); z-index: var(--z-tooltip); }
.skip-link:focus { transform: translateY(0); }
.mobile-menu { display: none; }
#print-document { display: none; }
.startup { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 75rem) { .topbar,.app-body { grid-template-columns: 215px minmax(0,1fr); } .brand { padding-inline: var(--space-md); font-size: 16px; } .topbar-tools { gap: var(--space-md); } .free-label { display: none; } :root { --space-page: 24px; --space-xl: 32px; } .workbench { gap: var(--space-lg); } .big-amount,.figure { font-size: var(--text-3xl); } }
@media (max-width: 60rem) { .app-frame { border-inline: 0; } .topbar { display: flex; flex-wrap: wrap; padding: var(--space-md); gap: var(--space-md); min-height: 72px; } .brand { padding: 0; font-size: 18px; } .topbar-tools { margin-left: auto; padding: 0; flex: 1; justify-content: flex-end; gap: var(--space-sm); } .search-wrap { max-width: 280px; } .search-wrap kbd { display: none; } .mobile-menu { display: inline-grid; order: 3; } .backup-link { display: none; } .app-body { display: block; } .sidebar { display: none; } .sidebar.is-open { display: flex; border-bottom: 1px solid var(--color-rule); } .local-note { max-width: 45ch; } main { min-height: 700px; } .page-heading time { display: none; } .nav-group { margin-bottom: var(--space-sm); } .nav-group a { font-size: var(--text-md); } .split-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 45rem) { :root { --space-page: 20px; --space-xl: 32px; } h1 { font-size: var(--text-2xl); } .topbar { gap: var(--space-xs); } .brand { font-size: 16px; } .brand-mark { width: 30px; height: 30px; font-size: 23px; } .search-wrap { flex: 0; width: 44px; } .search-wrap>svg { display: none; } .search-wrap input { width: 44px; padding: var(--space-xs); border: 1px solid var(--color-rule); border-radius: var(--radius-input); font-size: var(--text-xs); } .search-wrap:focus-within { position: absolute; left: var(--space-md); right: var(--space-md); width: auto; max-width: none; z-index: var(--z-dropdown); background: var(--color-paper); } .search-wrap:focus-within input { width: 100%; font-size: var(--text-md); } .search-results { width: 100%; } .workbench,.dashboard-bottom,.split-layout,.calculator-layout,.data-actions { grid-template-columns: minmax(0,1fr); } .workbench { gap: var(--space-md); } .result-panel { padding: var(--space-lg); } .big-amount,.figure { font-size: var(--figure-md); } .result-main { margin-block: var(--space-md); } .result-main strong { max-width: none; } .page-heading { margin-bottom: var(--space-lg); } .section-heading { flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); } .section-heading>.quiet { display: none; } .form-grid { gap: var(--space-md); } .form-actions .button { flex: 1; } .dashboard-bottom { margin-top: var(--space-lg); padding-top: var(--space-lg); } .tool-strip { gap: var(--space-xs) var(--space-lg); } .tool-strip>p { flex-basis: 100%; } .stats-row { gap: var(--space-lg); margin-bottom: var(--space-lg); } .stat { flex-basis: calc(50% - 24px); min-width: 100px; } .stat>strong { font-size: var(--text-lg); } .split-layout>section+section,.calculator-layout>section+section { padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); } .cost-row { grid-template-columns: minmax(0,1fr) 44px; } .cost-row>.field:first-child { grid-column: 1/-1; } .cost-row .field label { font-size: var(--text-xs); } .bill-row .row-actions { flex-basis: 100%; justify-content: flex-end; } .goal-values>span { width: 100%; } .danger-zone { align-items: flex-start; flex-direction: column; } .notice { flex-wrap: wrap; } .feedback { bottom: var(--space-sm); padding-inline: var(--space-sm); width: calc(100% - 24px); max-width: none; gap: var(--space-xs); } .feedback>span { flex: 1; } .privacy-intro { gap: var(--space-md); } .privacy-intro>.icon { width: 28px; height: 28px; } .app-footer { gap: var(--space-xs) var(--space-md); } .app-footer>span:nth-child(2) { flex-basis: 100%; order: 3; } }
@media (max-width: 23rem) { :root { --space-page: 16px; } .form-grid { grid-template-columns: minmax(0,1fr); } .big-amount,.figure { font-size: var(--text-2xl); } .result-breakdown>div { flex-wrap: wrap; gap: var(--space-2xs); } .daily-result>div { align-items: flex-start; flex-direction: column; gap: var(--space-xs); } .row-main { flex-basis: 40%; } .ledger-row { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .app-frame,.feedback,dialog,.skip-link { display: none !important; } #print-document { display: block; max-width: 760px; padding: var(--space-xl); margin: auto; background: var(--color-paper); color: var(--color-ink); } .print-heading { display: flex; justify-content: space-between; margin-bottom: var(--space-xl); } #print-document>h2 { margin-bottom: var(--space-lg); } #print-document>p { margin-block: var(--space-lg); } }
@media (max-width: 75rem) { .big-amount,.figure { font-variant-numeric: tabular-nums; } }
@media (max-width: 45rem) {
  .form-actions .button { flex: 1 1 100%; }
  .search-wrap>svg { display: block; position: absolute; width: 18px; height: 18px; left: 13px; top: 13px; pointer-events: none; }
  .search-wrap input { color: var(--color-clear); border-color: var(--color-input-edge); }
  .search-wrap input::placeholder { color: var(--color-clear); }
  .search-wrap:focus-within>svg { display: none; }
  .search-wrap:focus-within input,.search-wrap:focus-within input::placeholder { color: var(--color-ink); }
}

body { position: relative; isolation: isolate; }
body::before,body::after { content: ''; position: fixed; pointer-events: none; z-index: -1; }
body::before { inset: 0; background-image: var(--texture-grain); opacity: var(--texture-opacity); }
body::after { top: -220px; right: -100px; width: min(100%,1000px); height: 1100px; background: var(--window-light) no-repeat center/100% 100%; transform: skew(-18deg) rotate(-16deg); filter: blur(18px); opacity: .72; }
.app-frame { border-inline: 0; }
.topbar { min-height: 96px; background: color-mix(in oklab,var(--color-paper) 60%,transparent); }
.brand { font-family: var(--font-display); }
.brand-mark { background: var(--color-clear); color: var(--color-accent); width: 32px; height: 36px; padding: 0; font-size: 34px; }
.brand-domain { font-weight: 700; }
.search-wrap { max-width: 360px; }
.search-wrap input { background: color-mix(in oklab,var(--glint) 35%,transparent); }
.search-wrap>svg { width: 18px; height: 18px; }
.search-wrap kbd { border: 0; }
.sidebar { background: color-mix(in oklab,var(--color-paper) 52%,transparent); border-right: 1px solid var(--color-rule-2); padding-top: var(--space-lg); }
.nav-label { font-size: var(--text-sm); padding-block: var(--space-sm); }
.nav-group a { min-height: 46px; font-size: var(--text-sm); }
.nav-group a[aria-current='page'] { background: color-mix(in oklab,var(--p-thu) 62%,transparent); box-shadow: inset 0 1px 0 var(--glint), inset 0 -2px 0 color-mix(in oklab,var(--p-thu) 85%,var(--color-rule)); font-weight: 500; }
.nav-group a:hover { background: var(--color-paper-3); }
.nav-group a[aria-current='page']:hover { background: var(--color-accent-soft); }
.local-note { padding-inline: var(--space-xs); }
main { padding-top: var(--space-xl); }
h1 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); line-height: 1.1; }
h2 { letter-spacing: var(--tracking-display); line-height: 1.2; }
.page-heading { margin-bottom: var(--space-xl); }
.page-heading p { font-size: var(--text-md); }
.page-heading time { font-family: var(--font-outlier); font-size: var(--text-sm); }
.welcome-note { margin-top: calc(-1 * var(--space-md)); }
.welcome-note p { color: var(--color-muted); }
.plan-form { padding-top: var(--space-xs); }
.field label { font-weight: 500; }
.field-shell>input,.field-shell>select,.inline-form>input { min-height: 52px; background: color-mix(in oklab,var(--glint) 48%,transparent); box-shadow: inset 0 2px 3px color-mix(in oklab,var(--color-ink) 3%,transparent); }
.field-shell>input:hover,.field-shell>select:hover,.inline-form>input:hover { border-color: var(--color-ink-2); }
.field-shell>input[type='date'],.field-shell>input[type='month'],.field-shell.currency>input { font-family: var(--font-outlier); font-size: var(--text-sm); }
.field-shell.currency>span { font-family: var(--font-outlier); }
.button { min-height: 52px; border: 1px solid var(--color-rule); border-bottom-width: 1px; background: color-mix(in oklab,var(--glint) 32%,transparent); box-shadow: var(--shadow-control); font-size: var(--text-md); font-weight: 500; }
.button-primary { color: var(--color-accent-ink); background: linear-gradient(var(--color-accent),var(--color-accent-deep)); border-color: var(--color-accent-deep); box-shadow: var(--shadow-primary); }
.button-primary:hover { background: var(--color-accent-deep); }
.button-quiet { background: color-mix(in oklab,var(--glint) 32%,transparent); }
.button-small { min-height: 44px; font-size: var(--text-sm); box-shadow: none; }
.button:active { transform: translateY(3px); box-shadow: none; }
.button:disabled,.button[aria-disabled='true'] { transform: none; box-shadow: none; }
.backup-link { min-height: 44px; font-size: var(--text-sm); box-shadow: none; background: var(--color-clear); }
.result-panel { position: relative; padding: var(--space-lg); background: linear-gradient(color-mix(in oklab,var(--glint) 35%,transparent),transparent 18%),var(--color-field); box-shadow: var(--shadow-plastic); }
.result-top { color: var(--color-field-ink); font-weight: 500; }
.result-top>.icon { opacity: .6; }
.result-main { margin-block: var(--space-lg) var(--space-xl); }
.big-amount { font-family: var(--font-display); font-size: var(--figure-lg); line-height: 1.05; letter-spacing: var(--tracking-display); }
.result-main p { max-width: 45ch; color: var(--color-field-muted); }
.result-breakdown { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin-inline: calc(-1 * var(--space-lg)); padding-inline: var(--space-lg); border-top: 1px solid var(--color-field-rule); }
.result-breakdown>div { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) var(--space-sm); min-height: 112px; }
.result-breakdown>div:first-child { padding-left: 0; }
.result-breakdown>div:last-child { padding-right: 0; }
.result-breakdown>div+div { border-left: 1px solid var(--color-field-rule); }
.result-breakdown dt { font-size: var(--text-sm); }
.result-breakdown dd { font-family: var(--font-outlier); font-size: var(--text-sm); text-align: left; overflow-wrap: anywhere; }
.daily-result { position: relative; margin: 0 calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)); padding: var(--space-lg); border-top: 1px dashed var(--color-field-rule); border-radius: 0 0 var(--radius-panel) var(--radius-panel); background-color: color-mix(in oklab,var(--color-paper) 85%,transparent); }
.daily-result::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: var(--texture-grain); opacity: var(--texture-opacity); pointer-events: none; }
.daily-result>div { align-items: center; }
.daily-result span { color: var(--color-ink-2); }
.daily-result strong { font-family: var(--font-outlier); font-weight: 500; font-size: var(--text-xl); }
.daily-result p { color: var(--color-muted); max-width: 45ch; }
.dashboard-bottom { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 0; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); }
.dashboard-bottom>section { min-width: 0; }
.dashboard-bottom>section+section { padding-left: var(--space-lg); border-left: 1px dashed var(--color-rule); }
.section-heading .text-link { font-weight: 500; }
.amount,.date-tile,.calculation-lines dd,.goal-meta { font-family: var(--font-outlier); font-weight: 400; }
.date-tile { min-width: 36px; }
.tool-strip { margin-top: var(--space-lg); }
.stats-row { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); grid-template-columns: none; gap: 0; border: 0; border-radius: var(--radius-panel); padding: 0; background: color-mix(in oklab,var(--p-wed) 45%,transparent); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -16px 28px -28px color-mix(in oklab,var(--p-wed) 60%,var(--color-ink)); }
.stat { min-width: 0; padding: var(--space-lg); }
.stat+.stat { border-left: 1px dashed color-mix(in oklab,var(--color-muted) 32%,transparent); }
.stat>strong { font-family: var(--font-body); font-weight: 500; font-size: var(--text-2xl); letter-spacing: -.03em; }
.split-layout { grid-template-columns: minmax(0,.95fr) minmax(0,1.35fr); }
.split-layout>section+section { padding-left: var(--space-lg); border-left: 1px solid var(--color-rule-2); }
.calculator-layout { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: start; }
.calculator-layout>section+section { background: color-mix(in oklab,var(--p-wed) 38%,transparent); border-radius: var(--radius-panel); padding: var(--space-lg); box-shadow: inset 0 1.5px 0 var(--glint), inset 0 -20px 36px -32px color-mix(in oklab,var(--p-wed) 60%,var(--color-ink)); }
.calculation-result { border-top: 0; padding-top: 0; }
.figure { font-family: var(--font-display); line-height: 1.05; }
.calculation-lines { padding-top: var(--space-lg); border-top: 1px dashed var(--color-rule); }
.calculation-lines>div { flex-wrap: wrap; }
.calculation-lines dd { margin-left: auto; }
.goal-item,.invoice-item { border-top: 1px dashed var(--color-input-edge); }
.goal-values>strong,.invoice-total>strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.tabs { gap: var(--space-xs); border-bottom: 0; margin-bottom: var(--space-lg); }
.tabs a { min-height: 44px; padding-inline: var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); color: var(--color-ink-2); }
.tabs a[aria-current='page'] { background: color-mix(in oklab,var(--p-thu) 62%,transparent); color: var(--color-accent-soft-ink); border-color: var(--color-field-rule); }
.tabs a:hover { background: var(--color-paper-3); }
.tag { color: var(--color-muted); background: var(--color-paper-3); border-radius: var(--radius-input); }
.table-wrap { border-radius: var(--radius-input); }
th { background: var(--color-paper-2); font-weight: 500; }
td { font-family: var(--font-outlier); font-size: var(--text-xs); }
.data-actions { gap: 0; border-radius: var(--radius-panel); background: color-mix(in oklab,var(--p-thu) 32%,transparent); box-shadow: var(--shadow-plastic); }
.data-actions section { padding: var(--space-lg); border-top: 0; }
.data-actions section+section { border-left: 1px dashed var(--color-field-rule); }
.notice { border-radius: var(--radius-input); box-shadow: inset 0 1px 0 var(--glint); }
.notice-error { color: var(--color-error); background: var(--color-error-soft); }
.search-results { background: var(--color-paper); box-shadow: var(--shadow-card); border: 0; }
.app-footer { margin-inline: var(--space-page); padding-inline: 0; border-top-style: dashed; }
dialog { box-shadow: var(--shadow-lift); background-color: var(--color-paper); }
@media (max-width: 75rem) {
  .workbench { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .result-breakdown { grid-template-columns: minmax(0,1fr); padding-block: var(--space-xs); }
  .result-breakdown>div { flex-direction: row; align-items: baseline; min-height: 0; padding: var(--space-xs) 0; gap: var(--space-sm); }
  .result-breakdown>div+div { border-left: 0; }
  .result-breakdown dd { text-align: right; }
  .big-amount { font-size: var(--text-3xl); }
  .stat>strong { font-size: var(--text-xl); }
}
@media (max-width: 60rem) {
  .topbar { min-height: 80px; }
  .sidebar.is-open { background: var(--color-paper); }
  .page-heading time { display: block; }
  .local-note { margin-top: 0; }
  .split-layout { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 45rem) {
  body::after { opacity: .48; right: -120px; }
  .topbar { min-height: 76px; }
  main { padding-top: var(--space-lg); }
  h1 { font-size: var(--text-2xl); }
  .brand { font-size: 16px; }
  .brand-mark { font-size: 30px; width: 28px; }
  .page-heading { gap: var(--space-sm); margin-bottom: var(--space-lg); }
  .page-heading time { display: none; }
  .page-heading p { font-size: var(--text-sm); }
  .welcome-note { margin-top: 0; }
  .workbench,.calculator-layout,.split-layout,.dashboard-bottom { grid-template-columns: minmax(0,1fr); }
  .result-panel { margin-top: var(--space-md); }
  .result-main { margin-block: var(--space-lg); }
  .big-amount { font-size: var(--text-3xl); }
  .dashboard-bottom>section+section,.split-layout>section+section { padding-left: 0; border-left: 0; }
  .dashboard-bottom>section+section { padding-top: var(--space-lg); border-top: 1px dashed var(--color-rule); }
  .calculator-layout>section+section { padding: var(--space-lg); border-top: 0; }
  .daily-result>div { flex-wrap: wrap; gap: var(--space-xs); }
  .daily-result strong { font-size: var(--text-lg); }
  .stats-row { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0,1fr); }
  .stat { padding: var(--space-md) var(--space-lg); display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: baseline; gap: var(--space-xs); }
  .stat+.stat { border-left: 0; border-top: 1px dashed var(--color-rule); }
  .stat>strong { font-size: var(--text-xl); text-align: right; }
  .stat>small { grid-column: 1/-1; }
  .data-actions { grid-template-columns: minmax(0,1fr); }
  .data-actions section+section { border-left: 0; border-top: 1px dashed var(--color-field-rule); }
  .field-shell.currency>input { padding-left: var(--space-xl); }
  .app-footer { margin-inline: var(--space-page); }
}
@media (max-width: 23rem) {
  .result-breakdown>div { flex-wrap: wrap; }
  .stat { grid-template-columns: minmax(0,1fr); }
  .stat>strong { text-align: left; }
  .daily-result>div { align-items: flex-start; }
}
@media print { body::before,body::after { display: none; } }
.budget-heading { flex-wrap: wrap; }
.budget-heading .text-link { white-space: nowrap; }
.feature-heading,.list-section>.section-heading { flex-wrap: wrap; }
.feature-heading>.field { width: min(100%,320px); }
.report-category { padding-block: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.report-category .section-heading { margin-bottom: var(--space-xs); flex-wrap: wrap; }
.invoice-line { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.5fr) 44px; gap: var(--space-xs); align-items: end; margin-top: var(--space-md); }
.invoice-line label { display: grid; gap: var(--space-xs); font-size: var(--text-sm); min-width: 0; }
.invoice-line input,.invoice-line select { width: 100%; min-width: 0; min-height: 52px; border: 1px solid var(--color-input-edge); border-radius: var(--radius-input); padding: var(--space-xs); color: var(--color-ink); background: var(--color-paper); }
.filters>.button { align-self: end; white-space: normal; }
.split-layout>section>h2.spaced { margin-top: var(--space-xl); margin-bottom: var(--space-md); }
@media (max-width: 45rem) {
  .invoice-line { grid-template-columns: minmax(0,1fr) 44px; }
  .invoice-line>label:first-child { grid-column: 1/-1; }
  .ledger-row { flex-wrap: wrap; }
  .goal-item>.section-heading { flex-wrap: wrap; }
}
.brand-symbol { width: 36px; height: 36px; flex-shrink: 0; }
main { position: relative; isolation: isolate; }
.welcome-picture { display: block; }
.welcome-picture>div { display: flex; align-items: center; gap: var(--space-xs); }
.welcome-picture>img,.savings-picture { position: absolute; top: 0; right: 0; z-index: -1; width: min(640px,75%); height: 400px; margin: 0; object-fit: cover; object-position: right top; border-radius: 0; opacity: .18; filter: saturate(.65); mask-image: radial-gradient(ellipse at top right,var(--color-ink) 12%,var(--color-clear) 72%); pointer-events: none; user-select: none; }
@media (max-width: 45rem) {
  .brand-symbol { width: 28px; height: 28px; }
  .welcome-picture>img,.savings-picture { width: 100%; height: 280px; opacity: .12; }
}
.seo-guide { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); max-width: 72ch; }
.seo-guide h3 { margin-top: var(--space-lg); }
.seo-guide li { margin-bottom: var(--space-sm); }
.seo-guide ol,.seo-guide ul { padding-left: var(--space-lg); }
.seo-guide details { margin-top: var(--space-lg); }