/* 10/2026 "Hairline" (invoice-21.html): a hairline rule running into a tracked title, details in two columns, an open item
   table between two rules and the business name signed at the foot. after a Canva minimalist invoice, measured from it on
   the 816x1056 page: rules span the 92px margins, text sits 10px inside them (12px on the right).
   type: the font pairing keeps its families (.header-invoice gets the display face); every size, weight and spacing is set
   here with selectors that outrank the pairing's ".inv" / ".header-invoice" / "p" rules, which load after this file.
   pdf engine is Chrome 86: no inset, aspect-ratio, :is/:where/:has or flex gap */

/* the signature face. a design-owned family: the browser only downloads it when .signature uses it, so pages that link
   every invoice-N.css pay nothing for it */
@font-face {
    font-family: 'inv21-signature';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/mrssaintdelafield/v14/v6-IGZDIOVXH9xtmTZfRagunqBw5WC62QKcnL_ub.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'inv21-signature';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/mrssaintdelafield/v14/v6-IGZDIOVXH9xtmTZfRagunqBw5WC62QKknLw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.inv-21 {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--color-background1);
    color: var(--color-text1);
    font-size: 14px;
}

    .inv-21 .inv {
        padding: 0;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        letter-spacing: .09em;
    }

    .inv-21 .border-wrapper,
    .inv-21 .border-border {
        padding: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        background-color: transparent;
    }

    /* ---- header: logo (when there is one), then the rule and the title ---- */
    .inv-21 .header {
        padding: 101px 92px 0 92px;
    }

    .inv-21 .inv .header .company {
        font-size: 14px;
        line-height: 1;
    }

        /* logo or nothing, in the preview and the pdf alike (the name is already under Pay To and at the foot) */
        .inv-21 .inv .header .company > span { display: none; }
        .inv-21 .header .company img { display: block; max-height: 140px; margin-bottom: 32px; }

    .inv-21 .title-row {
        display: flex;
        align-items: center;
    }

        .inv-21 .title-row .rule {
            flex: 1 1 auto;
            min-width: 40px;
            height: 0;
            margin-right: 30px;
            border-top: 1px solid var(--color-text1-50);
        }

    .inv-21 .inv .header .header-invoice {
        flex: 0 1 auto;
        margin-right: -.2em; /* the last letter's tracking: ends flush with the rules below */
        font-size: 52px;
        font-weight: 400;
        font-style: normal;
        line-height: 1;
        letter-spacing: .2em;
        text-transform: uppercase;
        text-align: right;
        opacity: .74;
    }

    /* ---- body ---- */
    .inv-21 .body {
        padding: 160px 92px 0 92px; /* Canva's gap is ~190px; 30px back buys a 4-line address or a logo on one page */
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

        .inv-21 .body .items { flex: 1 1 auto; }

    /* the bold caps of every label: Bill To, Payable To, Invoice No, the column heads, Subtotal, Due, Notes */
    .inv-21 .caps-label,
    .inv-21 .terms p,
    .inv-21 .product-lines thead td,
    .inv-21 .meta-row.invoice-no > span,
    .inv-21 .invoice-totals .footer-subtotal > td,
    .inv-21 .invoice-totals .footer-due > td {
        font-size: 13.5px;
        font-weight: 700;
        font-style: normal;
        line-height: 17px;
        letter-spacing: .08em;
        text-transform: uppercase;
        opacity: .9;
    }

    /* ---- Bill To / Payable To left, number and dates right ---- */
    .inv-21 .invoice-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0 12px 0 10px;
    }

        .inv-21 .invoice-top .left { flex: 1 1 auto; padding-right: 32px; }
        .inv-21 .invoice-top .right { flex: 0 0 auto; display: table; margin-top: 10px; }

        .inv-21 .invoice-top .caps-label { margin-bottom: 2px; }
        .inv-21 .invoice-top .caps-label.pay-to { margin-top: 16px; }
        .inv-21 .bill-to-lines,
        .inv-21 .invoice-top .business { opacity: .8; }
        .inv-21 .invoice-top .business { list-style: none; margin: 0; padding: 0; }
        .inv-21 .invoice-top .business li:empty { display: none; }

    .inv-21 .meta-row { display: table-row; }

        .inv-21 .meta-row > span,
        .inv-21 .meta-row > div,
        .inv-21 .meta-row > input {
            display: table-cell;
            font-size: 13px;
            line-height: 18.5px;
            letter-spacing: .08em;
            text-align: right;
            white-space: nowrap;
            opacity: .8;
        }

        .inv-21 .meta-row .meta-label { padding-right: 15px; text-transform: uppercase; }
        .inv-21 .meta-row.invoice-no > span { line-height: 18.5px; }

    /* builder (inputs before post-processing) */
    .inv-21 .invoice-issue-date input.issue-date,
    .inv-21 .invoice-due-date input.due-date { width: 110px; padding: 0; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-align: right; }
    .inv-21 .invoice-issue-date input.issue-date:hover, .inv-21 .invoice-issue-date input.issue-date:focus,
    .inv-21 .invoice-due-date input.due-date:hover, .inv-21 .invoice-due-date input.due-date:focus { border-color: #3fc380; }

    /* "How to pay" (anon invoices) sits under Pay To, like bank details */
    .inv-21 .payment .how-to-pay { margin-top: 16px; }
        .inv-21 .payment .how-to-pay p { margin: 0 0 2px 0; }
        .inv-21 .payment .how-to-pay div { opacity: .8; }

    /* ---- line items: open rows between two rules. columns counted from the end, so the builder's tax column
       (.hbR, removed from the pdf) doesn't shift them ---- */
    .inv-21 .items { padding-top: 60px; }

    .inv-21 .product-lines {
        width: 100%;
        border-collapse: collapse;
        border-bottom: 1.5px solid var(--color-text1-50);
    }

        .inv-21 .product-lines td {
            padding: 0;
            border: none;
            vertical-align: top;
        }

        .inv-21 .product-lines thead td {
            padding-bottom: 13px;
            border-bottom: 1.5px solid var(--color-text1-50);
        }

        .inv-21 .product-lines tbody td {
            padding: 6px 0;
            font-size: 16px;
            line-height: 20px;
            letter-spacing: .09em;
            opacity: .8;
        }

        .inv-21 .product-lines tbody tr:first-child td { padding-top: 12px; }
        .inv-21 .product-lines tbody tr:last-child td { padding-bottom: 21px; }
        .inv-21 .product-lines thead td:first-child { padding-left: 10px; }
        .inv-21 .product-lines tbody td:first-child { padding-left: 15px; padding-right: 16px; }
        .inv-21 .product-lines td:last-child { padding-right: 12px; }

        .inv-21 .product-lines td:nth-last-child(3) { width: 90px; text-align: center; }
        .inv-21 .product-lines td:nth-last-child(2) { width: 120px; text-align: center; }
        .inv-21 .product-lines td:last-child { width: 110px; text-align: right; }
        .inv-21 .product-lines tbody td.taxes-element { width: 50px; }

        .inv-21 .product-lines td input.Quantity,
        .inv-21 .product-lines td input.Price { text-align: center; }

    /* ---- totals: the shared partial, as flex rows. Subtotal spans the width; the rest stack right; Due closes ---- */
    .inv-21 .invoice-totals {
        display: block;
        width: 100%;
        margin-top: 8px;
        padding: 0 12px 0 10px;
        border-collapse: collapse;
    }

        .inv-21 .invoice-totals tbody { display: block; }

        .inv-21 .invoice-totals tr {
            display: flex;
            justify-content: flex-end;
            align-items: baseline;
        }

        .inv-21 .invoice-totals td {
            display: block;
            padding: 0;
            border: none;
            line-height: 19px;
            white-space: nowrap;
        }

        /* the   spacer cell of each label/value row */
        .inv-21 .invoice-totals .footer-subtotal > td:first-child,
        .inv-21 .invoice-totals .footer-discount > td:first-child,
        .inv-21 .invoice-totals .footer-coupon > td:first-child,
        .inv-21 .invoice-totals .footer-taxes > td:first-child,
        .inv-21 .invoice-totals .footer-total > td:first-child,
        .inv-21 .invoice-totals .footer-paid > td:first-child,
        .inv-21 .invoice-totals .footer-refunded > td:first-child,
        .inv-21 .invoice-totals .footer-due > td:first-child,
        .inv-21 .invoice-totals .footer-tip > td:first-child { display: none; }

        /* label column, then the amount column 75px wide (min-width outranks the partial's inline width: 90px) */
        .inv-21 .invoice-totals tr > td:nth-last-child(2) { min-width: 200px; text-align: right; }
        .inv-21 .invoice-totals tr > td:last-child { min-width: 75px; padding-left: 12px; text-align: right; }
        .inv-21 .invoice-totals .footer-payments > td:first-child { padding-right: 12px; }

        .inv-21 .invoice-totals .footer-separator { display: none; }
        .inv-21 .invoice-totals .footer-refunded .value::before { content: '-'; }
        .inv-21 .invoice-totals .footer-tip > td { padding-top: 10px !important; }

        .inv-21 .invoice-totals .footer-subtotal { justify-content: space-between; padding-bottom: 3px; }
            .inv-21 .invoice-totals .footer-subtotal > td:nth-last-child(2) { min-width: 0; text-align: left; }

        .inv-21 .invoice-totals .footer-subtotal > td,
        .inv-21 .invoice-totals .footer-due > td { line-height: 19px; }
        .inv-21 .invoice-totals .footer-subtotal > td.value,
        .inv-21 .invoice-totals .footer-due > td.value { font-size: 14px; letter-spacing: .06em; }

        .inv-21 .invoice-totals .footer-discount > td,
        .inv-21 .invoice-totals .footer-coupon > td,
        .inv-21 .invoice-totals .footer-taxes > td,
        .inv-21 .invoice-totals .footer-total > td,
        .inv-21 .invoice-totals .footer-paid > td,
        .inv-21 .invoice-totals .footer-refunded > td,
        .inv-21 .invoice-totals .footer-tip > td,
        .inv-21 .invoice-totals .footer-payments-header > td,
        .inv-21 .invoice-totals .footer-payments > td { opacity: .8; }

    /* ---- closing: notes left, the business name signed right, both at the page foot ---- */
    .inv-21 .closing {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 24px 0 52px 0;
    }

        .inv-21 .closing .terms {
            flex: 1 1 auto;
            max-width: 55%;
            margin-right: 24px;
            padding-left: 10px;
            font-size: 12.5px;
            line-height: 17px;
        }

    .inv-21 .terms p { margin: 0 0 2px 0; }
    .inv-21 div.client-notes { opacity: .8; }
    .inv-21 textarea.client-notes { width: 100%; min-height: 70px; resize: none; border: 1px solid #ccc; padding: 10px; font: inherit; }

    .inv-21 .signature {
        flex: 0 0 auto;
        max-width: 66%; /* one line up to ~30 characters; notes take what's left */
        font-family: 'inv21-signature', cursive;
        font-size: 46px;
        font-weight: 400;
        font-style: normal;
        line-height: 1;
        letter-spacing: 0;
        text-align: right;
        text-transform: none;
        opacity: .8;
    }

    .inv-21 .footer { display: none; }