/* Hutson · Quiet Ledger — informed by Emil Kowalski's design engineering principles. */
:root{--bg:#f4f5f1;--paper:#ffffff;--paper-2:#eef1ed;--text:#202b25;--muted:#5e6d63;--line:#dfe5df;--accent:#176446;--accent-soft:#e8f2eb;--good:#176446;--danger:#b22c43;--radius:16px;--shadow:0 1px 2px #152f2010,0 8px 24px #152f2004;--ease-out:cubic-bezier(.23,1,.32,1)}
[data-theme=dark]{--bg:#111813;--paper:#1a241d;--paper-2:#222f26;--text:#f0f5ef;--muted:#acbcb0;--line:#354338;--accent:#a0dab6;--accent-soft:#263d2d;--good:#a0dab6;--danger:#ffa6b4;--shadow:0 1px 3px #0003}
body{font-size:14px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h2{font-family:inherit;font-size:20px;font-weight:650;letter-spacing:-.5px;line-height:1.3;text-wrap:balance}h3{letter-spacing:-.25px}p{line-height:1.65}
button,input,select,textarea{font:inherit}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform 140ms var(--ease-out),opacity 140ms ease}
button:active:not(:focus-visible):not(:disabled){transform:scale(.97)}button:disabled{cursor:wait;opacity:.55}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sidebar{width:216px;inset:12px auto 12px 12px;border-radius:18px;padding:24px 12px;background:#173f2e;border:1px solid #ffffff12;box-shadow:none}
.brand{font-size:25px;padding:3px 12px 28px;gap:10px}.brandmark{height:38px;width:34px;font-size:27px}.brand div>span{font-family:system-ui,sans-serif;font-size:10px;line-height:1.2;letter-spacing:1.1px}
.nav{gap:4px}.nav button{font-size:13px;font-weight:500;min-height:44px;padding:10px 12px;border-radius:9px;color:#c9ddd0;transition:none}.nav button>span{font-size:18px;width:22px;opacity:.8}
.nav button.active{background:#ffffff14;border-color:#ffffff10;color:#fff;box-shadow:inset 2px 0 #a0dab6}.sidefoot{font-size:11px;padding:18px 12px 8px}
.main{margin-left:240px;max-width:1600px;padding:58px 32px 64px}.top{align-items:center;gap:16px;margin-bottom:20px;padding-bottom:22px}.top h1{font-size:24px;font-weight:650;letter-spacing:-.75px}.sub{font-size:12px;line-height:1.5}.top-controls{gap:8px}
.btn{border-radius:9px;min-height:42px;padding:10px 14px;font-size:12px;box-shadow:0 1px 2px #11281912;font-weight:600}.btn.small{min-height:36px;padding:7px 10px;font-size:12px}.btn.secondary{box-shadow:0 1px 2px #152f2005}.btn:hover{filter:none}.search{font-size:13px;min-height:42px}
.welcome{padding:2px 0 22px;align-items:center}.welcome h2{font-family:Georgia,serif;font-size:clamp(26px,2.6vw,36px);letter-spacing:-1px;font-weight:400;margin-bottom:8px}.welcome p{font-size:13px;max-width:600px}.welcome-aside{display:none}.eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:8px}
.grid{gap:12px}.metric{padding:20px 18px!important}.metric .label{font-size:10px;font-weight:650;letter-spacing:.65px}.metric .number{font-size:clamp(21px,2.2vw,30px);letter-spacing:-1px;margin:12px 0 8px;font-variant-numeric:tabular-nums;white-space:normal;overflow-wrap:anywhere}.metric .hint{font-size:11px;line-height:1.5}.metric:first-child:before{display:none}.metric:nth-child(3){background:var(--accent-soft);border-color:var(--line)}
.card{padding:24px;box-shadow:var(--shadow)}.metric:hover,.wallet:hover{transform:none;box-shadow:var(--shadow)}.metric,.wallet{transition:none}.dashboard-secondary{gap:16px;margin-top:16px}.dashboard-secondary>.card{align-self:stretch}
.toolbar{margin:24px 0 14px;gap:12px}.toolbar h2{font-size:19px}.toolbar .flex{gap:8px}.tablewrap{padding:4px 16px;border-radius:14px}.tbl{font-variant-numeric:tabular-nums;min-width:640px}.tbl th{font-size:10px;letter-spacing:.65px;font-weight:600;padding:15px 10px;background:transparent}.tbl td{font-size:13px;line-height:1.6;padding:16px 10px}.tbl small{font-size:11px;color:var(--muted);line-height:1.8}.tbl td:last-child{min-width:160px}.tbl td>.btn{margin:3px 5px 3px 0}.tbl tbody tr:hover{background:transparent}
.detail{font-size:13px;padding:13px 0;line-height:1.6}.detail strong{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}.detail small{font-size:11px}.tiny{font-size:11px;line-height:1.6}.note{font-size:12px;padding:14px 16px;background:var(--paper-2);line-height:1.65}.empty{font-size:13px;padding:28px 16px}
.category-line{font-size:12px}.category-item{margin:16px 0}.category-track{height:6px}.category-fill{background:var(--accent)}.category-fill,.income-bar,.out-bar,.trend-bar,.budget-fill{animation:none!important;transition:none!important}.cashflow-chart{height:210px;margin:14px 0 18px;padding-top:16px;background:repeating-linear-gradient(to top,transparent 0,transparent 49px,var(--line) 50px,transparent 51px)}.payment-donut{height:184px;width:184px}.payment-donut>div{height:138px;width:138px}.payment-donut strong{font-variant-numeric:tabular-nums;font-size:18px}.chart-legend{font-size:12px}
.card summary,details>summary{font-size:12px;line-height:1.6;padding:8px 0;cursor:pointer;min-height:36px}.cashflow-explanation{padding:12px 16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;margin:18px 0}.cashflow-explanation>summary{font-weight:600;color:var(--text)}
.field{gap:7px}.field label{font-size:12px;color:var(--text);font-weight:550}.field input,.field select,.field textarea{min-height:46px;padding:11px 12px;font-size:14px;border-radius:9px;border-color:var(--line);box-shadow:0 1px 2px #152f2005}.field textarea{min-height:84px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}.fields,.form-grid{gap:18px 16px}
.dialogback{background:#0b181d70;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dialog{border-radius:18px;padding:26px;max-height:88dvh;overscroll-behavior:contain;box-shadow:0 24px 80px #0003}.dialog h2{font-size:22px;margin-bottom:24px}.dialog .actionrow{position:sticky;bottom:-26px;padding:18px 0 4px;background:var(--paper);border-top:1px solid var(--line);margin-top:24px}.dialog .actionrow .btn{min-width:94px}.dialogback.open .dialog{animation:none!important;transform-origin:center}
[data-motion=subtle][data-input-mode=pointer] .dialogback.open .dialog{transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out)}
@starting-style{[data-motion=subtle][data-input-mode=pointer] .dialogback.open .dialog{opacity:0;transform:translateY(6px) scale(.985)}}
[data-motion=subtle] .section.active{animation:none!important}.sync-toggle{font-size:11px;min-height:32px;padding:6px 11px}.lockbox{border-radius:20px;box-shadow:0 12px 48px #143d3010}.lockbox h1{font-size:34px}.lockbox p{font-size:13px}
@media(hover:hover) and (pointer:fine){.btn.secondary:hover{background:var(--paper-2);border-color:var(--muted)}.btn:not(.secondary):not(.warn):hover{opacity:.9}.nav button:not(.active):hover{background:#ffffff0c}.tbl tbody tr:hover{background:var(--paper-2)}}
@media(hover:none){.btn:hover{box-shadow:none;filter:none}.nav button:hover{background:transparent}.nav button.active:hover{background:#ffffff14}}
@media(max-width:1150px) and (min-width:761px){.sidebar{width:196px}.main{margin-left:220px;padding:54px 22px 56px}.top{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sidebar{inset:0 0 auto;width:100%;height:64px;border:0;border-radius:0;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));box-shadow:0 1px 0 #ffffff12;backdrop-filter:none;background:#173f2e}.brand{padding:0;font-size:22px}.brandmark{width:28px;height:32px}.brand div>span{font-size:9px}.nav{top:64px;background:#173f2e;padding:12px;border-radius:0 0 14px 14px}.nav button{min-height:46px}.chev{min-height:40px;padding:8px 12px}.main{margin:64px 0 0;padding:54px 16px 48px}.top{gap:16px;padding-bottom:18px;margin-bottom:18px}.top h1{font-size:23px}.top-controls{display:flex;gap:8px}.top-controls .btn{font-size:12px;min-height:42px}.top-controls .search{font-size:14px;min-width:150px}.welcome{padding:0 0 20px}.welcome h2{font-size:29px}.welcome p{font-size:12px}.eyebrow{font-size:9px}.grid{gap:10px}.metric{padding:16px 13px!important;border-radius:13px}.metric .number{font-size:23px;letter-spacing:-.85px}.metric .hint{font-size:10px}.metric .label{font-size:9px}.card{border-radius:14px;padding:20px}.dashboard-secondary{gap:14px}.toolbar{margin-top:22px}.toolbar .btn{min-height:44px}.toolbar h2{font-size:19px}.tablewrap{border:1px solid var(--line);background:var(--paper);padding:0 14px;box-shadow:none}.tbl{min-width:0}.tbl tr{padding:12px 0;margin:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}.tbl td{font-size:13px;padding:9px 0!important;gap:14px}.tbl td:before{font-size:11px;font-weight:500;max-width:40%;white-space:normal}.tbl td:first-child{font-weight:650;font-size:14px}.tbl td:last-child .btn{min-height:42px;font-size:12px}.tbl tr:last-child{border:0}.fields,.form-grid{gap:16px}.field input,.field select,.field textarea{font-size:16px;min-height:48px}.dialogback{padding:0}.dialog{width:100%;border-radius:20px 20px 0 0;max-height:92dvh;padding:24px 20px;padding-bottom:max(24px,env(safe-area-inset-bottom))}.dialog .actionrow{bottom:-24px;padding:16px 0 max(8px,env(safe-area-inset-bottom))}.dialog .actionrow .btn{min-height:46px;flex:1}.dialog h2{font-size:21px}.lockbox{padding:28px}.card summary,details>summary{min-height:44px}.cashflow-explanation{padding:8px 14px}.sync-toggle{min-height:32px}footer{font-size:10px;line-height:1.7}}
[data-input-mode=keyboard] *,[data-input-mode=keyboard] *:before,[data-input-mode=keyboard] *:after{transition:none!important;animation:none!important}
[data-motion=off] *,[data-motion=off] *:before,[data-motion=off] *:after{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}button:active{transform:none!important}}
@media print{.sidebar,.top-controls,#syncbar,.welcome-aside,.btn{display:none!important}.main{margin:0;padding:0}.card{box-shadow:none;break-inside:avoid}.tablewrap{overflow:visible}}

@media(max-width:760px){.tbl td:first-child small{flex-basis:100%;font-weight:400;text-align:right}}

