/* ==========================================================================
   Theme 3 — Invoicer Quick App start page.

   Rendered inside the landing shell (.t3l-shell / .t3l-sidebar / .t3l-main), so
   the sidebar, footer and brand colours all come from theme3-landing.css and
   auth-theme3.css. Everything here is scoped to .t3i-* and owns only what the
   landing has no equivalent for: the app hero and the invoice-template gallery.

   The template cards are deliberately *documents*: they keep their own paper-like
   palette in light and dark mode, exactly as a real invoice would print.
   ========================================================================== */

/* The landing's .t3l-main is height:100vh / overflow:hidden — the page scrolls
   inside this layer rather than the window. */
.t3i-page {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.t3i-hero {
    position: relative;
    padding: clamp(31px, 7vh, 61px) 6% clamp(17px, 3vh, 27px);
    text-align: center;
    isolation: isolate;
}

/* Photographic wedge, upper right — the same trick the pricing panel uses.
   Masked to a diagonal so it dissolves into the page instead of ending on a seam. */
.t3i-hero-media {
    position: absolute;
    top: 0;
    right: 0;
    width: min(46%, 720px);
    height: 340px;
    z-index: -1;
    background-size: cover;
    background-position: center;
    opacity: .5;
    -webkit-mask-image: linear-gradient(215deg, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 72%);
            mask-image: linear-gradient(215deg, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 72%);
}

@media (max-width: 991px) {
    .t3i-hero-media { display: none; }
}

.t3i-hero-title {
    margin: 12px 0 8px;
    font-size: clamp(30px, 4.4vw, 54px);
    line-height: 1.08;
    letter-spacing: -.02em;
    font-weight: 800;
    color: var(--t3-text);
}

.t3i-hero-text {
    margin: 0 auto;
    max-width: 640px;
    font-size: clamp(14px, 1.2vw, 18px);
    color: var(--t3-text-muted);
}

/* ---- Hero call to action ---- */
.t3i-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 22px auto 10px;
    padding: 12px 20px;
    border-radius: 10px;
    background: var(--t3-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.t3i-cta:hover,
.t3i-cta:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.08);
}

/* ==========================================================================
   TEMPLATE GALLERY
   ========================================================================== */

.t3i-gallery {
    position: relative;
    padding: 4px 0 clamp(20px, 4vh, 37px);
}

/* Oversized wordmark behind the cards, echoing the landing's own watermark. */
.t3i-watermark {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 0;
    font-size: clamp(90px, 15vw, 210px);
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    color: var(--t3-text);
    opacity: .035;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.t3i-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 12px;
    align-items: start;
    padding: 8px 0 8px 6%;
}

/* Label on the right: the track takes the first column and bleeds to the left
   edge instead of the right, so the row still reads outward from the copy. */
.t3i-row--label-right {
    grid-template-columns: 1fr 170px;
    padding-right: 6%;
}

.t3i-row--label-right .t3i-row-label { order: 2; }

.t3i-row--label-right .t3i-track {
    order: 1;
    padding-right: 0;
}

@media (max-width: 767px) {
    .t3i-row,
    .t3i-row--label-right {
        grid-template-columns: 1fr;
        padding-left: 5%;
        padding-right: 0;
    }

    /* Stacked, the copy always introduces its row — no side to sit on. */
    .t3i-row--label-right .t3i-row-label { order: 0; }
    .t3i-row--label-right .t3i-track { order: 0; padding-right: 5%; }
}

.t3i-row-label { padding-top: 7px; }

.t3i-row-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--t3-text);
}

.t3i-row-text {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--t3-text-muted);
}

/* Scroll affordance — real buttons, so a row of ten is reachable without a trackpad. */
.t3i-slide {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.t3i-slide-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--t3-border);
    border-radius: 50%;
    background: none;
    color: var(--t3-text);
    font-size: 11px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}

.t3i-slide-btn:hover:not(:disabled) {
    border-color: var(--t3-primary);
    color: var(--t3-primary);
}

.t3i-slide-btn:disabled { opacity: .3; cursor: default; }

.t3i-slide-count {
    width: 100%;
    margin-top: 4px;
    font-size: 12px;
    color: var(--t3-text-muted);
}

/* The horizontally scrolling track of template cards.

   `stretch` is what gives the showcase one flat top and bottom edge: the cards
   carry different content (a tax line here, a note there) and would otherwise each
   size to their own text. Every card is pulled to the tallest in its row. */
.t3i-track {
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 4px 6% 8px 0;
    scrollbar-width: none;
}

.t3i-track::-webkit-scrollbar { height: 0; display: none; }

/* ==========================================================================
   ONE INVOICE TEMPLATE CARD

   A miniature of a real invoice. --tpl-accent is set per card from the manifest
   data, and every accent surface (status pill, total bar, rules) reads from it.
   ========================================================================== */

.t3i-tpl {
    --tpl-paper: #ffffff;
    --tpl-ink: #2b333f;
    --tpl-muted: #98a1ae;
    --tpl-rule: #eef0f3;

    display: flex;
    flex-direction: column;
    width: 100%;
    /* Takes the height the track hands down, so every card in a row matches. */
    flex: 1 1 auto;
    padding: 11px 11px 0;
    border-radius: 5px;
    background: var(--tpl-paper);
    color: var(--tpl-ink);
    font-size: 6px;
    line-height: 1.35;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .28);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

/* The card wrapper owns the track geometry; the paper inside just fills it.
   A column flex box so the stretched height lands on the paper, not the caption. */
.t3i-card {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 208px;
    margin: 0;
    scroll-snap-align: start;
}

/* The card is a link into the builder — it takes the stretched height and hands it
   on to the paper, so wrapping the document in an anchor changes no geometry. */
.t3i-card-link {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 5px;
}

.t3i-card-link:focus-visible {
    outline: 2px solid var(--t3-primary);
    outline-offset: 3px;
}

.t3i-card:hover .t3i-tpl,
.t3i-card-link:focus-visible .t3i-tpl {
    transform: translateY(-4px);
    box-shadow: 0 26px 54px rgba(0, 0, 0, .36);
}

/* Names the action on hover. It sits over the paper rather than under it so the
   row's height is decided by the documents alone. */
.t3i-card-use {
    position: absolute;
    left: 50%;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    background: var(--t3-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.t3i-card:hover .t3i-card-use,
.t3i-card-link:focus-visible .t3i-card-use {
    opacity: 1;
    transform: translate(-50%, -2px);
}

.t3i-card-name {
    padding: 6px 2px 0;
    font-size: 9px;
    font-weight: 500;
    color: var(--t3-text-muted);
}

.t3i-card:hover .t3i-card-name { color: var(--t3-text); }

.t3i-tpl-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.t3i-tpl-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--tpl-ink);
}

.t3i-tpl-num { margin-top: 2px; color: var(--tpl-muted); }

.t3i-tpl-meta { text-align: right; flex: 0 0 auto; }
.t3i-tpl-date { color: var(--tpl-muted); }

.t3i-badge {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 5.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--tpl-accent);
    color: #fff;
}

/* Yellow needs dark type to stay legible. */
.t3i-tpl--gold .t3i-badge { color: #1b1b1b; }

.t3i-tpl-parties {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.t3i-tpl-parties p { margin: 0; }
.t3i-tpl-label { color: var(--tpl-muted); }
.t3i-tpl-name { font-weight: 700; display: block; }
.t3i-tpl-from { text-align: right; }
.t3i-tpl-from a, .t3i-tpl-from span { color: var(--tpl-accent); display: block; }

.t3i-tpl-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 6px;
}

.t3i-tpl-table th {
    padding: 3px 2px;
    text-align: right;
    font-weight: 600;
    color: var(--tpl-muted);
    border-bottom: 1px solid var(--tpl-rule);
}

.t3i-tpl-table th:first-child,
.t3i-tpl-table td:first-child { text-align: left; }

.t3i-tpl-table td {
    padding: 3px 2px;
    text-align: right;
    border-bottom: 1px solid var(--tpl-rule);
}

/* `margin-top: auto` sends the slack from the stretched height up into the body of
   the document, so the totals and note stay welded to the foot of every card
   instead of floating wherever the line items happen to end. */
.t3i-tpl-sums { margin-top: auto; margin-left: auto; width: 62%; }
.t3i-tpl-sums div { display: flex; justify-content: space-between; padding: 1.5px 2px; }
.t3i-tpl-sums span:first-child { color: var(--tpl-muted); }

/* The total bar — the card's loudest accent surface. */
.t3i-tpl-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px -11px 0;
    padding: 6px 11px;
    background: var(--tpl-accent);
    color: #fff;
    font-weight: 700;
}

.t3i-tpl-total b { font-size: 9px; }

.t3i-tpl-note {
    margin: 0 -11px;
    padding: 5px 11px;
    color: var(--tpl-muted);
    background: var(--tpl-paper);
}

/* ---- Variants ---------------------------------------------------------- */

/* Plain: the total is a compact chip rather than a full-bleed bar. */
.t3i-tpl--plain .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    align-self: flex-end;
    width: 62%;
}

/* Rule: an accent keyline under the wordmark. */
.t3i-tpl--rule .t3i-tpl-title { border-bottom: 2px solid var(--tpl-accent); padding-bottom: 2px; }
.t3i-tpl--rule .t3i-tpl-total { margin: 6px 0 0; padding: 4px 8px; border-radius: 3px; width: 62%; align-self: flex-end; }

/* Warm: cream stock. */
.t3i-tpl--warm { --tpl-paper: #fbf8f3; --tpl-rule: #efe9df; }
.t3i-tpl--warm .t3i-tpl-total { margin: 6px 0 0; padding: 4px 8px; border-radius: 3px; width: 62%; align-self: flex-end; }

/* Dark: a printed-on-black document. */
.t3i-tpl--dark { --tpl-paper: #14181f; --tpl-ink: #e7ebf0; --tpl-muted: #7d8797; --tpl-rule: #262d38; }
.t3i-tpl--dark .t3i-tpl-total { margin: 6px 0 0; padding: 4px 8px; border-radius: 3px; width: 62%; align-self: flex-end; background: transparent; color: var(--tpl-accent); border-top: 1px solid var(--tpl-rule); }
.t3i-tpl--dark .t3i-tpl-note { color: var(--tpl-accent); }

/* Navy: a colour block down the left edge, total in a deep footer. */
.t3i-tpl--navy { --tpl-paper: #fff; position: relative; padding-left: 18px; }
.t3i-tpl--navy::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 11px;
    background: linear-gradient(180deg, var(--tpl-accent), #2f6fed);
    clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%);
}
.t3i-tpl--navy .t3i-tpl-total { margin: 6px -11px 0 -18px; padding: 8px 11px 8px 18px; background: #16233f; flex-direction: column; align-items: flex-end; gap: 0; }
.t3i-tpl--navy .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.t3i-tpl--navy .t3i-tpl-total b { font-size: 11px; }

/* Gold: an angled banner behind the wordmark, dark footer. */
.t3i-tpl--gold { position: relative; }
.t3i-tpl--gold .t3i-tpl-head { position: relative; margin: -11px -11px 9px; padding: 11px; }
.t3i-tpl--gold .t3i-tpl-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tpl-accent);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
    z-index: 0;
}
.t3i-tpl--gold .t3i-tpl-head > * { position: relative; z-index: 1; }
.t3i-tpl--gold .t3i-tpl-num,
.t3i-tpl--gold .t3i-tpl-date { color: #6b5a10; }
.t3i-tpl--gold .t3i-tpl-total { margin: 6px -11px 0; padding: 8px 11px; background: #14181f; color: var(--tpl-accent); flex-direction: column; align-items: flex-end; gap: 0; }
.t3i-tpl--gold .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.t3i-tpl--gold .t3i-tpl-total b { font-size: 11px; }

/* Teal & violet: a full-bleed accent footer carrying the total. */
.t3i-tpl--teal .t3i-tpl-total,
.t3i-tpl--violet .t3i-tpl-total {
    padding: 8px 11px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}

.t3i-tpl--teal .t3i-tpl-total span,
.t3i-tpl--violet .t3i-tpl-total span {
    font-size: 5.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .75;
}

.t3i-tpl--teal .t3i-tpl-total b,
.t3i-tpl--violet .t3i-tpl-total b { font-size: 11px; }

.t3i-tpl--violet { position: relative; padding-left: 17px; }
.t3i-tpl--violet::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 8px;
    background: linear-gradient(180deg, #e0517a, var(--tpl-accent));
}
.t3i-tpl--violet .t3i-tpl-total { margin-left: -17px; padding-left: 17px; }

/* ==========================================================================
   ADDITIONAL DESIGNS

   Each rule set below is one entry in Templates\TemplateRegistry. A variant only
   ever restyles the paper, the header and the total bar — the document's structure
   is shared, so a new design is a small, self-contained block rather than a fork.
   ========================================================================== */

/* ---- Modern & Minimal -------------------------------------------------- */

/* Mono: no colour at all; the accent is reduced to a hairline and the ink. */
.t3i-tpl--mono { --tpl-rule: #e6e9ed; }
.t3i-tpl--mono .t3i-tpl-title { letter-spacing: .16em; font-size: 10px; font-weight: 600; }
.t3i-tpl--mono .t3i-badge { background: transparent; color: var(--tpl-ink); border: 1px solid var(--tpl-ink); }
.t3i-tpl--mono .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 0 0;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-ink);
    border-top: 2px solid var(--tpl-ink);
}

/* Rail: a hairline rule running the full height of the left margin. */
.t3i-tpl--rail { position: relative; padding-left: 16px; }
.t3i-tpl--rail::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 8px;
    width: 2px;
    background: var(--tpl-accent);
}
.t3i-tpl--rail .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Band: a soft tinted strip behind the header. */
.t3i-tpl--band .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 11px;
    background: color-mix(in srgb, var(--tpl-accent) 10%, #fff);
    border-bottom: 2px solid var(--tpl-accent);
}
.t3i-tpl--band .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Boxed: the whole document sits inside a drawn border. */
.t3i-tpl--boxed { padding: 0 0 0; }
.t3i-tpl--boxed > * { margin-left: 11px; margin-right: 11px; }
.t3i-tpl--boxed .t3i-tpl-head { margin-top: 11px; }
.t3i-tpl--boxed { border: 1px solid var(--tpl-accent); }
.t3i-tpl--boxed .t3i-tpl-total {
    margin: 6px 11px 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: calc(62% - 11px);
    align-self: flex-end;
}
.t3i-tpl--boxed .t3i-tpl-note { margin: 0 0 0; padding: 5px 11px; }

/* Serif: a bookish, typeset invoice. */
.t3i-tpl--serif { font-family: Georgia, "Times New Roman", serif; --tpl-rule: #e8e3da; }
.t3i-tpl--serif .t3i-tpl-title { font-weight: 400; letter-spacing: .08em; font-size: 13px; }
.t3i-tpl--serif .t3i-tpl-head { border-bottom: 1px solid var(--tpl-accent); padding-bottom: 7px; }
.t3i-tpl--serif .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 0 0;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-ink);
    border-top: 1px solid var(--tpl-accent);
}

/* Grid: every cell ruled, like a spreadsheet export. */
.t3i-tpl--grid .t3i-tpl-table th,
.t3i-tpl--grid .t3i-tpl-table td { border: 1px solid var(--tpl-rule); }
.t3i-tpl--grid .t3i-tpl-table thead th {
    background: color-mix(in srgb, var(--tpl-accent) 12%, #fff);
    color: var(--tpl-ink);
}
.t3i-tpl--grid .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 0;
    width: 62%;
    align-self: flex-end;
}

/* Stamp: the status reads as an angled rubber stamp over the header. */
.t3i-tpl--stamp { position: relative; }
.t3i-tpl--stamp .t3i-badge {
    transform: rotate(-8deg);
    padding: 3px 7px;
    background: transparent;
    color: var(--tpl-accent);
    border: 1.5px solid var(--tpl-accent);
    border-radius: 2px;
    font-size: 6px;
}
.t3i-tpl--stamp .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* ---- Bold & Creative --------------------------------------------------- */

/* Aurora: a saturated gradient header bleeding into the paper. */
.t3i-tpl--gradient .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 14px 11px;
    background: linear-gradient(120deg, var(--tpl-accent), #6366f1);
    color: #fff;
}
.t3i-tpl--gradient .t3i-tpl-title { color: #fff; }
.t3i-tpl--gradient .t3i-tpl-num,
.t3i-tpl--gradient .t3i-tpl-date { color: rgba(255, 255, 255, .78); }
.t3i-tpl--gradient .t3i-badge { background: rgba(255, 255, 255, .22); }
.t3i-tpl--gradient .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    background: linear-gradient(120deg, var(--tpl-accent), #6366f1);
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--gradient .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--gradient .t3i-tpl-total b { font-size: 11px; }

/* Diagonal: the header is a slanted colour field. */
.t3i-tpl--diagonal .t3i-tpl-head {
    position: relative;
    margin: -11px -11px 9px;
    padding: 12px 11px 16px;
}
.t3i-tpl--diagonal .t3i-tpl-head::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--tpl-accent);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
    z-index: 0;
}
.t3i-tpl--diagonal .t3i-tpl-head > * { position: relative; z-index: 1; }
.t3i-tpl--diagonal .t3i-tpl-title { color: #fff; }
.t3i-tpl--diagonal .t3i-tpl-num,
.t3i-tpl--diagonal .t3i-tpl-date { color: rgba(255, 255, 255, .82); }
.t3i-tpl--diagonal .t3i-badge { background: rgba(0, 0, 0, .22); }
.t3i-tpl--diagonal .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Ribbon: a folded corner banner carrying the status. */
.t3i-tpl--ribbon { position: relative; }
.t3i-tpl--ribbon::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 26px 26px 0;
    border-style: solid;
    border-color: transparent var(--tpl-accent) transparent transparent;
}
.t3i-tpl--ribbon .t3i-tpl-title { color: var(--tpl-accent); }
.t3i-tpl--ribbon .t3i-tpl-head { border-bottom: 2px solid var(--tpl-accent); padding-bottom: 7px; }
.t3i-tpl--ribbon .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--ribbon .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--ribbon .t3i-tpl-total b { font-size: 11px; }

/* Split: the header divided into two tones. */
.t3i-tpl--split .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 12px 11px;
    background: linear-gradient(90deg, var(--tpl-accent) 0 46%, #0b1f1d 46% 100%);
    color: #fff;
}
.t3i-tpl--split .t3i-tpl-title { color: #fff; }
.t3i-tpl--split .t3i-tpl-num,
.t3i-tpl--split .t3i-tpl-date { color: rgba(255, 255, 255, .8); }
.t3i-tpl--split .t3i-badge { background: rgba(255, 255, 255, .2); }
.t3i-tpl--split .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    background: #0b1f1d;
    color: var(--tpl-accent);
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--split .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.t3i-tpl--split .t3i-tpl-total b { font-size: 11px; }

/* Neon: dark stock with a single luminous accent. */
.t3i-tpl--neon {
    --tpl-paper: #0b1015;
    --tpl-ink: #e6f6fa;
    --tpl-muted: #6c8391;
    --tpl-rule: #1c2730;
}
.t3i-tpl--neon .t3i-tpl-title {
    color: var(--tpl-accent);
    text-shadow: 0 0 10px color-mix(in srgb, var(--tpl-accent) 55%, transparent);
}
.t3i-tpl--neon .t3i-badge { background: transparent; color: var(--tpl-accent); border: 1px solid var(--tpl-accent); }
.t3i-tpl--neon .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-accent);
    border: 1px solid var(--tpl-accent);
}
.t3i-tpl--neon .t3i-tpl-note { color: var(--tpl-muted); }

/* ==========================================================================
   MODERN & MINIMAL — the second ten

   Restraint is the brief, so each of these earns its place by changing exactly one
   thing about the document: the stock it is printed on, the way the rules are drawn,
   the weight of the type, or how much air it is given. None of them shout.
   ========================================================================== */

/* Slate: grey stock with the line items lifted onto a white field. */
.t3i-tpl--slate { --tpl-paper: #f4f6f8; --tpl-rule: #e3e7ec; }
.t3i-tpl--slate .t3i-tpl-table {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(20, 24, 31, .05);
}
.t3i-tpl--slate .t3i-tpl-table th,
.t3i-tpl--slate .t3i-tpl-table td { padding-left: 4px; padding-right: 4px; }
.t3i-tpl--slate .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Ledger: ruled and banded, the way an accounts book is. */
.t3i-tpl--ledger .t3i-tpl-table th {
    border-bottom: 2px solid var(--tpl-accent);
    color: var(--tpl-ink);
}
.t3i-tpl--ledger .t3i-tpl-table td { border-bottom: 0; }
.t3i-tpl--ledger .t3i-tpl-table tbody tr:nth-child(odd) {
    background: color-mix(in srgb, var(--tpl-accent) 7%, #fff);
}
.t3i-tpl--ledger .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Tint: the paper itself is a wash of the accent, so the colour is everywhere and
   nowhere — change the accent and the whole document changes temperature. */
.t3i-tpl--tint {
    --tpl-paper: color-mix(in srgb, var(--tpl-accent) 6%, #fff);
    --tpl-rule: color-mix(in srgb, var(--tpl-accent) 20%, #fff);
}
.t3i-tpl--tint .t3i-tpl-title { color: var(--tpl-accent); }
.t3i-tpl--tint .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Capsule: nothing has a corner. */
.t3i-tpl--capsule { border-radius: 11px; }
.t3i-tpl--capsule .t3i-tpl-num {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tpl-accent) 12%, #fff);
    color: var(--tpl-accent);
}
.t3i-tpl--capsule .t3i-badge { border-radius: 999px; padding: 2px 7px; }
.t3i-tpl--capsule .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 11px;
    border-radius: 999px;
    width: 62%;
    align-self: flex-end;
}

/* Dotted: every rule is a dashed one, like a form torn from a pad. */
.t3i-tpl--dotted .t3i-tpl-head { border-bottom: 1px dashed var(--tpl-accent); padding-bottom: 7px; }
.t3i-tpl--dotted .t3i-tpl-table th,
.t3i-tpl--dotted .t3i-tpl-table td { border-bottom: 1px dashed var(--tpl-rule); }
.t3i-tpl--dotted .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-ink);
    border: 1px dashed var(--tpl-accent);
}

/* Outline: nothing is filled in. The type is drawn, not printed. */
.t3i-tpl--outline .t3i-tpl-title {
    font-size: 14px;
    color: transparent;
    -webkit-text-stroke: .8px var(--tpl-ink);
}
/* Where the stroke is not supported the title would vanish, so it is filled instead. */
@supports not (-webkit-text-stroke: 1px #000) {
    .t3i-tpl--outline .t3i-tpl-title { color: var(--tpl-ink); }
}
.t3i-tpl--outline .t3i-badge {
    background: transparent;
    color: var(--tpl-ink);
    border: 1px solid var(--tpl-ink);
}
.t3i-tpl--outline .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-ink);
    border: 1.5px solid var(--tpl-ink);
}

/* Swiss: a hard grid, tight type, and the accent reduced to a single square. */
.t3i-tpl--swiss .t3i-tpl-head { border-bottom: 2px solid var(--tpl-ink); padding-bottom: 7px; }
.t3i-tpl--swiss .t3i-tpl-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.t3i-tpl--swiss .t3i-tpl-title::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: var(--tpl-accent);
}
.t3i-tpl--swiss .t3i-tpl-table th { border-bottom: 1px solid var(--tpl-ink); color: var(--tpl-ink); }
.t3i-tpl--swiss .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 0 0;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-ink);
    border-top: 3px solid var(--tpl-accent);
}

/* Compact: the same invoice, tighter — for the ones that run to many lines. */
.t3i-tpl--compact { font-size: 5.6px; --tpl-rule: #edeff2; }
.t3i-tpl--compact .t3i-tpl-head { margin-bottom: 6px; }
.t3i-tpl--compact .t3i-tpl-title { font-size: 10px; }
.t3i-tpl--compact .t3i-tpl-parties { margin-bottom: 5px; }
.t3i-tpl--compact .t3i-tpl-table th,
.t3i-tpl--compact .t3i-tpl-table td { padding: 2px; }
.t3i-tpl--compact .t3i-tpl-total {
    margin: 5px 0 0;
    padding: 3px 7px;
    border-radius: 2px;
    width: 55%;
    align-self: flex-end;
}
.t3i-tpl--compact .t3i-tpl-total b { font-size: 8px; }

/* Letterhead: a printed bar across the top and the masthead centred under it. */
.t3i-tpl--letter { border-top: 5px solid var(--tpl-accent); }
.t3i-tpl--letter .t3i-tpl-head {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tpl-rule);
}
.t3i-tpl--letter .t3i-tpl-meta { text-align: center; }
.t3i-tpl--letter .t3i-tpl-title { letter-spacing: .18em; font-size: 11px; }
.t3i-tpl--letter .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Airy: light type, wide letter-spacing, and room to breathe between everything. */
.t3i-tpl--airy { --tpl-rule: #f1f2f5; }
.t3i-tpl--airy .t3i-tpl-head { margin-bottom: 13px; }
.t3i-tpl--airy .t3i-tpl-title { font-size: 9px; font-weight: 300; letter-spacing: .24em; }
.t3i-tpl--airy .t3i-tpl-parties { margin-bottom: 12px; }
.t3i-tpl--airy .t3i-tpl-table th,
.t3i-tpl--airy .t3i-tpl-table td { padding: 4.5px 2px; }
.t3i-tpl--airy .t3i-badge {
    background: transparent;
    color: var(--tpl-accent);
    border: 1px solid color-mix(in srgb, var(--tpl-accent) 40%, #fff);
}
.t3i-tpl--airy .t3i-tpl-total {
    margin: 9px 0 0;
    padding: 6px 0 0;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-accent);
    border-top: 1px solid var(--tpl-rule);
}

/* ==========================================================================
   MODERN & MINIMAL — the third and fourth ten

   The same brief, held further: a document is a stock, a set of rules, and a way of
   setting type. Each of these picks one of the three and does something honest with
   it. Where a design needs a shape, it is drawn with a border or a gradient rather
   than an element — the markup is shared with every other template and does not bend.
   ========================================================================== */

/* Margin: a wide left margin, the way a ledger page is ruled. */
.t3i-tpl--margin { position: relative; padding-left: 24px; }
.t3i-tpl--margin::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 17px;
    width: 1px;
    background: color-mix(in srgb, var(--tpl-accent) 45%, #fff);
}
.t3i-tpl--margin .t3i-tpl-label { text-transform: uppercase; letter-spacing: .1em; }
.t3i-tpl--margin .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 0 0;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-ink);
    border-top: 2px solid var(--tpl-accent);
}

/* Quiet: the accent is spent in one place only — the amount owed. */
.t3i-tpl--quiet { --tpl-rule: #f0f1f4; }
.t3i-tpl--quiet .t3i-tpl-title { font-weight: 600; color: var(--tpl-muted); letter-spacing: .18em; font-size: 9px; }
.t3i-tpl--quiet .t3i-badge { background: #eef0f3; color: var(--tpl-muted); }
.t3i-tpl--quiet .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Hairline: every rule drawn as thin as the screen allows. */
.t3i-tpl--hairline { --tpl-rule: #dfe2e7; }
.t3i-tpl--hairline .t3i-tpl-title { font-weight: 400; letter-spacing: .2em; font-size: 9px; }
.t3i-tpl--hairline .t3i-tpl-head { border-bottom: .5px solid var(--tpl-accent); padding-bottom: 8px; }
.t3i-tpl--hairline .t3i-tpl-table th,
.t3i-tpl--hairline .t3i-tpl-table td { border-bottom: .5px solid var(--tpl-rule); }
.t3i-tpl--hairline .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 0 0;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-accent);
    border-top: .5px solid var(--tpl-accent);
}

/* Sheet: grey stock, and the table's head reversed out like a spreadsheet. */
.t3i-tpl--sheet { --tpl-paper: #f4f6f8; --tpl-rule: #e2e6ea; }
.t3i-tpl--sheet .t3i-tpl-table { background: #fff; }
.t3i-tpl--sheet .t3i-tpl-table thead th {
    background: var(--tpl-accent);
    color: #fff;
    border-bottom: 0;
}
.t3i-tpl--sheet .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    width: 62%;
    align-self: flex-end;
}

/* Receipt: a till roll — monospaced, centred, torn along dashed rules. */
.t3i-tpl--receipt { font-family: "Courier New", ui-monospace, monospace; }
.t3i-tpl--receipt .t3i-tpl-head {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--tpl-accent);
}
.t3i-tpl--receipt .t3i-tpl-meta { text-align: center; }
.t3i-tpl--receipt .t3i-tpl-title { letter-spacing: .2em; font-size: 10px; }
.t3i-tpl--receipt .t3i-tpl-table th,
.t3i-tpl--receipt .t3i-tpl-table td { border-bottom: 1px dashed var(--tpl-rule); }
.t3i-tpl--receipt .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 0;
    width: 100%;
    background: transparent;
    color: var(--tpl-ink);
    border-top: 1px dashed var(--tpl-accent);
    border-bottom: 1px dashed var(--tpl-accent);
}

/* Numeric: figures set in a monospace so the columns line up to the digit. */
.t3i-tpl--numeric .t3i-tpl-table td,
.t3i-tpl--numeric .t3i-tpl-sums,
.t3i-tpl--numeric .t3i-tpl-total {
    font-family: "Courier New", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}
.t3i-tpl--numeric .t3i-tpl-table td:first-child { font-family: inherit; }
.t3i-tpl--numeric .t3i-tpl-head { border-bottom: 2px solid var(--tpl-accent); padding-bottom: 7px; }
.t3i-tpl--numeric .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 2px;
    width: 62%;
    align-self: flex-end;
}

/* Editorial: typeset like a page of a magazine — a big serif masthead over a rule. */
.t3i-tpl--editorial { font-family: Georgia, "Times New Roman", serif; --tpl-rule: #e7e3dc; }
.t3i-tpl--editorial .t3i-tpl-head {
    display: block;
    border-bottom: 3px double var(--tpl-accent);
    padding-bottom: 7px;
}
.t3i-tpl--editorial .t3i-tpl-title { font-size: 17px; font-weight: 400; letter-spacing: .04em; }
.t3i-tpl--editorial .t3i-tpl-meta { text-align: left; margin-top: 3px; }
.t3i-tpl--editorial .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 0 0;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-accent);
    border-top: 1px solid var(--tpl-accent);
}

/* Corner: one folded corner of colour, and nothing else. */
.t3i-tpl--corner { position: relative; }
.t3i-tpl--corner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-width: 22px 22px 0 0;
    border-style: solid;
    border-color: var(--tpl-accent) transparent transparent transparent;
}
.t3i-tpl--corner .t3i-tpl-head { padding-left: 14px; }
.t3i-tpl--corner .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Sidebar: a tinted column down the left, the document set beside it. */
.t3i-tpl--sidebar { --tpl-paper: #f4f6f8; position: relative; padding-left: 22px; }
.t3i-tpl--sidebar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 14px;
    background: color-mix(in srgb, var(--tpl-accent) 16%, #fff);
    border-right: 1px solid color-mix(in srgb, var(--tpl-accent) 40%, #fff);
}
.t3i-tpl--sidebar .t3i-tpl-total {
    margin: 6px -11px 0 -22px;
    padding: 7px 11px 7px 22px;
}

/* Underline: the heading rules, and only the heading rules. */
.t3i-tpl--underline .t3i-tpl-title {
    display: inline-block;
    border-bottom: 3px solid var(--tpl-accent);
    padding-bottom: 3px;
}
.t3i-tpl--underline .t3i-tpl-label {
    display: inline-block;
    border-bottom: 1px solid var(--tpl-accent);
    padding-bottom: 1px;
    margin-bottom: 2px;
}
.t3i-tpl--underline .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Stack: the two parties stacked rather than faced off across the page. */
.t3i-tpl--stack .t3i-tpl-parties { display: block; }
.t3i-tpl--stack .t3i-tpl-from {
    text-align: left;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--tpl-rule);
}
.t3i-tpl--stack .t3i-tpl-from a,
.t3i-tpl--stack .t3i-tpl-from span { display: inline; margin-right: 5px; }
.t3i-tpl--stack .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Label: every caption set in small, wide capitals. */
.t3i-tpl--label .t3i-tpl-label,
.t3i-tpl--label .t3i-tpl-table th,
.t3i-tpl--label .t3i-tpl-sums span:first-child {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 5px;
    font-weight: 600;
}
.t3i-tpl--label .t3i-tpl-head { border-bottom: 1px solid var(--tpl-rule); padding-bottom: 7px; }
.t3i-tpl--label .t3i-tpl-title { letter-spacing: .2em; font-size: 10px; color: var(--tpl-accent); }
.t3i-tpl--label .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}
.t3i-tpl--label .t3i-tpl-total span { text-transform: uppercase; letter-spacing: .12em; font-size: 5px; }

/* Inset: the masthead and the line items lifted onto white cards off the stock. */
.t3i-tpl--inset { --tpl-paper: #eef1f4; --tpl-rule: #e4e8ec; }
.t3i-tpl--inset .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 11px;
    background: #fff;
    border-bottom: 2px solid var(--tpl-accent);
}
.t3i-tpl--inset .t3i-tpl-table { background: #fff; border-radius: 3px; }
.t3i-tpl--inset .t3i-tpl-table th,
.t3i-tpl--inset .t3i-tpl-table td { padding-left: 5px; padding-right: 5px; }
.t3i-tpl--inset .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Draft: stamped across the page, for the invoice that is not final. */
.t3i-tpl--draft { position: relative; }
.t3i-tpl--draft::after {
    content: "DRAFT";
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-22deg);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--tpl-accent);
    opacity: .16;
    pointer-events: none;
}
.t3i-tpl--draft .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-ink);
    border: 1px solid var(--tpl-accent);
}

/* Postcard: divided down the middle, correspondence on one side. */
.t3i-tpl--postcard .t3i-tpl-parties {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tpl-rule);
}
.t3i-tpl--postcard .t3i-tpl-parties > :first-child {
    padding-right: 10px;
    border-right: 1px dashed var(--tpl-accent);
    flex: 1 1 auto;
}
.t3i-tpl--postcard .t3i-tpl-head { border-bottom: 2px solid var(--tpl-accent); padding-bottom: 7px; }
.t3i-tpl--postcard .t3i-badge { border-radius: 999px; }
.t3i-tpl--postcard .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* Ink: black type, heavy weight, no colour except the sum. */
.t3i-tpl--ink { --tpl-ink: #111827; --tpl-rule: #d8dbe0; }
.t3i-tpl--ink .t3i-tpl-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.t3i-tpl--ink .t3i-tpl-head { border-bottom: 3px solid var(--tpl-ink); padding-bottom: 7px; }
.t3i-tpl--ink .t3i-badge { background: var(--tpl-ink); }
.t3i-tpl--ink .t3i-tpl-table th { color: var(--tpl-ink); font-weight: 700; }
.t3i-tpl--ink .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 0 0;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-ink);
    border-top: 3px solid var(--tpl-ink);
}

/* Zen: almost nothing. The total is centred, and given the page to itself. */
.t3i-tpl--zen { --tpl-rule: #f2f3f5; }
.t3i-tpl--zen .t3i-tpl-head { justify-content: center; text-align: center; }
.t3i-tpl--zen .t3i-tpl-meta { display: none; }
.t3i-tpl--zen .t3i-tpl-title { font-weight: 300; letter-spacing: .3em; font-size: 9px; }
.t3i-tpl--zen .t3i-tpl-table th { border-bottom: 0; }
.t3i-tpl--zen .t3i-tpl-sums { width: 100%; text-align: center; }
.t3i-tpl--zen .t3i-tpl-total {
    margin: 8px 0 0;
    padding: 7px 0 0;
    width: 100%;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--tpl-accent);
    border-top: 1px solid var(--tpl-rule);
}

/* Notch: a colour field with a bite taken out of its corner. */
.t3i-tpl--notch .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 13px 11px;
    background: var(--tpl-accent);
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 10px));
}
.t3i-tpl--notch .t3i-tpl-title { color: #fff; }
.t3i-tpl--notch .t3i-tpl-num,
.t3i-tpl--notch .t3i-tpl-date { color: rgba(255, 255, 255, .82); }
.t3i-tpl--notch .t3i-badge { background: rgba(0, 0, 0, .2); }
.t3i-tpl--notch .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    width: 62%;
    align-self: flex-end;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

/* Tabbed: the masthead sits in a tab, as though clipped to a folder. */
.t3i-tpl--tabbed .t3i-tpl-title {
    display: inline-block;
    margin: -11px 0 0;
    padding: 5px 9px;
    background: var(--tpl-accent);
    color: #fff;
    border-radius: 0 0 4px 4px;
}
.t3i-tpl--tabbed .t3i-tpl-head { border-bottom: 1px solid var(--tpl-rule); padding-bottom: 7px; }
.t3i-tpl--tabbed .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 4px 4px 0 0;
    width: 62%;
    align-self: flex-end;
}

/* Thread: a dotted line running the height of the page, tying it together. */
.t3i-tpl--thread { position: relative; padding-left: 18px; }
.t3i-tpl--thread::before {
    content: "";
    position: absolute;
    inset: 11px auto 11px 9px;
    width: 2px;
    background-image: linear-gradient(var(--tpl-accent) 50%, transparent 50%);
    background-size: 2px 5px;
}
.t3i-tpl--thread .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 4px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
}

/* ==========================================================================
   BOLD & CREATIVE — the second ten

   These are allowed to be loud: a colour field, a curve, a stripe, a glow. What they
   are not allowed to do is make the invoice hard to read, so in every one of them the
   line items stay on quiet paper and the noise is kept to the head and the foot.
   ========================================================================== */

/* Sunset: a warm sky across the header, and the same light again at the foot. */
.t3i-tpl--sunset .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 14px 11px;
    background: linear-gradient(135deg, #f97316, var(--tpl-accent) 55%, #a855f7);
    color: #fff;
}
.t3i-tpl--sunset .t3i-tpl-title { color: #fff; }
.t3i-tpl--sunset .t3i-tpl-num,
.t3i-tpl--sunset .t3i-tpl-date { color: rgba(255, 255, 255, .8); }
.t3i-tpl--sunset .t3i-badge { background: rgba(255, 255, 255, .24); }
.t3i-tpl--sunset .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    background: linear-gradient(135deg, #f97316, var(--tpl-accent) 55%, #a855f7);
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--sunset .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--sunset .t3i-tpl-total b { font-size: 11px; }

/* Midnight: deep navy stock, gold rules — the invoice as an evening invitation. */
.t3i-tpl--midnight { --tpl-paper: #0f172a; --tpl-ink: #e8edf6; --tpl-muted: #7c8aa5; --tpl-rule: #22304a; }
.t3i-tpl--midnight .t3i-tpl-head { border-bottom: 1px solid var(--tpl-accent); padding-bottom: 8px; }
.t3i-tpl--midnight .t3i-tpl-title { color: var(--tpl-accent); letter-spacing: .14em; font-weight: 600; }
.t3i-tpl--midnight .t3i-badge { color: #1b1b1b; }
.t3i-tpl--midnight .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    color: #1b1b1b;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--midnight .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.t3i-tpl--midnight .t3i-tpl-total b { font-size: 11px; }
.t3i-tpl--midnight .t3i-tpl-note { color: var(--tpl-muted); }

/* Blueprint: drawn rather than typed — squared paper, monospaced masthead. */
.t3i-tpl--blueprint {
    --tpl-paper: #0e2038;
    --tpl-ink: #dbeafe;
    --tpl-muted: #7fa3cc;
    --tpl-rule: #1e3a5f;

    background-image:
        linear-gradient(rgba(56, 189, 248, .11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 189, 248, .11) 1px, transparent 1px);
    background-size: 10px 10px;
}
.t3i-tpl--blueprint .t3i-tpl-title {
    font-family: "Courier New", ui-monospace, monospace;
    letter-spacing: .12em;
    color: var(--tpl-accent);
}
.t3i-tpl--blueprint .t3i-badge {
    background: transparent;
    color: var(--tpl-accent);
    border: 1px solid var(--tpl-accent);
}
.t3i-tpl--blueprint .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 7px 11px;
    background: rgba(56, 189, 248, .13);
    border-top: 1px solid var(--tpl-accent);
    color: var(--tpl-accent);
}
.t3i-tpl--blueprint .t3i-tpl-note { color: var(--tpl-muted); background: transparent; }

/* Arc: a colour field with a sun rising out of the corner of it. */
.t3i-tpl--arc .t3i-tpl-head {
    position: relative;
    overflow: hidden;
    margin: -11px -11px 9px;
    padding: 13px 11px;
    background: var(--tpl-accent);
    border-bottom-left-radius: 26px;
    color: #fff;
}
.t3i-tpl--arc .t3i-tpl-head::after {
    content: "";
    position: absolute;
    top: -26px;
    right: -12px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .17);
}
.t3i-tpl--arc .t3i-tpl-head > * { position: relative; z-index: 1; }
.t3i-tpl--arc .t3i-tpl-title { color: #fff; }
.t3i-tpl--arc .t3i-tpl-num,
.t3i-tpl--arc .t3i-tpl-date { color: rgba(255, 255, 255, .82); }
.t3i-tpl--arc .t3i-badge { background: rgba(0, 0, 0, .2); }
.t3i-tpl--arc .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    border-top-right-radius: 26px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--arc .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--arc .t3i-tpl-total b { font-size: 11px; }

/* Frame: the whole document held inside a heavy border. */
.t3i-tpl--frame { padding: 9px 9px 0; border: 3px solid var(--tpl-accent); }
.t3i-tpl--frame .t3i-tpl-head { border-bottom: 1px solid var(--tpl-rule); padding-bottom: 7px; }
.t3i-tpl--frame .t3i-tpl-total { margin: 6px -9px 0; padding: 6px 9px; }
.t3i-tpl--frame .t3i-tpl-note { margin: 0 -9px; padding: 5px 9px; }

/* Wave: the header breaks like water over the page. */
.t3i-tpl--wave .t3i-tpl-head {
    margin: -11px -11px 11px;
    padding: 13px 11px 17px;
    background: var(--tpl-accent);
    border-radius: 0 0 50% 50% / 0 0 20px 20px;
    color: #fff;
}
.t3i-tpl--wave .t3i-tpl-title { color: #fff; }
.t3i-tpl--wave .t3i-tpl-num,
.t3i-tpl--wave .t3i-tpl-date { color: rgba(255, 255, 255, .82); }
.t3i-tpl--wave .t3i-badge { background: rgba(255, 255, 255, .24); }
.t3i-tpl--wave .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 11px;
    border-radius: 999px;
    width: 62%;
    align-self: flex-end;
}

/* Stripe: hazard tape. Loud on purpose, and only at the head. */
.t3i-tpl--stripe .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 12px 11px;
    background: repeating-linear-gradient(
        135deg,
        var(--tpl-accent) 0 7px,
        color-mix(in srgb, var(--tpl-accent) 70%, #000) 7px 14px
    );
    color: #fff;
}
.t3i-tpl--stripe .t3i-tpl-title { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.t3i-tpl--stripe .t3i-tpl-num,
.t3i-tpl--stripe .t3i-tpl-date { color: rgba(255, 255, 255, .88); }
.t3i-tpl--stripe .t3i-badge { background: rgba(0, 0, 0, .3); }
.t3i-tpl--stripe .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--stripe .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--stripe .t3i-tpl-total b { font-size: 11px; }

/* Blocks: a Bauhaus bar of colour under the masthead. */
.t3i-tpl--blocks .t3i-tpl-head {
    position: relative;
    margin: -11px -11px 9px;
    padding: 13px 11px;
    background: var(--tpl-accent);
    color: #1b1b1b;
}
.t3i-tpl--blocks .t3i-tpl-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        #1b1b1b 0 34%,
        #fff 34% 67%,
        color-mix(in srgb, var(--tpl-accent) 55%, #000) 67% 100%
    );
}
.t3i-tpl--blocks .t3i-tpl-title { color: #1b1b1b; font-weight: 800; }
.t3i-tpl--blocks .t3i-tpl-num,
.t3i-tpl--blocks .t3i-tpl-date { color: rgba(0, 0, 0, .58); }
.t3i-tpl--blocks .t3i-badge { background: #1b1b1b; color: #fff; }
.t3i-tpl--blocks .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    background: #1b1b1b;
    color: var(--tpl-accent);
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--blocks .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.t3i-tpl--blocks .t3i-tpl-total b { font-size: 11px; }

/* Glow: dark stock, lit from behind the wordmark. */
.t3i-tpl--glow {
    --tpl-paper: #12101c;
    --tpl-ink: #ece9f7;
    --tpl-muted: #8b84a8;
    --tpl-rule: #241f36;

    background-image: radial-gradient(
        140px 70px at 16% 0%,
        color-mix(in srgb, var(--tpl-accent) 40%, transparent),
        transparent 72%
    );
}
.t3i-tpl--glow .t3i-tpl-title {
    color: #fff;
    text-shadow: 0 0 12px color-mix(in srgb, var(--tpl-accent) 80%, transparent);
}
.t3i-tpl--glow .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--tpl-accent) 85%, #000),
        color-mix(in srgb, var(--tpl-accent) 40%, #12101c)
    );
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--glow .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--glow .t3i-tpl-total b { font-size: 11px; }
.t3i-tpl--glow .t3i-tpl-note { color: var(--tpl-muted); background: transparent; }

/* Brutal: cream stock, black rules, an offset shadow and no apologies. */
.t3i-tpl--brutal {
    --tpl-paper: #fdf6e3;
    --tpl-ink: #111111;
    --tpl-muted: #6b6455;
    --tpl-rule: #111111;

    font-family: Georgia, "Times New Roman", serif;
    border: 2px solid #111;
    border-radius: 0;
    box-shadow: 6px 6px 0 #111;
}
/* The lift on hover is shared by every card; here it has to keep the hard shadow
   underneath it, or the design falls apart the moment the pointer arrives. */
.t3i-card:hover .t3i-tpl--brutal,
.t3i-card-link:focus-visible .t3i-tpl--brutal {
    box-shadow: 6px 6px 0 #111, 0 26px 54px rgba(0, 0, 0, .3);
}
.t3i-tpl--brutal .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 11px;
    background: var(--tpl-accent);
    border-bottom: 2px solid #111;
}
.t3i-tpl--brutal .t3i-tpl-title { font-weight: 700; letter-spacing: .02em; }
.t3i-tpl--brutal .t3i-tpl-num,
.t3i-tpl--brutal .t3i-tpl-date { color: rgba(0, 0, 0, .62); }
.t3i-tpl--brutal .t3i-badge { background: #111; color: #fdf6e3; border-radius: 0; }
.t3i-tpl--brutal .t3i-tpl-table th { border-bottom: 2px solid #111; color: var(--tpl-ink); }
.t3i-tpl--brutal .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 7px 11px;
    background: #111;
    color: var(--tpl-accent);
}
.t3i-tpl--brutal .t3i-tpl-note { color: var(--tpl-muted); }

/* ==========================================================================
   BOLD & CREATIVE — the third and fourth ten

   Louder still, but under the same rule as the rest: the noise lives in the head and
   the foot, and the line items are always left on quiet paper. A document nobody can
   read is not a design, it is a poster.
   ========================================================================== */

/* Eclipse: a dark sky with the accent rising behind the masthead. */
.t3i-tpl--eclipse {
    --tpl-paper: #141018;
    --tpl-ink: #f1ecf2;
    --tpl-muted: #8a8092;
    --tpl-rule: #2a2231;

    background-image: radial-gradient(
        58px 58px at 82% -6%,
        var(--tpl-accent) 0 46%,
        color-mix(in srgb, var(--tpl-accent) 30%, transparent) 47%,
        transparent 62%
    );
}
.t3i-tpl--eclipse .t3i-tpl-title { color: #fff; letter-spacing: .1em; }
.t3i-tpl--eclipse .t3i-badge { background: var(--tpl-accent); }
.t3i-tpl--eclipse .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--eclipse .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--eclipse .t3i-tpl-total b { font-size: 11px; }
.t3i-tpl--eclipse .t3i-tpl-note { color: var(--tpl-muted); background: transparent; }

/* Prism: light broken into three bands across the head. */
.t3i-tpl--prism .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 13px 11px;
    background: linear-gradient(90deg, #06b6d4, var(--tpl-accent) 52%, #ec4899);
    color: #fff;
}
.t3i-tpl--prism .t3i-tpl-title { color: #fff; }
.t3i-tpl--prism .t3i-tpl-num,
.t3i-tpl--prism .t3i-tpl-date { color: rgba(255, 255, 255, .82); }
.t3i-tpl--prism .t3i-badge { background: rgba(0, 0, 0, .22); }
.t3i-tpl--prism .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-radius: 3px;
    width: 62%;
    align-self: flex-end;
    background: linear-gradient(90deg, #06b6d4, var(--tpl-accent) 52%, #ec4899);
}

/* Carbon: woven dark stock, one bright rule. */
.t3i-tpl--carbon {
    --tpl-paper: #101418;
    --tpl-ink: #e5eaef;
    --tpl-muted: #7a8894;
    --tpl-rule: #222b33;

    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, .028) 0 2px,
        transparent 2px 4px
    );
}
.t3i-tpl--carbon .t3i-tpl-head { border-bottom: 2px solid var(--tpl-accent); padding-bottom: 8px; }
.t3i-tpl--carbon .t3i-tpl-title { color: var(--tpl-accent); font-weight: 800; }
.t3i-tpl--carbon .t3i-badge { background: var(--tpl-accent); color: #0b0f12; }
.t3i-tpl--carbon .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    color: #0b0f12;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--carbon .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.t3i-tpl--carbon .t3i-tpl-total b { font-size: 11px; }
.t3i-tpl--carbon .t3i-tpl-note { color: var(--tpl-muted); background: transparent; }

/* Tropic: a lagoon gradient, cut away at the corner. */
.t3i-tpl--tropic .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 14px 11px;
    background: linear-gradient(115deg, var(--tpl-accent), #22c55e);
    color: #fff;
    border-bottom-right-radius: 30px;
}
.t3i-tpl--tropic .t3i-tpl-title { color: #fff; }
.t3i-tpl--tropic .t3i-tpl-num,
.t3i-tpl--tropic .t3i-tpl-date { color: rgba(255, 255, 255, .84); }
.t3i-tpl--tropic .t3i-badge { background: rgba(0, 0, 0, .2); }
.t3i-tpl--tropic .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 11px;
    border-radius: 999px;
    width: 62%;
    align-self: flex-end;
    background: linear-gradient(115deg, var(--tpl-accent), #22c55e);
}

/* Ember: coals under the paper — the heat is at the foot, not the head. */
.t3i-tpl--ember {
    --tpl-paper: #17110d;
    --tpl-ink: #f5ece5;
    --tpl-muted: #9c8577;
    --tpl-rule: #2e231b;

    background-image: radial-gradient(
        160px 60px at 50% 104%,
        color-mix(in srgb, var(--tpl-accent) 55%, transparent),
        transparent 74%
    );
}
.t3i-tpl--ember .t3i-tpl-title { color: var(--tpl-accent); }
.t3i-tpl--ember .t3i-tpl-head { border-bottom: 1px solid var(--tpl-rule); padding-bottom: 8px; }
.t3i-tpl--ember .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    background: linear-gradient(90deg, #b91c1c, var(--tpl-accent) 70%, #fbbf24);
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--ember .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--ember .t3i-tpl-total b { font-size: 11px; }
.t3i-tpl--ember .t3i-tpl-note { color: var(--tpl-muted); background: transparent; }

/* Checker: a chequerboard band under the masthead. */
.t3i-tpl--checker .t3i-tpl-head {
    position: relative;
    margin: -11px -11px 12px;
    padding: 13px 11px 15px;
    background: var(--tpl-accent);
    color: #fff;
}
.t3i-tpl--checker .t3i-tpl-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background-image:
        linear-gradient(45deg, var(--tpl-accent) 25%, transparent 25% 75%, var(--tpl-accent) 75%),
        linear-gradient(45deg, var(--tpl-accent) 25%, #fff 25% 75%, var(--tpl-accent) 75%);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
}
.t3i-tpl--checker .t3i-tpl-title { color: #fff; }
.t3i-tpl--checker .t3i-tpl-num,
.t3i-tpl--checker .t3i-tpl-date { color: rgba(255, 255, 255, .74); }
.t3i-tpl--checker .t3i-badge { background: rgba(255, 255, 255, .22); }
.t3i-tpl--checker .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--checker .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.t3i-tpl--checker .t3i-tpl-total b { font-size: 11px; }

/* Halftone: printed dots, fading out as they cross the header. */
.t3i-tpl--halftone .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 13px 11px;
    background-color: var(--tpl-accent);
    background-image: radial-gradient(rgba(0, 0, 0, .22) 1px, transparent 1.2px);
    background-size: 5px 5px;
    color: #1b1b1b;
}
.t3i-tpl--halftone .t3i-tpl-title { color: #1b1b1b; font-weight: 800; }
.t3i-tpl--halftone .t3i-tpl-num,
.t3i-tpl--halftone .t3i-tpl-date { color: rgba(0, 0, 0, .6); }
.t3i-tpl--halftone .t3i-badge { background: #1b1b1b; color: #fff; }
.t3i-tpl--halftone .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    color: #1b1b1b;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--halftone .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.t3i-tpl--halftone .t3i-tpl-total b { font-size: 11px; }

/* Marquee: the word INVOICE run across a full-bleed strip. */
.t3i-tpl--marquee .t3i-tpl-head {
    margin: -11px -11px 10px;
    padding: 11px;
    background: var(--tpl-accent);
    color: #fff;
    align-items: center;
}
.t3i-tpl--marquee .t3i-tpl-title { color: #fff; font-size: 16px; font-weight: 800; letter-spacing: .3em; }
.t3i-tpl--marquee .t3i-tpl-num,
.t3i-tpl--marquee .t3i-tpl-date { color: rgba(255, 255, 255, .82); }
.t3i-tpl--marquee .t3i-badge { background: rgba(0, 0, 0, .22); }
.t3i-tpl--marquee .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.t3i-tpl--marquee .t3i-tpl-total b { letter-spacing: 0; }

/* Fold: the page turned up at the corner. */
.t3i-tpl--fold { position: relative; }
.t3i-tpl--fold::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-width: 0 0 24px 24px;
    border-style: solid;
    border-color: transparent transparent var(--tpl-accent) transparent;
    filter: drop-shadow(-2px -2px 2px rgba(0, 0, 0, .12));
}
.t3i-tpl--fold .t3i-tpl-head { border-bottom: 2px solid var(--tpl-accent); padding-bottom: 7px; }
.t3i-tpl--fold .t3i-tpl-title { color: var(--tpl-accent); }
.t3i-tpl--fold .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-radius: 3px 3px 0 3px;
    width: 62%;
    align-self: flex-end;
}

/* Duotone: the header split on the diagonal into two tones of the same colour. */
.t3i-tpl--duotone .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 13px 11px;
    background:
        linear-gradient(100deg,
            var(--tpl-accent) 0 48%,
            color-mix(in srgb, var(--tpl-accent) 55%, #000) 48% 100%);
    color: #fff;
}
.t3i-tpl--duotone .t3i-tpl-title { color: #fff; }
.t3i-tpl--duotone .t3i-tpl-num,
.t3i-tpl--duotone .t3i-tpl-date { color: rgba(255, 255, 255, .8); }
.t3i-tpl--duotone .t3i-badge { background: rgba(255, 255, 255, .22); }
.t3i-tpl--duotone .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    background: color-mix(in srgb, var(--tpl-accent) 55%, #000);
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--duotone .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.t3i-tpl--duotone .t3i-tpl-total b { font-size: 11px; }

/* Tape: a strip of tape stuck across the corner of the page. */
.t3i-tpl--tape { position: relative; overflow: hidden; }
.t3i-tpl--tape::before {
    content: "";
    position: absolute;
    top: 9px;
    right: -20px;
    width: 78px;
    height: 13px;
    transform: rotate(38deg);
    background: color-mix(in srgb, var(--tpl-accent) 78%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.t3i-tpl--tape .t3i-tpl-head { border-bottom: 1px dashed var(--tpl-ink); padding-bottom: 7px; }
.t3i-tpl--tape .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-radius: 2px;
    width: 62%;
    align-self: flex-end;
    color: #1b1b1b;
}

/* Mesh: several lights blended behind the masthead. */
.t3i-tpl--mesh .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 14px 11px;
    background-color: var(--tpl-accent);
    background-image:
        radial-gradient(60px 40px at 12% 10%, #22d3ee 0, transparent 70%),
        radial-gradient(70px 50px at 88% 0%, #f472b6 0, transparent 72%),
        radial-gradient(70px 60px at 60% 120%, #6366f1 0, transparent 70%);
    color: #fff;
}
.t3i-tpl--mesh .t3i-tpl-title { color: #fff; }
.t3i-tpl--mesh .t3i-tpl-num,
.t3i-tpl--mesh .t3i-tpl-date { color: rgba(255, 255, 255, .84); }
.t3i-tpl--mesh .t3i-badge { background: rgba(0, 0, 0, .2); }
.t3i-tpl--mesh .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    background-color: var(--tpl-accent);
    background-image: radial-gradient(90px 40px at 20% 0%, #6366f1 0, transparent 70%);
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--mesh .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--mesh .t3i-tpl-total b { font-size: 11px; }

/* Dawn: first light — the accent washed across the top of the stock. */
.t3i-tpl--dawn {
    --tpl-paper: color-mix(in srgb, var(--tpl-accent) 6%, #fff);
    --tpl-rule: color-mix(in srgb, var(--tpl-accent) 22%, #fff);

    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--tpl-accent) 30%, transparent) 0,
        transparent 42%
    );
}
.t3i-tpl--dawn .t3i-tpl-title { color: color-mix(in srgb, var(--tpl-accent) 75%, #000); }
.t3i-tpl--dawn .t3i-tpl-head { padding-bottom: 8px; }
.t3i-tpl--dawn .t3i-badge { color: #1b1b1b; }
.t3i-tpl--dawn .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 10px;
    border-radius: 999px;
    width: 62%;
    align-self: flex-end;
    color: #1b1b1b;
}

/* Beacon: a shaft of light down the edge of a dark page. */
.t3i-tpl--beacon {
    --tpl-paper: #0b1220;
    --tpl-ink: #e3edf7;
    --tpl-muted: #74879c;
    --tpl-rule: #1d2a3c;

    position: relative;
    padding-left: 18px;
}
.t3i-tpl--beacon::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: linear-gradient(180deg, var(--tpl-accent), transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--tpl-accent) 60%, transparent);
}
.t3i-tpl--beacon .t3i-tpl-title { color: var(--tpl-accent); letter-spacing: .12em; }
.t3i-tpl--beacon .t3i-badge { background: transparent; color: var(--tpl-accent); border: 1px solid var(--tpl-accent); }
.t3i-tpl--beacon .t3i-tpl-total {
    margin: 6px -11px 0 -18px;
    padding: 8px 11px 8px 18px;
    background: color-mix(in srgb, var(--tpl-accent) 16%, #0b1220);
    color: var(--tpl-accent);
    border-top: 1px solid var(--tpl-accent);
}
.t3i-tpl--beacon .t3i-tpl-note { color: var(--tpl-muted); }

/* Onyx: black stock in a thin gold frame. */
.t3i-tpl--onyx {
    --tpl-paper: #0a0a0a;
    --tpl-ink: #f2eee4;
    --tpl-muted: #8b8579;
    --tpl-rule: #262421;

    border: 1px solid var(--tpl-accent);
    padding: 10px 10px 0;
}
.t3i-tpl--onyx .t3i-tpl-head { border-bottom: 1px solid var(--tpl-accent); padding-bottom: 8px; }
.t3i-tpl--onyx .t3i-tpl-title { color: var(--tpl-accent); font-weight: 400; letter-spacing: .26em; font-size: 10px; }
.t3i-tpl--onyx .t3i-badge { color: #1b1b1b; }
.t3i-tpl--onyx .t3i-tpl-total {
    margin: 6px 0 10px;
    padding: 6px 0 0;
    width: 62%;
    align-self: flex-end;
    background: transparent;
    color: var(--tpl-accent);
    border-top: 1px solid var(--tpl-accent);
}
.t3i-tpl--onyx .t3i-tpl-note { margin: 0 -10px; padding: 5px 10px; color: var(--tpl-muted); }

/* Pop: comic-book — dotted ground, heavy outline, hard shadow. */
.t3i-tpl--pop {
    --tpl-ink: #111111;
    --tpl-rule: #111111;

    border: 2px solid #111;
    background-image: radial-gradient(color-mix(in srgb, var(--tpl-accent) 30%, transparent) 1.1px, transparent 1.2px);
    background-size: 6px 6px;
}
.t3i-tpl--pop .t3i-tpl-head {
    margin: -11px -11px 9px;
    padding: 12px 11px;
    background: var(--tpl-accent);
    border-bottom: 2px solid #111;
    color: #fff;
}
.t3i-tpl--pop .t3i-tpl-title {
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    text-shadow: 1.5px 1.5px 0 #111;
}
.t3i-tpl--pop .t3i-tpl-num,
.t3i-tpl--pop .t3i-tpl-date { color: rgba(255, 255, 255, .9); }
.t3i-tpl--pop .t3i-badge { background: #111; border-radius: 999px; }
.t3i-tpl--pop .t3i-tpl-table th { color: #111; font-weight: 700; }
.t3i-tpl--pop .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    width: 62%;
    align-self: flex-end;
    border: 2px solid #111;
    box-shadow: 3px 3px 0 #111;
}

/* Slice: a single diagonal cut of colour across the whole page. */
.t3i-tpl--slice { position: relative; }
.t3i-tpl--slice::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        160deg,
        transparent 0 26%,
        color-mix(in srgb, var(--tpl-accent) 12%, transparent) 26% 34%,
        transparent 34% 100%
    );
    pointer-events: none;
}
.t3i-tpl--slice .t3i-tpl-head {
    position: relative;
    margin: -11px -11px 9px;
    padding: 13px 11px 18px;
    background: var(--tpl-accent);
    clip-path: polygon(0 0, 100% 0, 100% 74%, 0 100%);
    color: #fff;
}
.t3i-tpl--slice .t3i-tpl-title { color: #fff; }
.t3i-tpl--slice .t3i-tpl-num,
.t3i-tpl--slice .t3i-tpl-date { color: rgba(255, 255, 255, .82); }
.t3i-tpl--slice .t3i-badge { background: rgba(0, 0, 0, .2); }
.t3i-tpl--slice .t3i-tpl-total {
    position: relative;
    margin: 6px -11px 0;
    padding: 8px 11px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--slice .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--slice .t3i-tpl-total b { font-size: 11px; }

/* Cascade: bars falling from the header, each one fainter. */
.t3i-tpl--cascade .t3i-tpl-head {
    position: relative;
    margin: -11px -11px 13px;
    padding: 13px 11px 14px;
    background: var(--tpl-accent);
    color: #fff;
}
.t3i-tpl--cascade .t3i-tpl-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 7px;
    background:
        linear-gradient(var(--tpl-accent), var(--tpl-accent)) 0 0 / 62% 3px no-repeat,
        linear-gradient(color-mix(in srgb, var(--tpl-accent) 45%, #fff),
                        color-mix(in srgb, var(--tpl-accent) 45%, #fff)) 0 4px / 34% 3px no-repeat;
}
.t3i-tpl--cascade .t3i-tpl-title { color: #fff; }
.t3i-tpl--cascade .t3i-tpl-num,
.t3i-tpl--cascade .t3i-tpl-date { color: rgba(255, 255, 255, .82); }
.t3i-tpl--cascade .t3i-badge { background: rgba(0, 0, 0, .2); }
.t3i-tpl--cascade .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--cascade .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.t3i-tpl--cascade .t3i-tpl-total b { font-size: 11px; }

/* Bolt: a charged zigzag along the foot of the header. */
.t3i-tpl--bolt .t3i-tpl-head {
    position: relative;
    margin: -11px -11px 12px;
    padding: 13px 11px 14px;
    background: var(--tpl-accent);
    color: #1b1b1b;
}
.t3i-tpl--bolt .t3i-tpl-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 5px;
    background:
        linear-gradient(135deg, var(--tpl-accent) 25%, transparent 25%) 0 0 / 8px 5px repeat-x,
        linear-gradient(-135deg, var(--tpl-accent) 25%, transparent 25%) 0 0 / 8px 5px repeat-x;
}
.t3i-tpl--bolt .t3i-tpl-title { color: #1b1b1b; font-weight: 800; letter-spacing: .06em; }
.t3i-tpl--bolt .t3i-tpl-num,
.t3i-tpl--bolt .t3i-tpl-date { color: rgba(0, 0, 0, .6); }
.t3i-tpl--bolt .t3i-badge { background: #1b1b1b; color: #fff; }
.t3i-tpl--bolt .t3i-tpl-total {
    margin: 6px 0 0;
    padding: 5px 8px;
    border-radius: 2px;
    width: 62%;
    align-self: flex-end;
    color: #1b1b1b;
}

/* Horizon: the sun going down behind the totals. */
.t3i-tpl--horizon {
    background-image: linear-gradient(
        180deg,
        transparent 58%,
        color-mix(in srgb, var(--tpl-accent) 10%, transparent) 78%,
        color-mix(in srgb, var(--tpl-accent) 22%, transparent) 100%
    );
}
.t3i-tpl--horizon .t3i-tpl-head { border-bottom: 1px solid var(--tpl-rule); padding-bottom: 7px; }
.t3i-tpl--horizon .t3i-tpl-title { color: var(--tpl-accent); font-weight: 800; }
.t3i-tpl--horizon .t3i-tpl-total {
    margin: 6px -11px 0;
    padding: 8px 11px;
    background: linear-gradient(90deg, var(--tpl-accent), #ef4444);
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
}
.t3i-tpl--horizon .t3i-tpl-total span { font-size: 5.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.t3i-tpl--horizon .t3i-tpl-total b { font-size: 11px; }

/* ==========================================================================
   FOOT OF THE CARD

   With the cards stretched to a common height, whatever ends the document now
   lands on the paper's bottom edge. That is right for the designs whose total is a
   full-bleed bar (it is meant to run edge to edge) but wrong for the ones whose
   total is an inset chip, which would otherwise be pressed against the edge with
   no margin. Give those the bottom padding the card's other sides already have.
   ========================================================================== */

.t3i-tpl > .t3i-tpl-total:last-child { margin-bottom: 11px; }

/* The full-bleed footers stay flush — they are the exception, so they are the
   ones that opt out. */
.t3i-tpl--navy > .t3i-tpl-total:last-child,
.t3i-tpl--gold > .t3i-tpl-total:last-child,
.t3i-tpl--teal > .t3i-tpl-total:last-child,
.t3i-tpl--violet > .t3i-tpl-total:last-child,
.t3i-tpl--gradient > .t3i-tpl-total:last-child,
.t3i-tpl--ribbon > .t3i-tpl-total:last-child,
.t3i-tpl--split > .t3i-tpl-total:last-child,
.t3i-tpl--sunset > .t3i-tpl-total:last-child,
.t3i-tpl--midnight > .t3i-tpl-total:last-child,
.t3i-tpl--blueprint > .t3i-tpl-total:last-child,
.t3i-tpl--arc > .t3i-tpl-total:last-child,
.t3i-tpl--frame > .t3i-tpl-total:last-child,
.t3i-tpl--stripe > .t3i-tpl-total:last-child,
.t3i-tpl--blocks > .t3i-tpl-total:last-child,
.t3i-tpl--glow > .t3i-tpl-total:last-child,
.t3i-tpl--brutal > .t3i-tpl-total:last-child,
.t3i-tpl--sidebar > .t3i-tpl-total:last-child,
.t3i-tpl--eclipse > .t3i-tpl-total:last-child,
.t3i-tpl--carbon > .t3i-tpl-total:last-child,
.t3i-tpl--ember > .t3i-tpl-total:last-child,
.t3i-tpl--checker > .t3i-tpl-total:last-child,
.t3i-tpl--halftone > .t3i-tpl-total:last-child,
.t3i-tpl--marquee > .t3i-tpl-total:last-child,
.t3i-tpl--duotone > .t3i-tpl-total:last-child,
.t3i-tpl--mesh > .t3i-tpl-total:last-child,
.t3i-tpl--beacon > .t3i-tpl-total:last-child,
.t3i-tpl--slice > .t3i-tpl-total:last-child,
.t3i-tpl--cascade > .t3i-tpl-total:last-child,
.t3i-tpl--horizon > .t3i-tpl-total:last-child { margin-bottom: 0; }

/* The caption is a fixed footer under the paper — it must not absorb the stretch. */
.t3i-card-name { flex: 0 0 auto; }