/* Shared client-portal layout. Colours, fonts and radii come from the brand token file
   (brand-efiling.css / brand-clearlayer.css), which is loaded after this file. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-wrap:break-word;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.015em;font-weight:var(--head-w,700);text-wrap:balance}
h1{font-size:clamp(1.625rem,3vw,2.25rem)}
h2{font-size:1.25rem}h3{font-size:1.0625rem}
p,ul,ol,dl{margin:0}
a{color:var(--link);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
code,.mono{font-family:var(--mono);font-size:.92em}
img,svg{max-width:100%}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-200px;z-index:100;background:var(--btn-bg);color:var(--btn-ink);padding:10px 16px;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.skip:focus{top:8px}
.wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:16px}
@media (min-width:600px){.wrap{padding-inline:24px}}
.muted{color:var(--mute)}
.fine{font-size:.875rem;color:var(--mute)}
.lede-sm{margin-top:8px;max-width:46em}
.pre{white-space:normal}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* header */
.p-header{position:sticky;top:0;z-index:50;background:var(--header-bg);border-bottom:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.p-bar{display:flex;align-items:center;gap:16px;min-height:68px;position:relative}
.p-logo{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px;margin-right:auto;flex-wrap:wrap;row-gap:2px}
.p-tag{white-space:nowrap}
.p-back{font-size:.9375rem;color:var(--mute);min-height:44px;display:inline-flex;align-items:center}
.p-nav{display:flex;align-items:center;gap:16px}
.p-nav ul{display:flex;gap:4px;list-style:none;padding:0}
.p-nav ul a{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;color:var(--mute);text-decoration:none;font-weight:500;border-radius:var(--r-sm)}
.p-nav ul a:hover{color:var(--ink);background:var(--surface-2)}
.p-nav ul a[aria-current]{color:var(--ink);background:var(--surface-2)}
.count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--info);color:var(--surface);font-size:.75rem;font-weight:700}
.p-signout{display:flex;align-items:center;gap:10px}
.p-who{font-size:.875rem;color:var(--mute);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-menu-btn{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:var(--btn-bw) solid var(--btn2-border);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.p-menu-btn .bars{width:16px;height:12px;position:relative;display:block}
.p-menu-btn .bars::before,.p-menu-btn .bars::after,.p-menu-btn .bars i{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
.p-menu-btn .bars::before{top:0}.p-menu-btn .bars i{top:5px}.p-menu-btn .bars::after{bottom:0}
.p-menu-btn[aria-expanded="true"] .bars i{opacity:0}
.p-menu-btn[aria-expanded="true"] .bars::before{top:5px;transform:rotate(45deg)}
.p-menu-btn[aria-expanded="true"] .bars::after{bottom:5px;transform:rotate(-45deg)}
@media (max-width:1023.98px){
  .js .p-menu-btn{display:inline-flex}
  .p-nav{flex-direction:column;align-items:stretch;gap:12px;width:100%}
  .js .p-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:8px 16px 16px;width:auto}
  .js .p-nav.open{display:flex}
  .no-js .p-bar{flex-wrap:wrap;padding-block:8px}
  .p-nav ul{flex-direction:column;gap:0}
  .p-nav ul a{border-radius:0;border-bottom:1px solid var(--line);font-size:1.0625rem;color:var(--ink);min-height:48px}
  .p-signout{justify-content:space-between}
  .p-who{max-width:none}
}
@media (max-width:479.98px){.p-tag{display:none}}

/* main */
.p-main{flex:1;padding-block:28px 56px}
.p-main:focus{outline:none}
.crumbs{font-size:.9375rem;color:var(--mute);margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.page-head>div:first-child{min-width:0;flex:1 1 320px}
.page-head .eyebrow{margin-bottom:6px;display:block}
.h1-sub{display:block;font-size:.55em;font-weight:500;color:var(--mute);margin-top:6px;letter-spacing:0}
.head-status{display:flex;gap:8px;flex-wrap:wrap}
.head-status .badge{font-size:.9375rem;padding:6px 12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--btn-h);padding:10px 18px;border-radius:var(--r-sm);border:var(--btn-bw) solid transparent;font:inherit;font-weight:700;font-size:.9375rem;line-height:1.2;text-decoration:none;cursor:pointer;text-align:center}
.btn-primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-border)}
.btn-primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn-secondary{background:var(--btn2-bg);color:var(--btn2-ink);border-color:var(--btn2-border)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-quiet{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.btn-quiet:hover{border-color:var(--line-strong)}
.btn-danger{background:var(--bad);color:var(--surface);border-color:var(--bad)}
.btn-sm{min-height:40px;padding:7px 14px;font-size:.875rem}
.btn-block{width:100%}
.inline-form{display:inline}

/* cards & layout */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.card+.card,.col-main>.card+.card,.col-side>.card+.card{margin-top:16px}
.card-flush{padding:0;overflow:hidden}
.card-title{margin-bottom:14px}
.pad{padding:20px 20px 0}
.card-flush>.empty-line.pad{padding-bottom:20px}
.layout-2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:960px){.layout-2{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:24px}.layout-even{grid-template-columns:1fr 1fr}}
.layout-2>.card+.card{margin-top:0}
.col-main,.col-side{min-width:0}
.sub-h{font-size:.9375rem;margin:16px 0 6px}
.empty{text-align:center;padding:40px 20px}
.empty h2{margin-bottom:8px}.empty p+p{margin-top:16px}
.empty-line{padding:4px 0 12px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;list-style:none;padding:0;margin-bottom:24px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);position:relative}
.stat>a,.stat>span:first-child{display:block}
.stat>a{color:inherit;text-decoration:none;padding:16px;height:100%}
.stat>a:hover .stat-l{text-decoration:underline}
.stat:not(:has(a)){padding:16px}
.stat-n{display:block;font-size:1.75rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-l{display:block;font-size:.875rem;color:var(--mute);margin-top:4px}
.stat-warn{border-left:4px solid var(--warn)}.stat-info{border-left:4px solid var(--info)}.stat-bad{border-left:4px solid var(--bad)}.stat-ok{border-left:4px solid var(--ok)}

/* badges */
.badge{display:inline-flex;align-items:center;font-size:.8125rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;line-height:1.3;border:1px solid transparent}
.b-info{background:var(--info-soft);color:var(--info)}
.b-warn{background:var(--warn-soft);color:var(--warn)}
.b-ok{background:var(--ok-soft);color:var(--ok)}
.b-bad{background:var(--bad-soft);color:var(--bad)}
.b-acc{background:var(--acc-soft);color:var(--ink);border-color:var(--acc)}
.b-neutral{background:var(--neutral-soft);color:var(--neutral);border-color:var(--line)}

/* responsive tables */
.rtable{width:100%;border-collapse:collapse;font-size:.9375rem}
.rtable th{text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line-strong);white-space:nowrap}
.rtable td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.rtable tr:last-child td{border-bottom:0}
.rtable th:first-child,.rtable td:first-child{padding-left:20px}
.rtable .num{text-align:right;font-variant-numeric:tabular-nums}
.row-link{font-weight:600;text-decoration:none;color:var(--ink)}
.row-link .mono{color:var(--link);text-decoration:underline;text-underline-offset:.18em}
.row-link:hover .row-title{text-decoration:underline}
.row-title{display:block;margin-top:2px}
.cell-muted{color:var(--mute)}
.cell-sub{display:block;font-size:.8125rem;color:var(--mute);margin-top:2px}
@media (max-width:759.98px){
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .rtable tr{padding:14px 16px;border-bottom:1px solid var(--line)}
  .rtable tr:last-child{border-bottom:0}
  .rtable td,.rtable td:first-child{padding:3px 0;border:0}
  .rtable td[data-label]::before{content:attr(data-label);display:block;font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:6px}
  .rtable td:first-child::before{display:none}
  .rtable .num{text-align:left}
  .rtable tfoot tr{display:flex;justify-content:space-between}
  .rtable tfoot th,.rtable tfoot td{display:block;width:auto;padding:6px 0}
}

/* forms */
.form{display:grid;gap:16px}
.field{display:grid;gap:6px;margin:0;min-width:0}
.field label,.field legend{font-weight:700;font-size:.9375rem}
.opt{font-weight:400;color:var(--mute)}
.hint{font-size:.875rem;color:var(--mute)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=date],input:not([type]),select,textarea{
  width:100%;font:inherit;font-size:1rem;min-height:44px;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.brand-clearlayer input[type=text],.brand-clearlayer input[type=email],.brand-clearlayer input[type=password],.brand-clearlayer input[type=search],.brand-clearlayer input[type=tel],.brand-clearlayer input[type=date],.brand-clearlayer input:not([type]),.brand-clearlayer select,.brand-clearlayer textarea{border:2px solid var(--mute)}
input[readonly]{background:var(--surface-2);color:var(--mute)}
textarea{min-height:96px;resize:vertical}
input[type=file]{font:inherit;font-size:.9375rem;max-width:100%;padding:12px;border:2px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--surface-2);width:100%;color:var(--ink)}
input[type=file]::file-selector-button{font:inherit;font-weight:700;margin-right:12px;padding:8px 14px;border-radius:var(--r-sm);border:var(--btn-bw) solid var(--btn2-border);background:var(--surface);color:var(--ink);cursor:pointer}
.field-num input{max-width:14rem}
.has-error input,.has-error select,.has-error textarea,input[aria-invalid=true]{border-color:var(--bad)!important;border-width:2px}
.err-text{color:var(--bad);font-weight:700;font-size:.9375rem}
.has-error{border-left:4px solid var(--bad);padding-left:12px}
fieldset.field{border:0;padding:0}
fieldset.field legend{padding:0;margin-bottom:6px}
.radio-row,.check-row{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.radio-row input,.check-row input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--acc)}
.radio-row label,.check-row label{font-weight:400;cursor:pointer}
.err-summary{border:3px solid var(--bad);border-radius:var(--r);padding:16px 20px;margin-bottom:20px;background:var(--surface)}
.err-summary h2{font-size:1.125rem;margin-bottom:8px;color:var(--bad)}
.err-summary ul{padding-left:20px}
.err-summary a{color:var(--bad);font-weight:700}
.form-inline{grid-template-columns:1fr}
@media (min-width:700px){.form-inline{grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto;align-items:end}}
.filters{display:grid;gap:12px;margin-bottom:12px}
@media (min-width:760px){.filters{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}}
.filters .field:first-child{grid-column:1/-1}
@media (min-width:1024px){.filters .field:first-child{grid-column:auto}}
.filters-btns{display:flex;gap:8px}
.result-count{margin:8px 0 12px;font-size:.9375rem}
.pw-strength{font-size:.875rem;color:var(--mute);min-height:1.3em;margin-top:-8px}
.pw-strength[data-level="weak"]{color:var(--bad)}.pw-strength[data-level="ok"]{color:var(--warn)}.pw-strength[data-level="strong"]{color:var(--ok)}

/* notices */
.flash{border-radius:var(--r);padding:12px 16px;margin-bottom:12px;border:1px solid;font-weight:500}
.flash-success{background:var(--ok-soft);color:var(--ok);border-color:currentColor}
.flash-error{background:var(--bad-soft);color:var(--bad);border-color:currentColor}
.notice{border-radius:var(--r-sm);padding:12px 14px;font-size:.9375rem;margin-top:16px;border:1px solid var(--line)}
.notice p+p{margin-top:6px}
.notice-info{background:var(--surface-2)}
.notice-ok{background:var(--ok-soft);border-color:var(--ok)}
.notice-warn{background:var(--warn-soft);border-color:var(--warn)}
.next-step{border-radius:var(--r);padding:14px 18px;margin-bottom:20px;background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--info);font-weight:500}
.next-waiting_client{border-left-color:var(--warn);background:var(--warn-soft)}
.next-delivered{border-left-color:var(--ok)}
.next-cancelled{border-left-color:var(--bad)}

/* auth */
.auth{display:grid;place-items:center;padding-block:16px}
.auth-card{width:100%;max-width:460px;padding:28px}
.auth-card h1{margin:6px 0 8px}
.auth-card .form{margin-top:20px}
.auth-card .eyebrow{display:block}
.auth-links{margin-top:14px;font-size:.9375rem}
.actions{margin-top:20px}

/* service picker */
.svc-list{list-style:none;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-bottom:20px}
.svc-card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.svc-card:hover{border-color:var(--acc)}
.svc-card:focus-within{border-color:var(--acc)}
.svc-card h2 a{color:var(--ink);text-decoration:none}
.svc-card h2 a::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.svc-card h2 a:focus-visible{outline:none;box-shadow:none}
.svc-card:has(a:focus-visible){outline:3px solid var(--acc);outline-offset:2px}
.svc-price{font-weight:700;font-size:1.0625rem;color:var(--acc)}
.brand-clearlayer .svc-price{color:var(--ink)}
.svc-sum{color:var(--mute);font-size:.9375rem;flex:1}
.svc-meta{font-size:.875rem;padding-top:10px;border-top:1px solid var(--line)}
.svc-meta dt{font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.svc-meta dd{margin:2px 0 0}
.svc-go{align-self:flex-start;margin-top:6px}
.svc-free{border-color:var(--ok);border-width:2px}
.svc-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px;padding:12px 14px;background:var(--surface-2);border-radius:var(--r-sm)}
.svc-facts dt{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.svc-facts dd{margin:2px 0 0;font-weight:600}
.order-form .card .field+.field,.order-form .card .field+fieldset,.order-form .card fieldset+fieldset{margin-top:18px}
.estimate-card{position:sticky;top:88px}
.estimate{margin:0}
.estimate-amt{display:block;font-size:1.875rem;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums}
.estimate-label{font-size:.875rem;font-weight:700;color:var(--mute);margin:6px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.estimate-card .fine{margin-bottom:10px}
.estimate-card .btn{margin-top:6px}
.side-note{margin-top:12px}
.file-picked{list-style:none;padding:0;font-size:.875rem;color:var(--mute);display:grid;gap:2px}
.file-picked:empty{display:none}

/* thread */
.thread,.notes{list-style:none;padding:0;display:grid;gap:12px;margin-bottom:16px}
.msg,.notes li{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface-2);max-width:92%}
.msg-mine{margin-left:auto;background:var(--acc-soft);border-color:transparent}
.msg-head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:.8125rem;color:var(--mute);margin-bottom:4px}
.msg-who{font-weight:700;color:var(--ink);font-size:.875rem}
.msg-body{white-space:normal}
.msg-form{border-top:1px solid var(--line);padding-top:16px}
.card-internal{border-style:dashed;background:var(--surface-2)}
.card-internal .notes li{background:var(--surface);max-width:none;margin-top:12px}

/* files */
.files-h{font-size:.9375rem;margin:4px 0 8px}
.files-h~.files-h{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.files-h-delivered{color:var(--ok)}
.file-list{list-style:none;padding:0;display:grid;gap:8px}
.file{display:flex;gap:12px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm)}
.file-ico{flex:none;width:44px;height:44px;display:grid;place-items:center;font-family:var(--mono);font-size:.6875rem;font-weight:700;border-radius:6px;background:var(--surface-2);color:var(--mute);border:1px solid var(--line)}
.file-main{min-width:0;display:grid}
.file-name{font-weight:600;overflow-wrap:anywhere}
.file-meta{font-size:.8125rem;color:var(--mute)}
.file-deleted{background:var(--surface-2)}
.file-deleted .file-name{text-decoration:line-through;color:var(--mute)}
.upload-form{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

/* details list, timeline */
.dl{display:grid;gap:10px}
.dl>div{display:grid;gap:2px}
.dl dt{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.dl dd{margin:0}
.dd-fine{display:block;font-size:.8125rem;color:var(--mute)}
.timeline{list-style:none;padding:0 0 0 18px;border-left:2px solid var(--line);display:grid;gap:14px;margin-left:6px}
.tl-item{position:relative;display:grid;gap:2px;font-size:.9375rem}
.tl-item::before{content:"";position:absolute;left:-25px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong)}
.tl-status::before{border-color:var(--info)}
.tl-s-delivered::before{background:var(--ok);border-color:var(--ok)}
.tl-s-cancelled::before{border-color:var(--bad)}
.tl-retention::before{border-color:var(--warn)}
.tl-text{font-weight:600}
.tl-note{color:var(--ink);font-size:.875rem;font-style:italic}
.tl-item time,.activity time{font-size:.8125rem;color:var(--mute)}
.activity{list-style:none;padding:0;display:grid;gap:10px;font-size:.9375rem;margin-bottom:14px}
.activity time{display:block}
.inv-mini{list-style:none;padding:0;display:grid;gap:8px;margin-bottom:14px}
.inv-mini li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.inv-mini-amt{font-variant-numeric:tabular-nums;margin-left:auto}
.action-stack{display:grid;gap:10px;margin:16px 0 12px}
.action-stack .btn,.action-stack form .btn{width:100%}
.paid-form{padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);gap:10px}

/* confirm (details) */
details.confirm>summary{list-style:none;width:fit-content}
details.confirm>summary::-webkit-details-marker{display:none}
details.confirm[open]>summary{margin-bottom:8px}
.confirm-box{display:grid;gap:10px;padding:12px;border:2px solid var(--bad);border-radius:var(--r-sm);background:var(--bad-soft);font-size:.9375rem;min-width:min(260px,100%)}
.confirm-box .btn{justify-self:start}

/* invoice editor */
.lines-edit{width:100%;border-collapse:collapse}
.lines-edit th{text-align:left;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:6px}
.lines-edit td{padding:4px 6px;vertical-align:middle}
.lines-edit .in-qty{max-width:6rem}.lines-edit .in-money{max-width:9rem}
.lines-edit .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.lines-edit tfoot th{text-align:right;padding-top:12px}
@media (max-width:759.98px){
  .lines-edit,.lines-edit tbody,.lines-edit tr,.lines-edit td{display:block;width:100%}
  .lines-edit thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .lines-edit tbody tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .lines-edit td[data-label]::before{content:attr(data-label);display:block;font-size:.75rem;font-weight:700;color:var(--mute)}
  .lines-edit .num{text-align:left}
  .lines-edit .in-qty,.lines-edit .in-money{max-width:none}
  .lines-edit tfoot tr{display:flex;justify-content:space-between}
}
.mail-log{list-style:none;padding:0;display:grid;gap:12px}
.mail-body{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:.8125rem;background:var(--surface-2);padding:12px;border-radius:var(--r-sm)}

/* invoice document */
.inv-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.inv-actions .crumbs{margin:0}
.inv-doc{position:relative;background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);border-radius:6px;box-shadow:var(--shadow);padding:32px;max-width:860px;margin-inline:auto}
.inv-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.inv-logo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.inv-biz{font-size:.9375rem;color:var(--mute)}
.inv-biz strong{color:var(--ink)}
.inv-title{text-align:right}
.inv-title h1{font-size:1.75rem}
.inv-no{font-size:1rem;margin-top:4px}
.inv-stamp{display:inline-block;margin-top:10px;font-family:var(--mono);font-weight:700;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border:2px solid currentColor;border-radius:4px}
.inv-stamp-unpaid{color:var(--warn)}.inv-stamp-paid{color:var(--ok)}.inv-stamp-quote,.inv-stamp-draft{color:var(--info)}.inv-stamp-void{color:var(--mute)}
.inv-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;padding:20px 0}
.inv-meta h2,.inv-notes h2{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:6px;font-family:var(--font)}
.inv-dates{display:grid;grid-template-columns:auto auto;gap:4px 16px;font-size:.9375rem;align-content:start}
.inv-dates>div{display:contents}
.inv-dates dt{color:var(--mute)}
.inv-dates dd{margin:0;text-align:right;font-weight:600}
.inv-items{width:100%;border-collapse:collapse;font-size:.9375rem}
.inv-items th{text-align:left;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);border-bottom:2px solid var(--ink);padding:8px 6px}
.inv-items td{padding:10px 6px;border-bottom:1px solid var(--line)}
.inv-items .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.inv-items tfoot th{text-align:right;font-size:.9375rem;text-transform:none;letter-spacing:0;color:var(--ink);border:0;padding-top:14px}
.inv-total{font-size:1.25rem;font-weight:700;padding-top:14px!important;border:0!important}
.inv-pay{margin-top:20px;padding:14px 16px;border-radius:var(--r-sm);background:var(--surface-2);border-left:4px solid var(--info)}
.inv-pay-unpaid{border-left-color:var(--warn);background:var(--warn-soft)}
.inv-pay-paid{border-left-color:var(--ok);background:var(--ok-soft)}
.inv-notes{margin-top:20px}
.inv-foot{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--mute);display:grid;gap:4px}
@media (max-width:599.98px){
  .inv-doc{padding:20px 16px}
  .inv-title{text-align:left}
  .inv-items thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .inv-items,.inv-items tbody,.inv-items tr,.inv-items td{display:block;width:100%}
  .inv-items tbody tr{padding:8px 0;border-bottom:1px solid var(--line)}
  .inv-items td{border:0;padding:2px 0;display:flex;justify-content:space-between;gap:12px}
  .inv-items td::before{content:attr(data-label);color:var(--mute);font-size:.8125rem}
  .inv-items td:first-child{display:block;font-weight:600}
  .inv-items td:first-child::before{display:none}
  .inv-items tfoot tr{display:flex;justify-content:space-between;align-items:baseline}
  .inv-items tfoot th,.inv-items tfoot td{display:block;width:auto}
}

/* footer */
.p-footer{background:var(--foot-bg);color:var(--foot-mute);border-top:1px solid var(--foot-line);font-size:.9375rem}
.p-foot{display:grid;gap:16px;padding-block:28px}
@media (min-width:800px){.p-foot{grid-template-columns:1fr auto}}
.p-foot-logo{display:flex;align-items:center;gap:10px;color:var(--foot-ink);margin-bottom:6px}
.p-foot-links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;align-content:start}
.p-foot-links a{color:var(--foot-link);display:inline-block;padding:6px 0}
.p-legal{grid-column:1/-1;font-size:.8125rem;border-top:1px solid var(--foot-line);padding-top:14px}

/* print: only the invoice */
@media print{
  :root{--paper:#fff;--ink:#000;--mute:#333;--line:#ccc;--line-strong:#999;--surface-2:#f4f4f4;--warn-soft:#fff;--ok-soft:#fff;color-scheme:light}
  body{background:#fff;color:#000;display:block}
  .p-header,.p-footer,.no-print,.skip,.flash{display:none!important}
  .p-main{padding:0}
  .inv-doc{box-shadow:none;border:0;padding:0;max-width:none}
  .inv-pay{border:1px solid #999}
  a{color:#000;text-decoration:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}