/* Family invoice pages (docs/invoices-spec.md 5.1): the library and calendar headers' black band with the photo
   behind it, cream Cormorant title and text (the library's, no gold), then the cream page, Inter text, bronze buttons. Light only, phone
   first: 16 px text in fields, 44 px touch targets, nothing wider than 320 px. The build fills in the font URLs (the
   library's static fonts, the same files invoice-page.css uses) and the photo's (the Letter page's own). */
@font-face{font-family:'MTP Inter';src:url(/sheet-music/assets/3100e775e861/inter-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'MTP Cormorant';src:url(/sheet-music/assets/d80df8ff5aec/cormorant-garamond-normal.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}
:root{--bg:#F6F5F2;--desk:#ECE9E3;--bg-dark:#0B0B0C;--bronze:#B89B72;--bronze-acc:#7A6832;--bronze-deep:#5F5026;--gold:#E8D6B3;--ivory:#F2E6CF;--tint:#FBF8F1;--text:#111;--text-sec:#6D6A63;--note:#3B3934;--line:rgba(0,0,0,.08);--hairline:rgba(0,0,0,.06);--error:#8b2929;--error-bg:#fff5f3;--serif:'MTP Cormorant',Georgia,serif;--sans:'MTP Inter',Arial,sans-serif;--lift:0 1px 2px rgba(0,0,0,.04),0 20px 44px -24px rgba(0,0,0,.25);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,p{margin:0}
a{color:var(--bronze-acc)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The header band. The photo is the Letter page's own (invoice-hero.jpg, 1518 × 681, already in the build): a wide
   crop, so it stays sharp across the band, where the site's portrait photo, cut to a strip, looked soft. */
.band{position:relative;overflow:hidden;background:var(--bg-dark);color:var(--bg);padding:22px 0 84px}
/* On windows wider than the photo, its left edge is inside the band: it fades in from the band's black there, or
   the edge showed as a straight line through the title. */
.band::before{content:'';position:absolute;top:0;right:0;bottom:0;width:min(100%,960px);background:linear-gradient(90deg,var(--bg-dark),rgba(11,11,12,0) 25%),#1a1918 url(../c984ce3684b0/invoice-hero.jpg) 58% 46%/cover no-repeat;filter:saturate(.9) sepia(.08)}
.band::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.96),rgba(11,11,12,.88) 36%,rgba(11,11,12,.55) 62%,rgba(11,11,12,.28)),linear-gradient(0deg,rgba(11,11,12,.6),transparent 45%)}
.band-in{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 16px}
.band .wordmark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--serif);font-size:22px;line-height:1;color:var(--bg);text-decoration:none}
.band .eyebrow{margin-top:34px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
.band h1{margin-top:10px;font-family:var(--serif);font-weight:400;font-size:clamp(38px,8vw,60px);line-height:1;color:var(--bg)}
.band-sub{margin-top:14px;max-width:560px;font-size:15px;font-weight:300;color:rgba(246,245,242,.74)}
.band :focus-visible{outline-color:var(--bronze)}
/* One invoice: a slim title bar (the studio, then the family over the period), so the invoice itself leads. On phones
   the studio's mark stands in for its name. */
.page-view .band{padding:0}
.page-view .band::before{width:min(100%,720px);background-position:0 0,60% 44%}
.page-view .band::after{background:linear-gradient(90deg,rgba(11,11,12,.97),rgba(11,11,12,.93) 48%,rgba(11,11,12,.72) 78%,rgba(11,11,12,.55))}
.page-view .band-in{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center;max-width:1320px;min-height:78px;padding:12px 32px}
.page-view .band .wordmark{grid-row:1 / span 2;padding-right:22px;border-right:1px solid rgba(232,214,179,.24);font-size:21px}
.page-view .band .eyebrow{margin:0;align-self:end;font-size:10px;letter-spacing:.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-view .band h1{margin:3px 0 0;align-self:start;font-size:27px;line-height:1.1;font-variant-numeric:lining-nums}
@media(max-width:599px){
.page-view .band-in{column-gap:14px;min-height:68px;padding:10px 16px}
.page-view .band .wordmark{width:48px;padding-right:14px;font-size:0;background:url(/app-icons/family-192.png) 0 50%/34px 34px no-repeat}
.page-view .band h1{font-size:23px}
}

/* Cards, overlapping the band like the calendar's "this week" card */
.fam-main{position:relative;z-index:1;max-width:760px;margin:-56px auto 0;padding:0 16px}
.card{background:#fff;border-top:2px solid var(--bronze);box-shadow:var(--lift);padding:22px 20px 22px}
.card+.card{margin-top:16px;border-top-width:1px;border-top-color:var(--line)}
.card h2{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-acc);margin-bottom:10px}
.card.message p+p{margin-top:16px}
.bc-label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-acc)}
.bc-amount{margin-top:6px;font-family:var(--serif);font-weight:500;font-size:52px;line-height:1;font-variant-numeric:lining-nums}
.bc-thanks{margin-top:6px;font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.15}
.bc-meta{margin-top:8px;color:var(--text-sec);font-size:15px}
.bc-late{margin-top:4px;color:var(--text-sec);font-size:14px}
/* The month's invoice on the home (14.12): its lines and totals as the phone layout has them (invoice-page.css), in
   the card's own padding, the table's "Charges" caption left to screen readers under the card's heading; then
   Download PDF, Share and Print as on an invoice. The Letter page they are made from stays hidden (the PDF and the
   fit measure a copy), and is what the home prints. */
.charges .inv-m{padding:0}
.charges .inv-m .m-lines{margin-top:0}
.charges .inv-m .m-lines caption{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.charges .inv-m .m-lines tr:first-child>*{padding-top:4px}
.charges .m-note{margin-top:16px}
.ch-updated{margin:-4px 0 8px;font-size:13px;color:var(--text-sec)}
.charges .sum-actions{margin-top:20px}
@media(min-width:768px){.charges .sum-actions{max-width:440px}}
.home-letter{display:none}
/* A refund sent in the last 60 days (14.20): the amount, how and when, then what it was for. */
.rf-list{margin:0;padding:0;list-style:none}
.rf-list li+li{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline)}
.rf-line{font-size:16px}
.rf-line b{margin-right:2px;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.1;font-variant-numeric:lining-nums}
.rf-why{margin-top:2px;color:var(--text-sec);font-size:15px}
/* Phone numbers and dates stay on one line. The page script puts a Copy button after the home's family code. Its
   ::after makes a 44.8 px target (the inset counts from the 22.8 px padding box), and its 10 px margins make its line
   tall enough to hold it. */
.nw,.fam-foot a[href^="tel:"]{white-space:nowrap}
button.copy{position:relative;margin:10px 0 10px 8px;padding:3px 9px;border:1px solid var(--bronze);border-radius:0;background:#fff;color:var(--bronze-acc);font:600 12px/1.4 var(--sans);letter-spacing:.04em;cursor:pointer;vertical-align:1px}
button.copy::after{content:'';position:absolute;inset:-11px -4px}
button.copy:hover{background:var(--tint);color:var(--bronze-deep)}
button.copy.done{border-color:#CFDCC9;background:#EEF3EC;color:#3B4D33}
.empty p{color:var(--text-sec)}

/* Buttons (bronze; white text on the deeper bronze for contrast) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border:1px solid var(--bronze-acc);border-radius:0;background:var(--bronze-acc);color:#fff;font:500 15px/1.2 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--bronze-deep);border-color:var(--bronze-deep)}
.btn-secondary{background:#fff;color:var(--bronze-acc);border-color:var(--bronze)}
.btn-secondary:hover{background:var(--tint);color:var(--bronze-deep)}
.btn[disabled]{opacity:.6;cursor:progress}
.btn[hidden]{display:none}

/* Lists: Due (when more than one invoice is), then past invoices by school year. The whole row opens the invoice (the
   link's ::after covers the row); the chip sits beside the amount, under it on phones. */
.list{margin-top:36px}
.list>h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.1;margin-bottom:12px}
.inv-list{width:100%;border-collapse:collapse;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.inv-list tr{position:relative}
.inv-list td{padding:14px 16px;border-top:1px solid var(--hairline);vertical-align:top}
.inv-list tr:first-child td{border-top:0}
.inv-list tr:hover{background:#FBFAF7}
.row-link{font-weight:500;color:var(--text);text-decoration:none}
.row-link::after{content:'';position:absolute;inset:0}
.row-link:focus-visible{outline:none}
.row-link:focus-visible::after{outline:2px solid var(--bronze);outline-offset:-2px}
.r-meta{display:block;margin-top:2px;font-size:13px;color:var(--text-sec)}
.r-amount{width:1%;text-align:right;white-space:nowrap}
.r-box{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.r-sum{font-weight:500;font-variant-numeric:tabular-nums}
/* A long chip ("Partly paid · $150.00 left") takes two lines on a phone; the others keep one. */
.r-amount .chip{width:max-content;max-width:10.5em;white-space:normal;text-align:center;border-radius:12px}
@media(max-width:599px){.inv-list td{padding:14px 12px}.inv-list td:first-child{padding-left:16px}.inv-list td:last-child{padding-right:16px}}
/* A paid chip's way to pay ("Paid Aug 20 · Zelle"): its own line on a phone, without the "·" (invoice-server.js). */
@media(max-width:599px){.r-amount .chip-sep{display:none}.r-amount .chip-how{display:block}}
@media(min-width:600px){.inv-list td{vertical-align:middle}.r-box{flex-direction:row-reverse;align-items:center;gap:14px}.r-amount .chip{max-width:none;white-space:nowrap}}
.chip{display:inline-block;padding:2px 10px;border:1px solid;border-radius:999px;font-size:12px;font-weight:600;line-height:1.6;letter-spacing:.02em;white-space:nowrap}
.chip-due{background:#fff;border-color:var(--bronze);color:var(--bronze-deep)}
.chip-due::before{content:'';display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--bronze-acc);vertical-align:1px}
.chip-part{background:#FFF8EA;border-color:var(--gold);color:#5C4C22}
.chip-paid{background:#EEF3EC;border-color:#CFDCC9;color:#3B4D33}
.chip-none,.chip-credit{background:#F1EFEA;border-color:#E0DDD8;color:#4E4B45}
.year{margin-top:6px}
.year summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;cursor:pointer;list-style:none}
.year summary::-webkit-details-marker{display:none}
/* The sign has empty alternative text, so screen readers say the year and "collapsed", not "plus" (browsers without
   the "/ ''" syntax keep the first content). */
.year summary::after{content:'+';content:'+' / '';font-size:20px;line-height:1;color:var(--bronze-acc)}
.year[open] summary::after{content:'−';content:'−' / ''}
.year-h{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-acc)}
/* Notifications (docs/app-notifications-spec.md 3.1), shown by the page script in the installed app only: a slim row
   under the month's invoice until they're on or put off with Not now, then one line above the family code. On phones
   the buttons wrap under the text, on the right. */
.notify-offer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:16px;padding:10px 12px 10px 16px;background:#fff;border:1px solid var(--line);border-left:2px solid var(--bronze)}
.list+.notify-offer{margin-top:24px}
.notify-offer[hidden],.notify-offer [hidden],.notify-line [hidden]{display:none}
.notify-bell{flex:none;width:20px;height:20px;fill:none;stroke:var(--bronze-acc);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.notify-text{flex:1 1 200px;color:var(--note);font-size:14.5px;line-height:1.45}
.notify-act{display:flex;align-items:center;margin-left:auto}
.notify-offer .notify-later{padding:0 16px;color:var(--text-sec);text-decoration:none}
.btn-small{min-height:40px;padding:8px 18px;font-size:14px}
.notify-msg{color:var(--error);font-size:14px}
.notify-offer .notify-msg{flex-basis:100%}
.notify-off-msg{display:block;margin-top:6px}
.notify-msg:empty{display:none}
.notify-line{margin-top:32px;font-size:14px;color:var(--text-sec)}
.notify-line+.code-line{margin-top:4px}
.code-line{margin-top:32px;font-size:14px;color:var(--text-sec)}
.code{color:var(--text);font-weight:600;letter-spacing:.06em;white-space:nowrap}
.code-copy{white-space:nowrap}

/* "Open your invoices" */
.notice{margin-bottom:16px;padding:12px 14px;border-left:3px solid var(--bronze);background:var(--tint);font-size:15px}
.notice.error{border-left-color:var(--error);background:var(--error-bg);color:var(--error)}
.notice.error a{color:inherit;white-space:nowrap}
.code-form{margin-top:18px}
.code-form label{display:block;margin-bottom:6px;font-size:14px;font-weight:600}
.code-form input{display:block;width:100%;min-height:52px;padding:10px 14px;border:1px solid #CFC9BF;border-radius:0;background:#fff;color:var(--text);font:500 clamp(16px,5vw,21px)/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.code-form input:focus{border-color:var(--bronze)}
.code-form input[aria-invalid=true]{border-color:var(--error)}
.hint{margin-top:6px;font-size:13px;color:var(--text-sec)}
.code-form .btn{margin-top:16px}

/* One invoice: the summary, then (or beside it from 1024 px) the phone layout or the Letter page, on a darker "desk"
   so the paper stands out */
.page-view{background:var(--desk)}
.page-view .fam-main{max-width:1320px;margin-top:0}
.view-back{margin:10px 0 8px}
.back{display:inline-flex;align-items:center;min-height:44px;font-weight:500;text-decoration:none}
.view-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.view-sum{background:#fff;border-top:2px solid var(--bronze);box-shadow:var(--lift);padding:22px 20px}
.sum-state{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.updated{font-size:13px;color:var(--text-sec)}
.sum-label{margin-top:18px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-acc)}
.sum-amount{margin-top:6px;font-family:var(--serif);font-weight:500;font-size:56px;line-height:1;letter-spacing:-.005em;font-variant-numeric:lining-nums}
.sum-due{margin-top:10px;font-size:16px;font-weight:500}
.sum-late{margin-top:4px;font-size:14px;color:var(--text-sec)}
.sum-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sum-actions .btn{flex:1 1 auto}
.sum-actions #pdf{flex-grow:2}
.pdf-status{margin-top:10px;font-size:14px;color:var(--text-sec)}
.pdf-status:empty{display:none}
.pdf-status.error{color:var(--error)}
.phone-view{box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 30px -20px rgba(0,0,0,.25)}
.see-page{background:#fff;border-top:1px solid var(--hairline);padding:4px 18px}
.see-page a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.printed{display:none}
.printed:target{display:block}
.sheet-wrap{overflow-x:auto;padding:12px 0 24px}
.sheet-box{position:relative;width:816px;height:1056px;margin:0 auto}
.sheet-scale{position:absolute;top:0;left:0;transform-origin:0 0;box-shadow:0 1px 2px rgba(0,0,0,.1),0 22px 40px -20px rgba(40,32,18,.32)}
.fit-probe{position:absolute;top:0;left:-10000px;visibility:hidden;pointer-events:none}
/* Phones: Print gives way to Share (family.js), which hands the PDF to the phone's own share sheet. */
@media(max-width:767px){.sum-actions #print{display:none}}
@media(min-width:768px){
.page-view .fam-main{padding:0 32px}
.phone-view{display:none}
.printed{display:block}
/* Room for the paper's shadow, which the scrolling box would cut off (scaleLetter subtracts the padding). */
.sheet-wrap{margin:-24px -24px -48px;padding:24px 24px 48px}
.view-sum{padding:26px 28px}
}
/* 768–1023 px: the summary across the top */
@media(min-width:768px) and (max-width:1023px){.view-grid{gap:28px}}
/* From 1024 px: the Letter page at the left, the summary beside it, staying in view */
@media(min-width:1024px){
.view-back{margin:14px 0 12px}
.view-grid{grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.view-sum{grid-column:2;grid-row:1;position:sticky;top:24px}
.doc{grid-column:1;grid-row:1}
}
@media(min-width:1200px){.view-grid{grid-template-columns:minmax(0,1fr) 384px;gap:48px}}

/* Footer */
.fam-foot{max-width:760px;margin:48px auto 0;padding:22px 16px 40px;border-top:1px solid var(--line);font-size:14px;color:var(--text-sec)}
.page-view .fam-foot{max-width:1320px}
@media(min-width:768px){.page-view .fam-foot{padding-left:32px;padding-right:32px}}
.fam-foot p+p,.fam-foot p+.foot-links{margin-top:6px}
.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.foot-links a,.linkish{display:inline-flex;align-items:center;min-height:44px}
.foot-links form{margin:0}
.linkish{padding:0;border:0;background:none;color:var(--bronze-acc);font:inherit;text-decoration:underline;cursor:pointer}
.linkish[disabled]{color:var(--text-sec);cursor:not-allowed}

/* The owner's preview (4.2) */
.preview-band{position:relative;z-index:2;background:#FFF8EA;border-bottom:1px solid var(--gold);padding:10px 16px;font-size:14px;color:#4B3F1F;text-align:center}

/* The family app (site/family-app.webmanifest): the Calendar | Library | Invoices tab bar, only inside the installed
   app, as in the calendar and the library. The owner's preview never shows it. */
.app-tabs{display:none}
@media(display-mode:standalone){.app-tabs{display:flex;position:fixed;z-index:45;left:0;right:0;bottom:0;background:var(--bg-dark);border-top:1px solid rgba(184,155,114,.24);padding:6px 0 calc(6px + env(safe-area-inset-bottom))}.app-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:50px;font-size:11px;line-height:1.2;font-weight:500;color:rgba(242,230,207,.55);text-decoration:none}.app-tabs a[aria-current]{color:var(--gold)}.app-tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}}
/* Narrower than 960px the app's name is a black bar at the top, the same 64px bar as the calendar's and the
   library's (owner, 2026-10-31): the tab bar's own name, held at the top, in place of the band's wordmark, and the
   band (its photo too) starts below it. */
@media(display-mode:standalone) and (max-width:959px){body:not(.preview){padding-top:64px}body:not(.preview) .app-tabs .app-brand{display:flex;align-items:center;position:fixed;top:0;left:0;right:0;height:64px;padding:0 16px;background:var(--bg-dark);border-bottom:1px solid rgba(184,155,114,.24);font-family:var(--serif);font-size:22px;line-height:1;color:var(--ivory)}body:not(.preview) .band .wordmark{display:none}body:not(.preview) .band{padding-top:40px}body:not(.preview) .band .eyebrow{margin-top:0}.page-view:not(.preview) .band{padding-top:0}.page-view:not(.preview) .band-in{grid-template-columns:minmax(0,1fr)}}
/* On phones the header is the calendar's (owner, 2026-10-31: the same on all three pages): a 5:2 photo strip under
   the top bar instead of the photo behind the text, then the eyebrow and a 46px title at the same heights, and a
   bronze rule. On the home the family's students line stands in for the rule (owner: the names and lesson lengths
   were missed), and the card follows it at the band's own spacing, a line lower than the calendar's. One invoice
   keeps its slim title bar. */
@media(display-mode:standalone) and (max-width:599px){body:not(.preview):not(.page-view) .band{padding-top:calc(40vw - 14px)}body:not(.preview):not(.page-view) .band::before{bottom:auto;width:100%;height:40vw;background:#1a1918 url(../c984ce3684b0/invoice-hero.jpg) 60% 44%/cover no-repeat}body:not(.preview):not(.page-view) .band::after{bottom:auto;height:40vw;background:linear-gradient(180deg,transparent 45%,rgba(11,11,12,.75) 85%,var(--bg-dark))}body:not(.preview):not(.page-view) .band .eyebrow{line-height:14px}body:not(.preview):not(.page-view) .band h1{margin-top:16px;font-size:46px;line-height:.98;letter-spacing:-.02em}body:not(.preview):not(.page-view) .band-sub{margin-top:10px}body:not(.preview):not(.page-view) .band-in:not(:has(.band-sub))::after{content:'';display:block;width:64px;height:2px;margin:20px 0 -4px;background:var(--bronze)}}
/* In a window 960px or wider it is the app's black top bar instead, as in the calendar and the library (owner,
   2026-10-31), so the band's own wordmark goes. Not in the preview, which shows in the Studio admin app. */
.app-tabs .app-brand,.app-tabs .app-site{display:none}
@media(display-mode:standalone) and (min-width:960px){body:not(.preview){padding:68px 0 0}.app-tabs{display:grid;grid-template-columns:minmax(max-content,1fr) repeat(3,auto) minmax(max-content,1fr);column-gap:44px;align-items:center;top:0;bottom:auto;height:68px;padding:0 max(48px,calc(50% - 552px));background:var(--bg-dark);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0;border-bottom:1px solid rgba(184,155,114,.24)}.app-tabs .app-brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:23px;line-height:1;color:var(--ivory);white-space:nowrap}.app-tabs .app-brand::before{content:'M';content:'M' / '';display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--bronze);border-radius:50%;font-size:16px;color:var(--bronze)}.app-tabs a{position:relative;flex-direction:row;height:68px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(242,230,207,.55);transition:color .2s}.app-tabs a:hover{color:var(--ivory)}.app-tabs a[aria-current]{color:var(--gold)}.app-tabs a[aria-current]::after{content:'';position:absolute;left:0;right:.2em;bottom:20px;height:1px;background:var(--bronze)}.app-tabs svg{display:none}.app-tabs .app-site{display:flex;justify-self:end;gap:6px;font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(242,230,207,.62)}body:not(.preview) .band .wordmark{display:none}body:not(.preview) .band{padding-top:40px}body:not(.preview) .band .eyebrow{margin-top:0}.page-view:not(.preview) .band{padding-top:0}.page-view:not(.preview) .band-in{grid-template-columns:minmax(0,1fr)}}
.preview .app-tabs{display:none!important}

/* Print: the Letter page alone, one page, no margins (5.3); on the home, that of the month's invoice (14.12) */
@media print{
@page{size:letter;margin:0}
html,body{background:#fff!important;margin:0;padding:0!important}
.with-letter .band,.with-letter .fam-foot,.with-letter .app-tabs,.with-letter .preview-band,.with-letter .fam-main>:not(.home-letter){display:none!important}
.with-letter .fam-main{margin:0!important;padding:0!important;max-width:none!important}
.with-letter .home-letter{display:block!important}
.page-view .band,.page-view .fam-foot,.page-view .app-tabs,.page-view .preview-band,.page-view .view-back,.page-view .view-sum,.page-view .phone-view{display:none!important}
.page-view .fam-main,.page-view .view,.page-view .view-grid,.page-view .doc{display:block!important;margin:0!important;padding:0!important;max-width:none!important}
.page-view .printed{display:block!important;margin:0}
.page-view .sheet-wrap{margin:0;padding:0;background:none;overflow:visible}
.page-view .sheet-box{width:816px!important;height:1056px!important;margin:0}
.page-view .sheet-scale{transform:none!important;box-shadow:none}
.inv{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* The family app's front door, /invoices/app (owner, 2026-11-02): step 1, the family code; step 2, how to put the app on
   this device. Two quiet steps over the card's heading, the current one in bronze; the install steps numbered like the
   calendar's old offer. Inside the installed app no tab bar until the device knows the family (the top bar stays), and
   step 2 is never shown there: the page script goes on to the calendar. */
.door-progress{display:flex;gap:20px;margin:0 0 14px;padding:0;list-style:none;counter-reset:door;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-sec)}
.door-progress li{counter-increment:door;display:flex;align-items:center;gap:8px}
.door-progress li::before{content:counter(door);display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid #CFC9BF;border-radius:50%;font-size:11px;letter-spacing:0}
.door-progress [aria-current]{color:var(--bronze-acc)}
.door-progress [aria-current]::before{border-color:var(--bronze-acc);background:var(--bronze-acc);color:#fff}
.door-progress .done::before{content:'✓';content:'✓' / '';border-color:var(--bronze);color:var(--bronze-acc)}
.card .door-h{margin-bottom:12px;font-size:30px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text)}
.door-h{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.1;margin-bottom:12px}
.door-text{color:var(--note)}
.door .code-form .btn{width:100%}
@media(min-width:600px){.door .code-form .btn{width:auto;min-width:200px}}
.door-steps{margin:16px 0 0;padding:0;list-style:none;counter-reset:step;border-top:1px solid var(--line)}
.install [hidden]{display:none}
.door-steps li{counter-increment:step;display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.45}
.door-steps li:last-child{border-bottom:0}
.door-steps li::before{content:counter(step);flex-shrink:0;width:24px;height:24px;border-radius:50%;background:rgba(184,155,114,.16);color:var(--bronze-acc);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.door-steps svg{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin:0 2px;fill:none;stroke:var(--bronze-acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.install-act{margin-top:16px}
.notice.done{margin:16px 0 0;border-left-color:#8FA585;background:#EEF3EC;color:#3B4D33}
.door-code{margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.door-aside{margin-top:20px;font-size:14px;color:var(--text-sec)}
@media(display-mode:standalone){.page-app .app-tabs a{display:none!important}.page-app .door-aside{display:none}.page-app.known .fam-main,.page-app.known .fam-foot{visibility:hidden}}
@media(display-mode:standalone) and (max-width:959px){.page-app .app-tabs{padding:0;border-top:0;background:none}body.page-app{padding-bottom:0}}