/* shared */
.page{max-width:1180px;margin:0 auto;padding:var(--space-6) var(--space-6) var(--space-9)}
.num{font-variant-numeric:tabular-nums lining-nums}
.avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--color-accent-soft);color:var(--color-accent-strong);font-size:var(--size-sm);font-weight:var(--weight-semibold)}
.empty{display:grid;gap:var(--space-4);justify-items:start;max-width:52ch}
.empty p{color:var(--color-ink-2)}
.money--in{color:var(--color-ok)}
.money--over{color:var(--color-danger)}
.form{display:grid;gap:var(--space-4)}
.field>span{color:var(--color-ink-3);font-size:var(--size-sm)}
.field--large>span{font-size:var(--size-md)}
select.field__input{appearance:none;cursor:pointer}
@media (max-width:720px){.page{padding:var(--space-4) var(--space-4) 120px}}

/* budget */
.budget{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"summary due" "year due" "costs due" "money due";gap:var(--space-7);align-items:start}
.costs{grid-area:costs;display:grid;gap:var(--space-3);min-width:0}
.costs__form{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);align-items:end}
.costs__form>.button,.costs__problem{grid-column:1/-1}
.costs__form>.button{justify-self:start}
.plan.year{grid-area:year}
.year .plan__year{display:none}
.year .plan__table th,.year .plan__table td{padding:0 var(--space-2)}
.year .plan__table th:first-child,.year .plan__table td:first-child{padding-left:var(--space-3)}
.year .plan__table th:last-child,.year .plan__table td:last-child{padding-right:var(--space-3)}
.budget>.empty{grid-column:1/-1}
.summary{grid-area:summary;display:grid;gap:var(--space-4)}
.summary__head{display:grid;gap:var(--space-2)}
.summary__over{color:var(--color-danger)}
.split{display:flex;height:10px;border-radius:var(--radius-pill);background:var(--color-track);overflow:hidden}
.split__paid{background:var(--color-accent)}
.split__due{background:var(--color-accent-mid)}
.summary__facts{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6)}
.summary__facts div{display:grid;gap:2px}
.summary__facts dt{display:flex;align-items:center;gap:var(--space-2);font-size:var(--size-xs);color:var(--color-ink-3)}
.summary__facts dd{font-size:var(--size-md);font-weight:var(--weight-medium)}
.swatch{width:10px;height:10px;border-radius:3px;background:var(--color-track)}
.swatch--paid{background:var(--color-accent)}
.swatch--due{background:var(--color-accent-mid)}

.due{grid-area:due;position:sticky;top:var(--space-5);display:grid;gap:var(--space-3)}
.due__item{display:grid;gap:var(--space-3);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-l)}
.due__who{display:flex;align-items:center;gap:var(--space-3)}
.due__who p:first-of-type{display:grid;flex:1;min-width:0}
.due__who a{font-weight:var(--weight-medium);color:var(--color-ink);text-decoration:none}
.due__who a:hover{text-decoration:underline}
.due__amount{font-size:var(--size-md);font-weight:var(--weight-semibold)}
.due__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.due__clear{display:grid;gap:var(--space-1);padding:var(--space-4);border:1px dashed var(--color-line-strong);border-radius:var(--radius-l)}

.plan{grid-area:plan;display:grid;gap:var(--space-4);min-width:0}
.plan__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-2) var(--space-4)}
.plan__key{display:flex;gap:var(--space-4)}
.plan__scroll{overflow-x:auto;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-l)}
.plan__scroll:focus-visible{outline-offset:2px}
.plan__table th:first-child,.plan__table td:first-child{position:sticky;left:0;background:var(--color-surface);padding-left:var(--space-4)}
.plan__table th:last-child,.plan__table td:last-child{padding-right:var(--space-4)}
.plan__table thead a{color:inherit;text-decoration:none}
.plan__table thead a:hover{color:var(--color-accent)}
.plan__table tbody th{font-weight:var(--weight-medium);border-bottom:1px solid var(--color-line)}
.plan__table tbody tr:hover th{background:var(--color-surface-2)}
.plan__table tr[aria-current=date] th,.plan__table tr[aria-current=date] td{background:var(--color-accent-soft)}
.plan__table tr[aria-current=date] th:first-child{box-shadow:inset 3px 0 0 var(--color-accent)}
.plan__table tfoot th,.plan__table tfoot td{height:36px;font-weight:var(--weight-medium);border-bottom:0}
.plan__table tfoot tr:first-child>*{border-top:1px solid var(--color-line-strong)}
.plan__table tbody tr:last-child>*{border-bottom:0}
.plan__year{color:var(--color-ink-3);font-weight:var(--weight-regular)}
.plan__of{color:var(--color-ink-3);font-size:var(--size-xs)}
.plan__total{font-weight:var(--weight-medium)}
.state--paid{color:var(--color-ink)}
.state--part,.state--due{color:var(--color-warn);font-weight:var(--weight-medium)}
.state--planned,.state--none{color:var(--color-ink-3)}
.state{display:inline-flex;align-items:center;gap:6px}
.state::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.state.state--paid::before{background:var(--color-accent)}
@media (max-width:1000px){.budget{grid-template-columns:minmax(0,1fr);grid-template-areas:"summary" "due" "year" "costs" "money";gap:var(--space-6)}.due{position:static}}
@media (max-width:560px){.costs__form{grid-template-columns:1fr}.costs__form>.button{justify-self:stretch}}
@media (max-width:720px){.plan__year{display:none}.plan__table th,.plan__table td{padding:0 var(--space-2)}}

/* people */
.people{display:grid;gap:var(--space-5);max-width:720px}
.accounts{display:grid;gap:var(--space-2)}
.account{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-l);color:var(--color-ink);text-decoration:none;transition:border-color var(--dur-fast),background var(--dur-fast)}
.account:hover{border-color:var(--color-line-strong);color:var(--color-ink)}
.account:active{background:var(--color-surface-2)}
.account__who{display:grid;flex:1;min-width:0}
.account__name{font-weight:var(--weight-medium)}
.account__balance{display:grid;justify-items:end;gap:2px;text-align:right}
@media (max-width:480px){.account{flex-wrap:wrap}.account__balance{justify-items:start;text-align:left;flex-basis:100%;padding-left:52px}}

/* person */
.person{display:grid;grid-template-columns:380px minmax(0,1fr);grid-template-areas:"head head" "add month";gap:var(--space-6) var(--space-7);align-items:start}
.person__head{grid-area:head;display:grid;gap:var(--space-3);justify-items:start}
.person__back{margin-left:calc(var(--space-3) * -1)}
.person__name{display:flex;align-items:center;gap:var(--space-3)}
.person__balance{display:grid;gap:var(--space-1)}
.add{grid-area:add;position:sticky;top:var(--space-5)}
.add__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);margin:0;padding:var(--space-1);border:0;border-radius:var(--radius-m);background:var(--color-surface-2)}
.segmented label{position:relative;display:grid}
.segmented input{position:absolute;opacity:0}
.segmented span{display:grid;place-items:center;min-height:36px;border-radius:calc(var(--radius-m) - 2px);font-size:var(--size-sm);font-weight:var(--weight-medium);color:var(--color-ink-2);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.segmented span:hover{color:var(--color-ink)}
.segmented input:checked+span{background:var(--color-surface);color:var(--color-ink);box-shadow:0 1px 2px rgba(16,20,24,0.12)}
.segmented input:focus-visible+span{outline:2px solid var(--color-focus);outline-offset:1px}

.month{grid-area:month;display:grid;gap:var(--space-5);min-width:0}
.month__nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.month__sums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);padding:var(--space-4) 0;border-block:1px solid var(--color-line)}
.month__sums div{display:grid;gap:2px}
.month__sums dt{font-size:var(--size-xs);color:var(--color-ink-3)}
.month__sums dd{font-size:var(--size-lg);font-weight:var(--weight-medium)}
.month__empty{display:grid;gap:var(--space-2);color:var(--color-ink-2)}
.spending{display:grid;gap:var(--space-3)}
.spending ul{display:grid;gap:var(--space-2)}
.spending li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-1) var(--space-3);font-size:var(--size-sm)}
.spending__name{font-weight:var(--weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spending__bar{grid-column:1/-1;height:6px;border-radius:var(--radius-pill);background:var(--color-track);overflow:hidden}
.spending__bar i{display:block;height:100%;background:var(--color-accent-mid);border-radius:inherit}
.daylog{display:grid;gap:var(--space-1)}
.entry{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--color-line)}
.entry__body{display:grid;flex:1;min-width:0}
.entry__title{font-weight:var(--weight-medium);overflow-wrap:anywhere}
.entry__meta{font-size:var(--size-sm);color:var(--color-ink-3)}
.entry__meta:empty{display:none}
.entry__amount{font-weight:var(--weight-medium);white-space:nowrap}
@media (max-width:900px){.person{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "add" "month";gap:var(--space-6)}.add{position:static}}
@media (max-width:720px){.month__sums dd{font-size:var(--size-md)}}

/* settings */
.settings{display:grid;gap:var(--space-7);max-width:760px}
.settings__section{display:grid;gap:var(--space-4)}
.settings__head{display:grid;gap:var(--space-1)}
.settings__head p{color:var(--color-ink-2);max-width:60ch}
.settings__form{max-width:560px}
.settings__form>.button{justify-self:start}
.settings__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.person-plan{gap:var(--space-3)}
.person-plan__head{display:flex;align-items:center;gap:var(--space-3)}
.person-plan__head p{display:grid;flex:1;min-width:0}
.person-plan__head a{font-weight:var(--weight-medium);color:var(--color-ink);text-decoration:none}
.person-plan__head a:hover{text-decoration:underline}
.runs{display:grid;font-size:var(--size-sm)}
.runs li{display:flex;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--color-line)}
.runs li span:first-child{color:var(--color-ink-2)}
.person-plan__change{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--space-3);align-items:end}
@media (max-width:560px){.settings__pair,.add__pair,.due__fields{grid-template-columns:1fr}.person-plan__change{grid-template-columns:1fr 1fr}.person-plan__change .button,.settings__form>.button{grid-column:1/-1;justify-self:stretch}}

/* auth */
.auth{min-height:100vh;display:grid;justify-items:center;padding:var(--space-6) var(--space-4)}
.auth__box{align-self:center;display:grid;gap:var(--space-6);width:100%;max-width:400px}
.auth__brand{display:flex;align-items:center;gap:var(--space-3)}
.auth__brand .icon{width:34px;height:34px;color:var(--color-accent);stroke-width:1.6}
.auth__brand span{font-family:var(--font-serif);font-size:var(--size-xl);letter-spacing:var(--tracking-snug)}
@media (max-width:720px){.auth{padding:var(--space-7) var(--space-4) var(--space-5)}.auth__box{align-self:start;gap:var(--space-5)}}

/* salary entries and other payments */
.segmented--three{grid-template-columns:repeat(3,1fr)}
.add__salary{display:none}
.add:has(input[value=pay]:checked) .add__salary{display:grid}
.add:has(input[value=pay]:checked) .add__category{display:none}
.add:has(input[value=pay]:checked) .add__pair{grid-template-columns:1fr}
.other-pay__form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);padding:var(--space-2) 0 var(--space-4)}
.other-pay__form>p,.other-pay__note,.other-pay__form>.button{grid-column:1/-1}
.person-plan__edit{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--space-3);align-items:end}
@media (max-width:560px){.other-pay__form,.person-plan__edit{grid-template-columns:1fr}.person-plan__edit .button{justify-self:stretch}}

/* money in */
.plan__in{border-right:1px solid var(--color-line)}
.plan__short{color:var(--color-danger)}
.money{grid-area:money;display:grid;gap:var(--space-4);min-width:0}
.money>p{max-width:65ch}
.money__form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:var(--space-3)}
.money__note,.money__problem{grid-column:1/-1}
.money__form>.button{justify-self:start}
@media (max-width:560px){.money__form{grid-template-columns:1fr}.money__form>.button{justify-self:stretch}}

/* shared additions */
.page-banner{max-width:1180px;margin:var(--space-4) auto 0;width:calc(100% - var(--space-6) * 2)}
.textarea{width:100%;min-height:72px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-line-strong);border-radius:var(--radius-m);background:var(--color-surface);color:var(--color-ink);font:inherit;font-size:var(--size-sm);line-height:var(--leading-normal);resize:vertical}
.textarea:hover{border-color:var(--color-ink-3)}
.textarea:focus{outline:2px solid var(--color-focus);outline-offset:1px;border-color:transparent}
.file{font-size:var(--size-sm);color:var(--color-ink-2);max-width:100%}
.file::file-selector-button{margin-right:var(--space-3);min-height:32px;padding:0 var(--space-3);border:1px solid var(--color-line-strong);border-radius:var(--radius-m);background:var(--color-surface);color:var(--color-ink);font:inherit;font-size:var(--size-xs);font-weight:var(--weight-medium);cursor:pointer}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.92em;padding:1px 4px;border-radius:var(--radius-s);background:var(--color-surface-2)}
.budget__note{grid-area:money;max-width:65ch}
@media (max-width:720px){.page-banner{width:calc(100% - var(--space-4) * 2)}.nav__link{min-width:0;flex:1;padding:0 2px}.nav__links{gap:0}}

/* settings additions */
.settings__jump{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);font-size:var(--size-sm);margin-top:calc(var(--space-5) * -1)}
.settings__jump a{color:var(--color-ink-2)}
.settings [id]{scroll-margin-top:var(--space-5)}
.settings__share{max-width:220px}
.settings__trio{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:var(--space-3)}
.client{gap:0;padding:0;max-width:760px}
.client__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);cursor:pointer;list-style:none;border-radius:var(--radius-l)}
.client__head::-webkit-details-marker{display:none}
.client__head:hover .client__edit{color:var(--color-accent)}
.client__head:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.client[open]>.client__head{border-bottom:1px solid var(--color-line);border-radius:var(--radius-l) var(--radius-l) 0 0}
.client__who{display:grid;flex:1;min-width:0}
.client__name{font-weight:var(--weight-medium)}
.client__edit{color:var(--color-ink-2);font-weight:var(--weight-medium)}
.client[open] .client__edit{display:none}
.client__form{display:grid;gap:var(--space-4);padding:var(--space-5)}
.client__form>.button{justify-self:start}
.skydo{gap:var(--space-4);max-width:560px}
.skydo__state{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}
.skydo__actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.skydo__form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-3);align-items:end}
.skydo__form>p{grid-column:1/-1}
@media (max-width:560px){.settings__trio{grid-template-columns:1fr 1fr}.settings__trio>:first-child{grid-column:1/-1}.skydo__form{grid-template-columns:1fr}.client__form>.button{justify-self:stretch}.client__head,.client__form{padding:var(--space-4)}}

/* income */
.income{display:grid;gap:var(--space-7);max-width:820px}
.income__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.income__sync{display:flex;align-items:center;gap:var(--space-3)}
.expect{display:grid;gap:var(--space-3)}
.expect__list{display:grid;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-l)}
.expect__list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-4);align-items:baseline;padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-line)}
.expect__list li:first-child{border-top:0}
.expect__list li>:last-child{min-width:120px;text-align:right;font-weight:var(--weight-medium)}
.expect__total{background:var(--color-surface-2);border-radius:0 0 var(--radius-l) var(--radius-l)}
.expect__total>:first-child{font-weight:var(--weight-semibold)}
.received{display:grid;gap:var(--space-6)}
.received__month{display:grid;gap:var(--space-1)}
.received__title{display:flex;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-line-strong);font-size:var(--size-md);font-weight:var(--weight-semibold)}
.other{max-width:820px}
.other__fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.other__note{grid-column:1/-1}
.other>.button{justify-self:start}
@media (max-width:560px){.expect__list li{grid-template-columns:1fr auto}.expect__list li>:nth-child(2){grid-column:1/-1;grid-row:2}.other__fields{grid-template-columns:1fr}.other>.button{justify-self:stretch}}

/* invoices */
.invoices{display:grid;gap:var(--space-7);max-width:900px}
.new-invoice__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.new-invoice>.button{justify-self:start}
.invoice-list{display:grid;gap:var(--space-3)}
.invoice{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-line)}
.invoice__main{display:grid;gap:2px;flex:1 1 360px;min-width:0}
.invoice__title{font-weight:var(--weight-medium)}
.invoice__status{margin-top:var(--space-1)}
.invoice__files{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}
.chip--idle .chip__dot{background:var(--color-warn)}
@media (max-width:720px){.new-invoice__fields{grid-template-columns:1fr 1fr}.new-invoice>.button{justify-self:stretch}}

/* filings */
.filings{display:grid;gap:var(--space-7);max-width:980px}
.filings__head{display:grid;gap:var(--space-3)}
.filings__head .month__nav{justify-content:flex-start}
.coming{display:grid;gap:var(--space-2)}
.coming ul{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.coming a{display:grid;gap:2px;padding:var(--space-2) var(--space-3);border:1px solid var(--color-line);border-radius:var(--radius-m);background:var(--color-surface);color:var(--color-ink);text-decoration:none;font-size:var(--size-sm)}
.coming a:hover{border-color:var(--color-line-strong)}
.coming__what{font-weight:var(--weight-medium)}
.coming__due{color:var(--color-ink-3);font-size:var(--size-xs)}
.coming__due--late{color:var(--color-danger);font-weight:var(--weight-medium)}
.filing{display:grid;gap:var(--space-3);padding-top:var(--space-5);border-top:1px solid var(--color-line-strong)}
.filing>.button{justify-self:start}
.filing__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}
.filing__head h2{margin-right:auto}
.filing__due{color:var(--color-ink-2)}
.filing__table th:first-child,.filing__table td:first-child{padding-left:var(--space-4)}
.filing__table th:last-child,.filing__table td:last-child{padding-right:var(--space-4)}
.filing__table tfoot th,.filing__table tfoot td{height:38px;font-weight:var(--weight-semibold);border-top:1px solid var(--color-line-strong)}
.filing__sums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);padding:var(--space-4) 0;border-block:1px solid var(--color-line)}
.filing__sums div{display:grid;gap:2px}
.filing__sums dt{font-size:var(--size-xs);color:var(--color-ink-3)}
.filing__sums dd{font-size:var(--size-md);font-weight:var(--weight-medium)}
@media (max-width:720px){.filing__sums{grid-template-columns:1fr 1fr}.filing>.button{justify-self:stretch}}
@media (max-width:560px){.received .entry,.invoice-list .entry{flex-wrap:wrap}.received .entry__body{flex-basis:100%}.received .entry__amount{margin-left:auto}}
.authorize__actions{display:flex;gap:var(--space-2)}
.authorize__actions .button{flex:1;min-height:44px}
.apps{gap:var(--space-3);max-width:560px}