/* ==========================================================================
   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 the active theme's landing
   and auth stylesheets. 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 (below 1024px the window scrolls). */
.t3i-page {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ==========================================================================
   HERO — copy on the left, three designs fanned out on the right
   ========================================================================== */

.t3i-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
    padding: clamp(34px, 7vh, 64px) 6% clamp(26px, 5vh, 44px);
    background:
        radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--t3-primary) 10%, transparent) 0%, transparent 70%);
}

.t3i-hero-title {
    margin: 14px 0 12px;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.06;
    letter-spacing: -.025em;
    font-weight: 800;
    color: var(--t3-text);
}

.t3i-hero-text {
    margin: 0 0 24px;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--t3-text-muted);
}

.t3i-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.t3i-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: var(--t3-radius, 10px);
    background: var(--t3-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: var(--t3-shadow-btn);
    transition: transform .12s ease, filter .15s ease;
}

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

.t3i-cta--ghost {
    background: transparent;
    color: var(--t3-text);
    border-color: var(--t3-border);
    box-shadow: none;
}

.t3i-cta--ghost:hover,
.t3i-cta--ghost:focus {
    color: var(--t3-text);
    background: var(--t3-subtle-bg);
    filter: none;
}

.t3i-points {
    list-style: none;
    margin: 0;
    padding: 14px 0 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--t3-border);
}

/* Side by side: icon left of a short line, divided by hairlines. */
.t3i-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--t3-text);
}

.t3i-points li:first-child { padding-left: 0; }
.t3i-points li + li { border-left: 1px solid var(--t3-border); }

.t3i-points i {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--t3-primary) 12%, transparent);
    color: var(--t3-primary);
    font-size: 13px;
}

/* Three real designs, fanned. Each is the same miniature the gallery uses. */
.t3i-stack {
    position: relative;
    height: 330px;
    max-width: 460px;
    width: 100%;
    justify-self: center;
}

.t3i-stack-item {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 208px;
    margin-left: -104px;
    transition: transform .3s ease;
}

.t3i-stack-item .t3i-tpl { min-height: 268px; }
.t3i-stack-item:nth-child(1) { transform: translateX(-118px) rotate(-8deg); }
.t3i-stack-item:nth-child(2) { transform: translateY(-18px); z-index: 2; }
.t3i-stack-item:nth-child(3) { transform: translateX(118px) rotate(8deg); }

.t3i-stack:hover .t3i-stack-item:nth-child(1) { transform: translateX(-138px) rotate(-11deg); }
.t3i-stack:hover .t3i-stack-item:nth-child(3) { transform: translateX(138px) rotate(11deg); }

/* ==========================================================================
   TEMPLATE GALLERY — filters + grid of tiles
   ========================================================================== */

.t3i-gallery {
    padding: clamp(18px, 3vh, 28px) 6% clamp(36px, 6vh, 60px);
    border-top: 1px solid var(--t3-border);
    scroll-margin-top: 10px;
}

.t3i-gallery-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 24px;
    margin-bottom: 16px;
}

.t3i-gallery-title {
    margin: 0 0 4px;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--t3-text);
}

.t3i-gallery-text {
    margin: 0;
    font-size: 14px;
    color: var(--t3-text-muted);
}

.t3i-search {
    position: relative;
    display: block;
    width: min(280px, 100%);
}

.t3i-search i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--t3-text-muted);
}

.t3i-search input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--t3-border);
    border-radius: 999px;
    background: var(--t3-field-bg, var(--t3-bg));
    color: var(--t3-text);
    font: inherit;
    font-size: 14px;
}

.t3i-search input:focus {
    outline: none;
    border-color: var(--t3-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-primary) 18%, transparent);
}

.t3i-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 22px;
}

.t3i-chips {
    display: flex;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.t3i-chips::-webkit-scrollbar { display: none; }

.t3i-chips button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid var(--t3-border);
    border-radius: 999px;
    background: var(--t3-bg);
    color: var(--t3-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.t3i-chips button span {
    font-size: 11px;
    font-weight: 700;
    opacity: .7;
}

.t3i-chips button:hover { color: var(--t3-text); border-color: var(--t3-border-hover); }

.t3i-chips button.is-on {
    background: var(--t3-text);
    border-color: var(--t3-text);
    color: var(--t3-bg);
}

.t3i-showing {
    font-size: 12.5px;
    color: var(--t3-text-muted);
}

.t3i-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 24px 20px;
}

.t3i-tile { margin: 0; min-width: 0; }
.t3i-tile[hidden] { display: none; }

.t3i-tile-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 14px;
}

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

/* A stage tinted with the design's own accent; the paper sits on it at its native
   size and is cropped at the foot so every tile is the same height. */
.t3i-tile-preview {
    position: relative;
    display: flex;
    justify-content: center;
    height: 292px;
    padding-top: 22px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--t3-border);
    background: color-mix(in srgb, var(--tile-accent) 9%, var(--t3-subtle-bg));
    transition: border-color .15s ease, box-shadow .18s ease;
}

.t3i-tile-preview .t3i-tpl {
    width: 208px;
    flex: 0 0 auto;
    min-height: 268px;
    box-shadow: 0 10px 26px rgba(16, 24, 40, .14);
}

.t3i-tile-link:hover .t3i-tile-preview,
.t3i-tile-link:focus-visible .t3i-tile-preview {
    border-color: color-mix(in srgb, var(--tile-accent) 45%, var(--t3-border));
    box-shadow: 0 18px 40px rgba(16, 24, 40, .10);
}

.t3i-tile-link:hover .t3i-tpl,
.t3i-tile-link:focus-visible .t3i-tpl {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px rgba(16, 24, 40, .22);
}

/* Names the action on hover; on touch screens it is always shown. */
.t3i-card-use {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--t3-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .25);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

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

@media (hover: none) {
    .t3i-card-use { opacity: 1; transform: translate(-50%, 0); }
}

.t3i-tile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 0;
}

.t3i-tile-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--tile-accent);
}

.t3i-tile-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--t3-text);
}

.t3i-tile-style {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--t3-text-muted);
}

.t3i-empty {
    padding: 48px 16px;
    text-align: center;
    color: var(--t3-text-muted);
}

.t3i-empty i { font-size: 22px; margin-bottom: 10px; }
.t3i-empty p { margin: 0; font-size: 14px; }

.t3i-empty button {
    border: none;
    background: none;
    padding: 0;
    color: var(--t3-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Responsive ---- */
@media (max-width: 1200px) {
    .t3i-hero { grid-template-columns: 1fr; }
    .t3i-stack { height: 310px; }
}

@media (max-width: 1024px) {
    /* The window scrolls below 1024px (see the landing), so the page is in flow. */
    .t3i-page { position: static; overflow: visible; }
}

@media (max-width: 600px) {
    .t3i-hero { padding: 30px 5% 24px; }
    .t3i-hero-actions .t3i-cta { flex: 1 1 100%; }
    /* Too narrow for three across: one compact row each, icon still on the left. */
    .t3i-points { grid-template-columns: 1fr; gap: 10px; }
    .t3i-points li,
    .t3i-points li:first-child { padding: 0; font-size: 13px; }
    .t3i-points li + li { border-left: none; }
    .t3i-stack { display: none; }
    .t3i-gallery { padding: 22px 5% 40px; }
    .t3i-search { width: 100%; }
    /* Two up, with the paper scaled down — one column made forty templates a very long scroll. */
    .t3i-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    .t3i-tile-preview { height: 212px; padding-top: 14px; border-radius: 12px; }
    .t3i-tile-preview .t3i-tpl { zoom: .72; }
    .t3i-card-use { display: none; }
    .t3i-tile-meta { padding-top: 8px; gap: 6px; }
    .t3i-tile-name { font-size: 13px; }
    .t3i-tile-style { display: none; }
}

.dark-theme .t3i-tile-preview { background: color-mix(in srgb, var(--tile-accent) 12%, var(--t3-field-bg)); }
.dark-theme .t3i-tile-link:hover .t3i-tpl { box-shadow: 0 22px 44px rgba(0, 0, 0, .5); }

/* ==========================================================================
   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%;
    /* Fills the min-height its tile sets, so every card in the grid 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;
}

.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;
}

.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; }

/* ==========================================================================
   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;
}

/* ==========================================================================
   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;
}

/* ==========================================================================
   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--sidebar > .t3i-tpl-total:last-child { margin-bottom: 0; }