/* The quote and invoice maker. Builds on the tokens, buttons and tiles in hub.css. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[hidden]{display:none!important}
main.inv{padding-bottom:20px}

.inv-layout{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:24px;align-items:start}
.inv-panel{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px;margin:0 0 16px;min-width:0}
.inv-panel h2{font-size:18px;font-weight:750;letter-spacing:-.02em;color:var(--navy);margin-bottom:14px}
.inv-type .tool-tiles{grid-template-columns:repeat(2,minmax(0,1fr));max-width:300px}

.inv-field{margin-bottom:14px;min-width:0}
.inv-field label{display:block;font-size:13.5px;font-weight:650;color:var(--navy);margin-bottom:5px}
.inv-optional{font-weight:500;color:var(--muted)}
.inv-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.inv-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.inv input:not([type=radio]):not([type=checkbox]),.inv textarea{width:100%;font:inherit;font-size:16px;color:var(--navy);background:var(--white);border:1px solid #b9c4d2;border-radius:9px;padding:10px 11px}
.inv textarea{display:block;resize:vertical;line-height:1.45}
.inv input:focus-visible,.inv textarea:focus-visible{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--navy)}
.inv-amount{display:flex;align-items:center;border:1px solid #b9c4d2;border-radius:9px;background:var(--white)}
.inv-amount:focus-within{outline:3px solid var(--gold);outline-offset:1px}
.inv-amount>span{flex:none;font-weight:600;color:var(--muted);padding-right:12px}
.inv .inv-amount input:not([type=radio]):not([type=checkbox]){border:0;background:none;outline:0;min-width:0}
.inv-help{font-size:13.5px;line-height:1.55;color:var(--muted);margin-top:8px}
.inv-help a{color:var(--green);font-weight:600}
.inv-check{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer}
.inv-check input{width:18px;height:18px;accent-color:var(--green);flex:none}
.inv-options{align-items:end;margin-top:16px}
.inv-options .inv-check{margin-bottom:24px}

.inv-item{display:grid;grid-template-columns:minmax(0,1fr) 64px 112px 34px;gap:8px;align-items:end;margin-bottom:10px}
.inv-item label{min-width:0}
.inv-item label span{display:block;font-size:12px;font-weight:650;color:var(--muted);margin-bottom:4px}
.inv-item:not(:first-child) label span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.inv-item textarea{resize:none;min-height:44px;field-sizing:content}
.inv-item-quantity input,.inv-item-price input{text-align:right;font-variant-numeric:tabular-nums}
.inv-remove{font:inherit;font-size:20px;line-height:1;width:34px;height:44px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.inv-remove:hover{background:#fdecea;color:#a4262c}
.inv-remove:focus-visible,.inv-text-button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.inv-output{position:sticky;top:calc(var(--site-header,63px) + 16px);min-width:0}
.inv-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.inv-text-button{font:inherit;font-size:13.5px;font-weight:650;color:var(--muted);background:none;border:0;padding:0;margin-left:auto;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.inv-stage{background:#e6eaf0;border-radius:12px;padding:18px;margin-top:14px;max-height:calc(100vh - var(--site-header,63px) - 150px);overflow:auto}

/* The document. It is laid out in container units, so the preview and the printed page are one drawing at two sizes. */
.inv-sheet{--inv-accent:#0b2545;container-type:inline-size;background:#fff;color:#1f2937;box-shadow:0 6px 22px #0b254526;aspect-ratio:210/297;width:100%;max-width:620px;margin:0 auto;padding:7%;line-height:1.5;display:flex;flex-direction:column}
/* Container units measure the sheet only from inside it, so the base text size is set on its sections. */
.inv-sheet>*{font-size:2.05cqw}
.inv-sheet h2,.inv-sheet h3,.inv-sheet p,.inv-sheet dl,.inv-sheet dd{margin:0}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:4cqw;padding-bottom:3.5cqw;border-bottom:.5cqw solid var(--inv-accent)}
.sheet-brand{min-width:0;flex:1 1 50%}
.sheet-logo svg{display:block;max-width:100%;width:auto;height:auto;max-height:12cqw}
.sheet-name{font-size:4.4cqw;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--inv-accent);overflow-wrap:anywhere}
.sheet-title{text-align:right;flex:none;max-width:48%}
.sheet-title h2{font-size:4.6cqw;font-weight:800;letter-spacing:.02em;line-height:1.1;text-transform:uppercase;color:var(--inv-accent)}
.sheet-number{font-size:2.5cqw;font-weight:700;margin-top:.6cqw!important;overflow-wrap:anywhere}
.sheet-dates{display:grid;grid-template-columns:auto auto;justify-content:end;gap:.2cqw 2cqw;margin-top:1.6cqw!important}
.sheet-dates dt{color:#5b6b80}
.sheet-dates dd{font-weight:600}
.sheet-parties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5cqw;padding:3.5cqw 0}
.inv-sheet h3{font-size:1.7cqw;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6b80;margin-bottom:.8cqw}
.sheet-party p{overflow-wrap:anywhere}
.sheet-party p:first-of-type{font-weight:700;font-size:2.3cqw;color:#0b2545}
.sheet-items{width:100%;border-collapse:collapse}
.sheet-items th{font-size:1.7cqw;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;color:#fff;background:var(--inv-accent);padding:1.3cqw 1.6cqw}
.sheet-items td{padding:1.4cqw 1.6cqw;border-bottom:1px solid #e0e6ef;vertical-align:top;overflow-wrap:anywhere}
.sheet-items .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sheet-empty{color:#8a97a8;text-align:center;padding:5cqw 0!important}
.sheet-totals{display:grid;grid-template-columns:auto auto;justify-content:end;gap:.9cqw 5cqw;margin:2.6cqw 1.6cqw 0 0!important;font-variant-numeric:tabular-nums}
.sheet-totals dd{text-align:right}
.sheet-totals .strong{font-size:2.9cqw;font-weight:800;color:var(--inv-accent);padding-top:1.2cqw;border-top:.3cqw solid var(--inv-accent)}
.sheet-foot{margin-top:auto;padding-top:5cqw;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5cqw}
.sheet-foot p{overflow-wrap:anywhere}

@media (max-width:980px){
  .inv-layout{grid-template-columns:minmax(0,1fr)}
  .inv-output{position:static}
  .inv-stage{max-height:none}
}
@media (max-width:560px){
  .inv-panel{padding:16px 14px}
  .inv-row,.inv-row.three{grid-template-columns:minmax(0,1fr)}
  .inv-options .inv-check{margin-bottom:6px}
  .inv-item{grid-template-columns:minmax(0,1fr) 60px 34px;grid-template-areas:"desc desc remove" "price qty .";row-gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
  .inv-item-description{grid-area:desc}.inv-item-quantity{grid-area:qty}.inv-item-price{grid-area:price}.inv-remove{grid-area:remove}
  .inv-item:not(:first-child) label span{position:static;width:auto;height:auto;clip-path:none}
  .inv-stage{padding:10px}
  .inv-text-button{margin-left:0}
}

/* Printing shows the document and nothing else, filling an A4 page. */
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff}
  body>*:not(main),.inv>*:not(.inv-layout),.inv-layout>*:not(.inv-output),.inv-output>*:not(.inv-stage){display:none!important}
  main.inv,.inv-layout,.inv-output,.inv-stage{display:block;position:static;margin:0;padding:0;max-width:none;max-height:none;overflow:visible;background:none;border-radius:0}
  .inv-sheet{box-shadow:none;max-width:none;width:100vw;min-height:100vh;aspect-ratio:auto}
  .sheet-items th{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}