/* The Shina Bello — free tools page. */
.toolgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); background: #fff; }
.toolcard { display: grid; align-content: start; gap: .45rem; padding: 1.4rem 1.3rem 1.5rem; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); text-decoration: none; transition: background .25s, color .25s; }
.toolcard__icon { color: var(--blue); }
.toolcard__icon .icon { width: 1.6rem; height: 1.6rem; }
.toolcard b { font: 800 1.05rem/1.2 var(--f-display); }
.toolcard span:last-child { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.toolcard:hover, .toolcard.is-on { background: var(--dark); color: #fff; }
.toolcard:hover .toolcard__icon, .toolcard.is-on .toolcard__icon { color: var(--neon); }
.toolcard:hover span:last-child, .toolcard.is-on span:last-child { color: rgba(255, 255, 255, .72); }

.tool { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.5rem, 3.5vw, 2.75rem); border: 1px solid var(--line-2); background: #fff; scroll-margin-top: calc(var(--hdr) + 1rem); }
.tool__head { margin-bottom: 1.5rem; }
.tool__head .h3 { margin-bottom: .4rem; }
.tool__head p { max-width: 70ch; margin: 0; font-size: .9rem; }
.tool__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.tool__form p { margin: 0 0 .85rem; }
.tool__form label { font-size: .78rem; }
.tool__form label input, .tool__form label select, .tool__form label textarea { margin-top: .3rem; }
.tool__form--wide { max-width: 860px; }
.tool__form .h4 { margin: 1.4rem 0 .6rem; font-size: 1rem; }
.tool__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem !important; }
.tool__preview { position: sticky; top: calc(var(--hdr) + 1rem); }
.tool__out { margin-top: 1.5rem; }
.tool__out .btn-row { gap: .5rem; }
.f2, .f3, .f4 { display: grid; gap: 0 .85rem; }
.f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
input[type="file"] { width: 100%; padding: .55rem; border: 1px dashed var(--line-2); background: var(--bg); font-size: .85rem; }
input[type="color"] { width: 100%; height: 2.6rem; padding: .2rem; border: 1px solid var(--line-2); background: #fff; }
input[type="range"] { width: 100%; accent-color: var(--blue); }
.check { display: flex !important; align-items: center; gap: .5rem; margin-top: 1.6rem; }
.check input { width: auto; }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; border: 0; }
.seg legend { width: 100%; margin-bottom: .4rem; font-size: .78rem; font-weight: 600; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg label { display: inline-block; padding: .45rem .8rem; border: 1px solid var(--line-2); font-size: .82rem; font-weight: 600; }
.seg label:has(input:checked) { background: var(--dark); border-color: var(--dark); color: #fff; }
.seg label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.lines__head, .lines__row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, .7fr) minmax(0, 1fr) 2rem; gap: .4rem; align-items: center; margin: 0 0 .4rem; }
.lines--2 .lines__row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 2rem; }
.lines__head span { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lines__row input { padding: .55rem .6rem; font-size: .88rem; }
.lines__del { height: 2.3rem; border: 1px solid var(--line-2); background: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.lines__del:hover { background: var(--dark); color: #fff; }
.subtabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; }
.subtabs button { padding: .5rem .85rem; border: 1px solid var(--line-2); background: #fff; font-size: .84rem; font-weight: 600; cursor: pointer; }
.subtabs button[aria-selected="true"] { background: var(--dark); border-color: var(--dark); color: #fff; }
.pdfpane { max-width: 760px; }
.filelist { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: f; }
.filelist li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .6rem; border: 1px solid var(--line); border-bottom: 0; font-size: .86rem; counter-increment: f; }
.filelist li:last-child { border-bottom: 1px solid var(--line); }
.filelist li::before { content: counter(f) "."; margin-right: .4rem; color: var(--blue); font-weight: 700; }
.filelist li > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist small { color: var(--muted); }
.filelist button { width: 1.9rem; height: 1.9rem; margin-left: .2rem; border: 1px solid var(--line-2); background: #fff; cursor: pointer; }
.tablewrap { overflow-x: auto; }
.results { width: 100%; border-collapse: collapse; font-size: .85rem; }
.results th, .results td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.results td:first-child { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
.result output { display: block; padding: .9rem 1rem; border: 1px solid var(--line-2); background: var(--bg); font: 500 .86rem/1.5 var(--f-mono); word-break: break-all; }
.qrbox { display: grid; place-items: center; min-height: 18rem; padding: 1.5rem; border: 1px solid var(--line); background: var(--bg); }
.qrbox canvas { width: min(100%, 320px); height: auto; image-rendering: pixelated; }
.sigbox { min-height: 8rem; padding: 1.5rem; border: 1px solid var(--line); background: #fff; overflow-x: auto; }
.tooltoast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 9999; padding: .7rem 1rem; background: var(--dark); color: #fff; font-size: .86rem; font-weight: 600; transform: translateX(-50%); transition: opacity .5s; }
.tooltoast.is-bad { background: #C92A2A; }
.tooltoast.is-out { opacity: 0; }

/* The document preview (invoice, payslip): an A4 sheet that prints on its own. Colours come from the Colours pickers. */
.doc { --doc-accent: #1b1b1b; --doc-on-accent: #fff; --doc-title: #1b1b1b; --doc-ink: #1b1b1b; --doc-muted: #55585e; --doc-line: #e3e3df; position: relative; min-height: 32rem; padding: clamp(1.25rem, 3vw, 2.25rem); background: #fff; color: var(--doc-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 24px 50px -30px rgba(0, 0, 0, .45); font-size: .82rem; line-height: 1.45; }
@supports (color: color-mix(in srgb, red, blue)) {
	.doc { --doc-muted: color-mix(in srgb, var(--doc-ink) 72%, #fff); --doc-line: color-mix(in srgb, var(--doc-ink) 14%, #fff); }
}
.doc p { margin: 0; }
.doc__top { display: flex; justify-content: space-between; gap: 1.5rem; padding-bottom: 1.1rem; border-bottom: 2px solid var(--doc-accent); }
.doc__logo { max-width: 140px; max-height: 64px; margin-bottom: .6rem; object-fit: contain; }
.doc__title { text-align: right; }
.doc__title h3 { margin: 0 0 .35rem; color: var(--doc-title); font-size: 1.55rem; letter-spacing: .02em; text-transform: uppercase; }
.doc__title b { display: inline-block; min-width: 4.5rem; color: var(--doc-muted); font-weight: 600; }
.doc__to { margin: 1.1rem 0; }
.doc__k { margin-bottom: .25rem !important; color: var(--doc-title); font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.doc__table { width: 100%; margin: .5rem 0 1rem; border-collapse: collapse; }
.doc__table th { padding: .5rem .4rem; background: var(--doc-accent); color: var(--doc-on-accent); font-size: .68rem; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.doc__table td { padding: .5rem .4rem; border-bottom: 1px solid var(--doc-line); vertical-align: top; }
.doc__table th:not(:first-child), .doc__table td:not(:first-child) { text-align: right; white-space: nowrap; }
.doc__table tfoot td { border-bottom: 0; font-weight: 700; }
.doc__empty { color: var(--doc-muted); text-align: center !important; }
.doc__totals { width: min(100%, 17rem); margin-left: auto; }
.doc__totals p { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.doc__totals .doc__total { margin-top: .3rem; padding-top: .5rem; border-top: 2px solid var(--doc-accent); color: var(--doc-title); font-size: 1.05rem; }
.doc__note { margin-top: 1.1rem; }
.doc__stamp { position: absolute; top: 46%; left: 50%; padding: .3rem 1rem; border: 3px solid #2B8A3E; color: #2B8A3E; font-size: 1.6rem; font-weight: 800; letter-spacing: .2em; transform: translate(-50%, -50%) rotate(-14deg); opacity: .5; }
.doc__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem 1rem; margin: 1.1rem 0; }
.doc__grid dt { color: var(--doc-muted); font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.doc__grid dd { margin: .15rem 0 0; font-weight: 600; }
.doc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.doc__net { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; padding: .85rem 1rem; background: var(--doc-accent); color: var(--doc-on-accent); }
.doc__net b { font-size: 1.25rem; }
.doc__words { margin-top: .5rem !important; color: var(--doc-muted); font-style: italic; }
.doc__fine { margin-top: 1.5rem !important; color: var(--doc-muted); font-size: .7rem; }

/* Colour pickers and presets (invoice, payslip, letterhead) */
.colours { margin: 1.2rem 0 1rem; padding: 1rem 1rem .2rem; border: 1px solid var(--line-2); }
.colours legend { padding: 0 .35rem; font-size: .78rem; font-weight: 700; }
.swatches { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .9rem; }
.swatch { width: 2rem; height: 2rem; padding: 0; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(135deg, var(--s1) 50%, var(--s2) 50%); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; transition: transform .15s; }
.swatch:hover { transform: scale(1.08); }
.swatch.is-on { box-shadow: 0 0 0 2px var(--ink); }
.seg--inline { margin-bottom: .8rem; }
.tool__form output { margin-left: .25rem; color: var(--muted); font-weight: 600; }

/* Letterhead: design picker */
.lh-designs { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .6rem; margin: 0 0 1.2rem; padding: 0; border: 0; }
.lh-designs legend { margin-bottom: .45rem; font-size: .78rem; font-weight: 600; }
.lh-design { position: relative; display: grid; gap: .35rem; margin: 0; cursor: pointer; }
.lh-design input { position: absolute; opacity: 0; }
.lh-design__name { font-size: .72rem; font-weight: 600; text-align: center; }
.lh-design__thumb { position: relative; display: block; aspect-ratio: 210 / 297; overflow: hidden; border: 1px solid var(--line-2); background: #fff; transition: border-color .2s, box-shadow .2s; }
.lh-design input:checked + .lh-design__thumb { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.lh-design input:focus-visible + .lh-design__thumb { outline: 2px solid var(--blue); outline-offset: 2px; }
.lh-design__thumb i, .lh-design__thumb b, .lh-design__thumb s { position: absolute; display: block; text-decoration: none; }
.lh-design__thumb b { left: 18%; right: 18%; top: 34%; height: 40%; background: repeating-linear-gradient(#d9d9d6 0 2px, transparent 2px 7px); }
.lh-design__thumb--classic i { left: 30%; right: 30%; top: 8%; height: 9%; background: #1f45e6; }
.lh-design__thumb--classic s { left: 12%; right: 12%; top: 21%; height: 2px; background: #1f45e6; }
.lh-design__thumb--band i { inset: 0 0 auto; height: 18%; background: #1f45e6; }
.lh-design__thumb--band s { inset: auto 0 0; height: 6%; background: #0b1f4b; }
.lh-design__thumb--sidebar i { inset: 0 auto 0 0; width: 12%; background: #1f45e6; }
.lh-design__thumb--sidebar s { left: 20%; top: 7%; width: 40%; height: 8%; background: #0b1f4b; }
.lh-design__thumb--corner i { top: 0; right: 0; width: 55%; height: 22%; background: #1f45e6; clip-path: polygon(30% 0, 100% 0, 100% 100%); }
.lh-design__thumb--corner s { bottom: 0; left: 0; width: 45%; height: 16%; background: #0b1f4b; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.lh-design__thumb--wave i { inset: 0 0 auto; height: 16%; background: #1f45e6; border-radius: 0 0 60% 40% / 0 0 70% 40%; }
.lh-design__thumb--wave s { inset: auto 0 0; height: 9%; background: #0b1f4b; border-radius: 50% 60% 0 0 / 70% 50% 0 0; }
.lh-design__thumb--elegant i { inset: 5%; border: 1px solid #0b1f4b; }
.lh-design__thumb--elegant s { left: 35%; right: 35%; top: 12%; height: 8%; border-bottom: 2px solid #1f45e6; }
.lh-design__thumb--minimal i { left: 12%; top: 8%; width: 22%; height: 7%; background: #1f45e6; }
.lh-design__thumb--minimal s { right: 12%; top: 8%; width: 26%; height: 10%; background: repeating-linear-gradient(#bbb 0 2px, transparent 2px 5px); }

/*
 * Letterhead sheet. Sizes are in sheet millimetres (--u): on screen 1u = 1/210 of the preview width, in print 1u = 1mm.
 * Letterhead parts (shapes, header, footer, watermark) sit on the page; the letter flows in a table whose header and
 * footer rows repeat on every printed page, so long letters never run into the letterhead.
 */
.tool__preview--lh { container-type: inline-size; }
.doc.lh { --u: 2.9px; --u: calc(100cqw / 210); --lh-1: #1f45e6; --lh-2: #0b1f4b; --lh-ink: #1b1b1b; --lh-on-1: #fff; --lh-on-2: #fff; --lh-font: "Helvetica Neue", Helvetica, Arial, sans-serif; --lh-logo: 1;
	--lh-top: calc(var(--u) * 52); --lh-bottom: calc(var(--u) * 30); --lh-side: calc(var(--u) * 20);
	position: relative; overflow: hidden; min-height: 0; aspect-ratio: 210 / 297; padding: 0 var(--lh-side); color: var(--lh-ink); font-family: var(--lh-font); font-size: calc(var(--u) * 3.7); line-height: 1.55; }
.lh p { margin: 0; }
.lh__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lh__deco > * { position: absolute; display: block; }
.lh__wm { position: absolute; top: 50%; left: 50%; z-index: 0; width: calc(var(--u) * 150 * var(--wm-s, 1)); display: grid; place-items: center; opacity: var(--wm-o, .08); transform: translate(-50%, -50%) rotate(var(--wm-r, 0deg)); pointer-events: none; }
.lh__wm img { width: 100%; height: auto; max-height: calc(var(--u) * 180 * var(--wm-s, 1)); object-fit: contain; }
.lh__wmtext { color: var(--wm-c, var(--lh-1)); font-size: calc(var(--u) * 22 * var(--wm-s, 1)); font-weight: 800; line-height: 1; letter-spacing: .04em; text-align: center; text-transform: uppercase; white-space: nowrap; }
.lh__head, .lh__foot { position: absolute; z-index: 1; left: var(--lh-side); right: var(--lh-side); }
.lh__head { top: calc(var(--u) * 14); display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 6); }
.lh__foot { bottom: calc(var(--u) * 10); font-size: calc(var(--u) * 2.75); line-height: 1.5; color: var(--lh-ink); }
.lh__brand { display: flex; align-items: center; gap: calc(var(--u) * 4); min-width: 0; }
.lh__logo { flex: none; width: auto; max-width: calc(var(--u) * 46 * var(--lh-logo)); max-height: calc(var(--u) * 20 * var(--lh-logo)); object-fit: contain; }
.lh__org { color: var(--lh-1); font-size: calc(var(--u) * 7.2); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.lh__tag { margin-top: calc(var(--u) * 1.2) !important; color: var(--lh-2); font-size: calc(var(--u) * 3.1); letter-spacing: .08em; text-transform: uppercase; }
.lh__contact p + p, .lh__reg { margin-top: calc(var(--u) * .6) !important; }
.lh__dot { color: var(--lh-1); }
.lh__flow { position: relative; z-index: 1; width: 100%; border-collapse: collapse; }
.lh__flow td { padding: 0; }
.lh__space--top { height: var(--lh-top); }
.lh__space--bottom { height: var(--lh-bottom); }
.lh__letter p { margin: 0 0 calc(var(--u) * 4); }
.lh__meta { display: flex; justify-content: space-between; gap: 1em; }
.lh__to { margin-bottom: calc(var(--u) * 6) !important; }
.lh__subject { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.lh__hint { color: #8a8d92; font-style: italic; }
.lh__sign { margin-top: calc(var(--u) * 8); break-inside: avoid; }
.lh__sign p { margin: 0 !important; }
.lh__sig { display: block; max-width: calc(var(--u) * 50); max-height: calc(var(--u) * 18); margin: calc(var(--u) * 2) 0; object-fit: contain; }
.lh__sigspace { display: block; height: calc(var(--u) * 14); }
.lh__signer { font-weight: 700; }

/* Classic: centred name over a double rule, centred footer */
.lh--classic .lh__head { flex-direction: column; justify-content: flex-start; padding-bottom: calc(var(--u) * 4); border-bottom: calc(var(--u) * .9) double var(--lh-1); text-align: center; }
.lh--classic .lh__brand { flex-direction: column; gap: calc(var(--u) * 2.5); }
.lh--classic .lh__foot { padding-top: calc(var(--u) * 3); border-top: calc(var(--u) * .3) solid var(--lh-1); text-align: center; }
.lh--classic { --lh-top: calc(var(--u) * 62); }
/* Modern band: colour band with the name, footer band */
.lh--band .lh__band { inset: 0 0 auto; height: calc(var(--u) * 36); background: var(--lh-1); }
.lh--band .lh__band--foot { inset: auto 0 0; height: calc(var(--u) * 7); background: var(--lh-2); }
.lh--band .lh__head { top: 0; height: calc(var(--u) * 36); }
.lh--band .lh__org { color: var(--lh-on-1); }
.lh--band .lh__tag { color: var(--lh-on-1); opacity: .85; }
.lh--band .lh__logo { padding: calc(var(--u) * 2); background: #fff; }
.lh--band .lh__foot { bottom: calc(var(--u) * 11); }
.lh--band .lh__foot .lh__dot { color: var(--lh-2); }
/* Sidebar: full-height stripe on the left */
.doc.lh--sidebar { --lh-side-left: calc(var(--u) * 32); padding-left: var(--lh-side-left); }
.lh--sidebar .lh__side { inset: 0 auto 0 0; width: calc(var(--u) * 14); background: var(--lh-1); }
.lh--sidebar .lh__side--thin { left: calc(var(--u) * 16); width: calc(var(--u) * 1.2); background: var(--lh-2); }
.lh--sidebar .lh__head, .lh--sidebar .lh__foot { left: var(--lh-side-left); }
.lh--sidebar .lh__foot { padding-left: calc(var(--u) * 3); border-left: calc(var(--u) * .8) solid var(--lh-1); }
/* Corners: angled shapes top right and bottom left */
.lh--corner .lh__corner--a { top: 0; right: 0; width: calc(var(--u) * 92); height: calc(var(--u) * 44); background: var(--lh-1); clip-path: polygon(38% 0, 100% 0, 100% 100%); }
.lh--corner .lh__corner--b { top: 0; right: 0; width: calc(var(--u) * 54); height: calc(var(--u) * 60); background: var(--lh-2); clip-path: polygon(55% 0, 100% 0, 100% 100%); opacity: .9; }
.lh--corner .lh__corner--c { bottom: 0; left: 0; width: calc(var(--u) * 80); height: calc(var(--u) * 26); background: var(--lh-2); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.lh--corner .lh__head { right: calc(var(--u) * 70); }
.lh--corner .lh__foot { text-align: right; }
/* Wave */
.lh--wave .lh__wave { inset: 0 0 auto; width: 100%; height: calc(var(--u) * 34); }
.lh--wave .lh__wave--foot { inset: auto 0 0; height: calc(var(--u) * 22); }
.lh--wave .lh__f1 { fill: var(--lh-1); }
.lh--wave .lh__f2 { fill: var(--lh-2); }
.lh--wave .lh__head { top: calc(var(--u) * 30); }
.lh--wave { --lh-top: calc(var(--u) * 62); --lh-bottom: calc(var(--u) * 40); }
.lh--wave .lh__foot { bottom: calc(var(--u) * 24); }
/* Elegant frame: double frame, centred, small capitals */
.lh--elegant .lh__frame { inset: calc(var(--u) * 7); border: calc(var(--u) * .5) solid var(--lh-2); }
.lh--elegant .lh__frame--inner { inset: calc(var(--u) * 9); border-width: calc(var(--u) * .25); border-color: var(--lh-1); }
.lh--elegant .lh__head { top: calc(var(--u) * 18); flex-direction: column; text-align: center; }
.lh--elegant .lh__brand { flex-direction: column; gap: calc(var(--u) * 2.5); }
.lh--elegant .lh__org { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: calc(var(--u) * 6.4); }
.lh--elegant .lh__tag { font-style: italic; letter-spacing: .02em; text-transform: none; }
.lh--elegant .lh__names::after { content: ""; display: block; width: calc(var(--u) * 24); height: calc(var(--u) * .5); margin: calc(var(--u) * 3) auto 0; background: var(--lh-1); }
.lh--elegant .lh__foot { bottom: calc(var(--u) * 15); font-style: italic; text-align: center; }
.lh--elegant { --lh-top: calc(var(--u) * 66); --lh-bottom: calc(var(--u) * 34); --lh-side: calc(var(--u) * 24); }
/* Minimal: logo and name left, contact details right */
.lh--minimal .lh__tick { top: 0; left: var(--lh-side); width: calc(var(--u) * 26); height: calc(var(--u) * 3); background: var(--lh-1); }
.lh--minimal .lh__head { align-items: flex-start; }
.lh--minimal .lh__org { font-size: calc(var(--u) * 6); }
.lh--minimal .lh__contact { flex: none; max-width: 45%; font-size: calc(var(--u) * 2.75); text-align: right; }
.lh--minimal .lh__contact p + p { margin-top: 0 !important; }
.lh--minimal .lh__foot { padding-top: calc(var(--u) * 2.5); border-top: calc(var(--u) * .3) solid var(--lh-2); color: var(--lh-2); }
.lh--minimal { --lh-top: calc(var(--u) * 46); --lh-bottom: calc(var(--u) * 24); }

/* Download PDF: only the document's own pages (see printDoc in tools.js) */
#sbd-print { display: none; }

@media (max-width: 960px) {
	.toolgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.tool__grid { grid-template-columns: 1fr; }
	.tool__preview { position: static; }
	.f4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.toolgrid, .f2, .f3, .f4 { grid-template-columns: 1fr; }
	.doc__grid, .doc__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.doc__cols { grid-template-columns: 1fr; }
	.doc__top { flex-direction: column; }
	.doc__title { text-align: left; }
}

@media print {
	html.is-printing, html.is-printing body { width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
	html.is-printing body::before, html.is-printing body::after { display: none !important; }
	body.is-printing > *:not(#sbd-print) { display: none !important; }
	body.is-printing #sbd-print { display: block !important; position: static !important; }
	.sbd-print, .sbd-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.sbd-print .doc { width: 100%; min-height: 0; padding: 0; box-shadow: none; font-size: 10.5pt; }
	.sbd-print .doc__table thead { display: table-header-group; }
	.sbd-print .doc__table tr, .sbd-print .doc__totals, .sbd-print .doc__net, .sbd-print .doc__note, .sbd-print .doc__grid { break-inside: avoid; }
	.sbd-print .doc__top { break-after: avoid; }
	/* Letterhead: full-bleed A4; the letterhead parts repeat on every page. */
	.sbd-print .doc.lh { --u: 1mm; aspect-ratio: auto; overflow: visible; padding: 0 var(--lh-side); font-size: 10.5pt; }
	.sbd-print .doc.lh--sidebar { padding-left: var(--lh-side-left); }
	.sbd-print .lh__deco, .sbd-print .lh__head, .sbd-print .lh__foot { position: fixed; }
	.sbd-print .lh__deco { top: 0; left: 0; width: 210mm; height: 297mm; }
	.sbd-print .lh__wm { position: fixed; top: 148.5mm; left: 105mm; }
	.sbd-print .lh__flow thead { display: table-header-group; }
	.sbd-print .lh__flow tfoot { display: table-footer-group; }
	.sbd-print .lh__letter p { orphans: 3; widows: 3; }
}