/* ==========================================================================
   Theme 3 — Invoicer builder.

   The workspace a template opens into: a stepper, one editing pane at a time on
   the left, and the document itself on the right, redrawn on every keystroke.

   Scoped to .t3b-*. The paper in the preview is the *same* .t3i-tpl document the
   gallery cards render (theme3-invoicer.css owns it, variants and all) — it is
   simply scaled up here, so a design can never look one way in the gallery and
   another in the builder. Only what the gallery has no equivalent for lives here:
   the shell, the form controls, the signature pad and the dialogs.
   ========================================================================== */

.t3b-page {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 22px clamp(16px, 3vw, 34px) 40px;
}

/* ==========================================================================
   TOP BAR
   ========================================================================== */

.t3b-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.t3b-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--t3-text-muted);
}

.t3b-crumbs a { color: var(--t3-text-muted); text-decoration: none; }
.t3b-crumbs a:hover { color: var(--t3-primary); }
.t3b-crumbs i { font-size: 9px; opacity: .6; }
.t3b-crumbs b { color: var(--t3-text); font-weight: 600; }

.t3b-title {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--t3-text);
}

.t3b-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--t3-text-muted);
}

.t3b-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Says, quietly, that nothing has been lost — the draft lives in this browser. */
.t3b-saved {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--t3-primary) 10%, transparent);
    color: var(--t3-primary);
    font-size: 11px;
    font-weight: 600;
    opacity: 0;
    transition: opacity .25s ease;
}

.t3b-saved.is-on { opacity: 1; }

/* ---- Buttons ----------------------------------------------------------- */

.t3b-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--t3-border);
    border-radius: 9px;
    background: var(--t3-surface);
    color: var(--t3-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease, filter .15s ease;
}

.t3b-btn:hover { border-color: var(--t3-primary); color: var(--t3-primary); }

.t3b-btn--primary {
    border-color: transparent;
    background: var(--t3-primary);
    color: #fff;
}

.t3b-btn--primary:hover { color: #fff; filter: brightness(1.08); }

.t3b-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--t3-text-muted);
}

.t3b-btn--ghost:hover { color: var(--t3-primary); }

.t3b-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.t3b-btn--sm { padding: 7px 11px; font-size: 12px; }

/* ---- Overflow menu ------------------------------------------------------
   Save and Download are real actions, but they are not the one the visitor came
   for. Keeping them here leaves exactly one primary button on the screen. */

.t3b-more { position: relative; }

.t3b-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    display: none;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--t3-border);
    border-radius: 11px;
    background: var(--t3-surface);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

.t3b-menu.is-open { display: block; }

.t3b-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--t3-text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.t3b-menu button:hover { background: color-mix(in srgb, var(--t3-primary) 10%, transparent); color: var(--t3-primary); }
.t3b-menu button i { width: 14px; color: var(--t3-text-muted); }
.t3b-menu button:hover i { color: var(--t3-primary); }

/* ---- The vault ----------------------------------------------------------
   The invoices this address owns. An empty vault says so rather than showing an
   empty box — nothing is more confusing than a list that might be broken. */

.t3b-vault {
    display: grid;
    gap: 8px;
    max-height: 46vh;
    overflow-y: auto;
    margin-top: 6px;
}

.t3b-vault-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--t3-border);
    border-radius: 11px;
}

.t3b-vault-row:hover { border-color: var(--t3-primary); }
.t3b-vault-copy { flex: 1 1 auto; min-width: 0; }

.t3b-vault-num {
    font-size: 13px;
    font-weight: 700;
    color: var(--t3-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t3b-vault-meta { font-size: 11.5px; color: var(--t3-text-muted); }
.t3b-vault-sum { font-size: 13px; font-weight: 700; color: var(--t3-primary); white-space: nowrap; }

.t3b-vault-empty {
    padding: 26px 16px;
    border: 1px dashed var(--t3-border);
    border-radius: 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--t3-text-muted);
}

/* ==========================================================================
   STEPPER

   The five panes, and the only way through them. A step the document is not ready
   for is disabled rather than hidden — the visitor can see what is still ahead.
   ========================================================================== */

.t3b-steps {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid var(--t3-border);
    border-radius: 12px;
    background: var(--t3-surface);
    scrollbar-width: none;
}

.t3b-steps::-webkit-scrollbar { display: none; }

.t3b-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 8px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--t3-text-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.t3b-step:hover:not(:disabled) { color: var(--t3-text); }
.t3b-step:disabled { opacity: .45; cursor: not-allowed; }

.t3b-step-num {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--t3-border);
    font-size: 11px;
    font-weight: 700;
}

.t3b-step.is-current { color: var(--t3-text); }
.t3b-step.is-current .t3b-step-num {
    border-color: transparent;
    background: var(--t3-primary);
    color: #fff;
}

.t3b-step.is-done .t3b-step-num {
    border-color: var(--t3-primary);
    background: transparent;
    color: var(--t3-primary);
}

/* Hairline between steps. Not a progress bar — the steps are revisitable. */
.t3b-step-line {
    flex: 1 1 18px;
    min-width: 12px;
    height: 1px;
    background: var(--t3-border);
}

/* ==========================================================================
   LAYOUT — editor left, document right, an even split
   ========================================================================== */

.t3b-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

@media (max-width: 1199px) {
    .t3b-grid { grid-template-columns: minmax(0, 1fr); }
}

.t3b-panel {
    border: 1px solid var(--t3-border);
    border-radius: 14px;
    background: var(--t3-surface);
}

.t3b-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--t3-border);
}

.t3b-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--t3-text);
}

.t3b-panel-title i { color: var(--t3-primary); }
.t3b-panel-body { padding: 18px; }

.t3b-pane { display: none; }
.t3b-pane.is-active { display: block; }

/* A control that turns something on owns the field that fills it in: the field is
   not on the screen at all until the switch is. */
.t3b-reveal { display: none; padding: 2px 0 10px; }
.t3b-reveal.is-open { display: block; animation: t3b-drop .16s ease; }

@keyframes t3b-drop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Fields ------------------------------------------------------------ */

.t3b-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.t3b-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t3b-field--wide { grid-column: 1 / -1; }

@media (max-width: 575px) {
    .t3b-fields,
    .t3b-fields--3 { grid-template-columns: minmax(0, 1fr); }
}

.t3b-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--t3-text);
}

.t3b-label span { font-weight: 400; color: var(--t3-text-muted); }

.t3b-input,
.t3b-select,
.t3b-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--t3-border);
    border-radius: 9px;
    background: var(--t3-bg, transparent);
    color: var(--t3-text);
    font: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.t3b-textarea { resize: vertical; min-height: 84px; line-height: 1.5; }

.t3b-input:focus,
.t3b-select:focus,
.t3b-textarea:focus {
    border-color: var(--t3-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-primary) 14%, transparent);
}

.t3b-input::placeholder,
.t3b-textarea::placeholder { color: var(--t3-text-muted); opacity: .75; }

.t3b-input.is-bad,
.t3b-textarea.is-bad { border-color: #e0517a; }

.t3b-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--t3-text-muted); }
.t3b-hint--bad { color: #e0517a; }

/* A subdivision of a pane — "Your business", "Bill to". */
.t3b-block + .t3b-block { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--t3-border); }

.t3b-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--t3-text-muted);
}

.t3b-block-note {
    margin-left: auto;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ==========================================================================
   LINE ITEMS
   ========================================================================== */

.t3b-items { display: grid; gap: 10px; }

.t3b-items-head,
.t3b-item {
    display: grid;
    grid-template-columns: 1.6fr 64px 110px 110px 30px;
    align-items: center;
    gap: 8px;
}

.t3b-items-head {
    padding: 0 2px 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t3-text-muted);
}

.t3b-items-head span:nth-child(n+2) { text-align: right; }

.t3b-item {
    padding: 10px;
    border: 1px solid var(--t3-border);
    border-radius: 10px;
}

.t3b-item .t3b-input { padding: 8px 10px; font-size: 13px; }
.t3b-item-desc { margin-top: 6px; }
.t3b-item input[type="number"] { text-align: right; }

.t3b-item-amount {
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: var(--t3-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t3b-item-del {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--t3-text-muted);
    cursor: pointer;
}

.t3b-item-del:hover { background: color-mix(in srgb, #e0517a 12%, transparent); color: #e0517a; }
.t3b-item-del:disabled { opacity: .3; cursor: not-allowed; }

@media (max-width: 767px) {
    .t3b-items-head { display: none; }

    .t3b-item {
        grid-template-columns: 1fr 1fr 30px;
        gap: 8px;
    }

    .t3b-item-name,
    .t3b-item-desc { grid-column: 1 / -1; }
    .t3b-item-amount { grid-column: 1 / 3; text-align: left; }
}

.t3b-items-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* The running totals under the items — the same arithmetic the paper shows. */
.t3b-totals {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--t3-text) 4%, transparent);
}

.t3b-totals div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--t3-text-muted);
}

.t3b-totals div.t3b-totals-due {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--t3-border);
    font-size: 15px;
    font-weight: 800;
    color: var(--t3-text);
}

.t3b-totals-due b { color: var(--t3-primary); }

/* ==========================================================================
   DESIGN PANE — the template switcher
   ========================================================================== */

.t3b-designs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 10px;
}

/* Twenty designs stacked down the pane buried every control under them. The
   catalogue scrolls in its own well instead, so the switcher stays one screenful. */
.t3b-designs--scroll {
    max-height: 258px;
    overflow-y: auto;
    padding: 2px 8px 2px 2px;
    scrollbar-width: thin;
}

.t3b-design {
    padding: 9px;
    border: 1px solid var(--t3-border);
    border-radius: 10px;
    background: none;
    color: var(--t3-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.t3b-design:hover { border-color: var(--t3-primary); transform: translateY(-2px); }

.t3b-design.is-on {
    border-color: var(--t3-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-primary) 16%, transparent);
}

/* A three-stripe reduction of the design: its paper, its accent, its ink. */
.t3b-design-chip {
    height: 42px;
    margin-bottom: 8px;
    border-radius: 6px;
    background:
        linear-gradient(180deg, transparent 0 62%, var(--chip-accent) 62% 100%),
        var(--chip-paper, #fff);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

.t3b-design-name { font-size: 12px; font-weight: 600; }
.t3b-design-group { font-size: 10.5px; color: var(--t3-text-muted); }

.t3b-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.t3b-swatch {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    cursor: pointer;
}

.t3b-swatch.is-on { border-color: var(--t3-text); }

.t3b-swatch--custom {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px dashed var(--t3-border);
    border-radius: 50%;
    background: none;
    cursor: pointer;
}

/* ---- Switches ---------------------------------------------------------- */

.t3b-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    cursor: pointer;
}

.t3b-switch + .t3b-switch { border-top: 1px dashed var(--t3-border); }

/* A switch that only exists because of the one above it — indented, and without a
   rule of its own, so the two read as one decision. */
.t3b-switch--sub {
    padding: 8px 12px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--t3-text) 4%, transparent);
}

.t3b-switch--sub .t3b-switch-copy { font-size: 12.5px; }
.t3b-switch-copy { font-size: 13px; font-weight: 600; color: var(--t3-text); }
.t3b-switch-copy small { display: block; font-weight: 400; color: var(--t3-text-muted); }
.t3b-switch input { position: absolute; opacity: 0; pointer-events: none; }

.t3b-switch-track {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--t3-text) 18%, transparent);
    transition: background .15s ease;
}

.t3b-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}

.t3b-switch input:checked + .t3b-switch-track { background: var(--t3-primary); }
.t3b-switch input:checked + .t3b-switch-track::after { transform: translateX(18px); }
.t3b-switch input:focus-visible + .t3b-switch-track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-primary) 20%, transparent); }

/* ==========================================================================
   SIGN PANE
   ========================================================================== */

.t3b-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    padding: 4px;
    border: 1px solid var(--t3-border);
    border-radius: 10px;
}

.t3b-tab {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--t3-text-muted);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.t3b-tab.is-on {
    background: color-mix(in srgb, var(--t3-primary) 12%, transparent);
    color: var(--t3-primary);
}

.t3b-padwrap {
    position: relative;
    border: 1px solid var(--t3-border);
    border-radius: 11px;
    background: #fff;
    overflow: hidden;
}

/* The pad is a sheet of paper whatever the site theme is — you sign on white. */
.t3b-pad { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; }

.t3b-pad-rule {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 40px;
    border-bottom: 1px dashed #c9cfd8;
    pointer-events: none;
}

.t3b-pad-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    text-align: center;
    font-size: 11.5px;
    color: #98a1ae;
    pointer-events: none;
}

.t3b-pad-clear { position: absolute; right: 10px; bottom: 10px; }

/* Typed signature: the same script the document will print. */
.t3b-typed {
    width: 100%;
    padding: 34px 16px;
    border: 1px solid var(--t3-border);
    border-radius: 11px;
    background: #fff;
    color: #1c2430;
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: 34px;
    text-align: center;
    outline: none;
}

.t3b-confirm {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--t3-text-muted);
    cursor: pointer;
}

.t3b-confirm input { margin-top: 2px; accent-color: var(--t3-primary); width: 16px; height: 16px; }

/* ==========================================================================
   SEND PANE
   ========================================================================== */

.t3b-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.t3b-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--t3-border);
    border-radius: 11px;
    background: none;
    color: var(--t3-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.t3b-method:hover { border-color: var(--t3-primary); }

.t3b-method.is-on {
    border-color: var(--t3-primary);
    background: color-mix(in srgb, var(--t3-primary) 7%, transparent);
}

.t3b-method-ic {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: color-mix(in srgb, var(--t3-primary) 12%, transparent);
    color: var(--t3-primary);
}

.t3b-method-ic--wa { background: color-mix(in srgb, #25d366 16%, transparent); color: #1da851; }
.t3b-method-ic--link { background: color-mix(in srgb, var(--t3-text) 10%, transparent); color: var(--t3-text); }
.t3b-method-name { font-size: 13px; font-weight: 600; }
.t3b-method-sub { font-size: 11px; color: var(--t3-text-muted); }

/* The PDF that will ride along with the message. */
.t3b-attach {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--t3-border);
    border-radius: 10px;
}

.t3b-attach i { color: #e0517a; font-size: 18px; }
.t3b-attach-name { font-size: 12.5px; font-weight: 600; color: var(--t3-text); }
.t3b-attach-meta { font-size: 11px; color: var(--t3-text-muted); }

/* CC list — chips that can be taken back off. */
.t3b-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.t3b-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--t3-border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--t3-text);
}

.t3b-chip button {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--t3-text) 10%, transparent);
    color: var(--t3-text-muted);
    font-size: 9px;
    cursor: pointer;
}

.t3b-chip button:hover { background: #e0517a; color: #fff; }

/* ---- Pane footer: the way on ------------------------------------------- */

.t3b-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-top: 1px solid var(--t3-border);
}

.t3b-nav-note { font-size: 11.5px; color: var(--t3-text-muted); }

/* ==========================================================================
   LIVE PREVIEW
   ========================================================================== */

.t3b-preview {
    position: sticky;
    top: 0;
    border: 1px solid var(--t3-border);
    border-radius: 14px;
    background: var(--t3-surface);
}

@media (max-width: 1199px) {
    .t3b-preview { position: static; }
}

.t3b-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--t3-border);
}

.t3b-preview-tools { display: flex; align-items: center; gap: 6px; }

.t3b-zoom {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--t3-border);
    border-radius: 8px;
}

.t3b-zoom button {
    width: 26px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--t3-text);
    font-size: 11px;
    cursor: pointer;
}

.t3b-zoom button:hover { background: color-mix(in srgb, var(--t3-text) 8%, transparent); }
.t3b-zoom span { min-width: 40px; text-align: center; font-size: 11px; color: var(--t3-text-muted); }

/* The stage the document stands on. Its own scroller: a long invoice must not
   push the editor's height around. */
.t3b-stage {
    display: flex;
    justify-content: center;
    max-height: calc(100vh - 210px);
    overflow: auto;
    padding: 20px 16px;
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--t3-text) 12%, transparent) 1px, transparent 0)
        0 0 / 16px 16px;

    /* The bar is hidden, not the scrolling: the stage still takes a wheel, a trackpad,
       a swipe and the keyboard. The document is the point of this panel, and a gutter
       of chrome down its edge is a frame nobody asked for. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.t3b-stage::-webkit-scrollbar { width: 0; height: 0; }

@media (max-width: 1199px) {
    .t3b-stage { max-height: none; }
}

/* The document is the gallery's miniature, magnified. `zoom` (not `transform`)
   because zoom reflows: the stage gets the document's true scrolling height, and
   nothing has to be measured in JS.

   Two dials, and they do different jobs. The zoom is how large the document is *read*
   at — it scales the type with the paper, so it is what sets the size of the words
   (SHEET/REST in the JS are the same numbers; change one without the other and the zoom
   readout stops meaning what it says). The width is how much paper there is, in the
   sheet's own scale, so widening it fills a roomy preview with document rather than with
   bigger words. The JS sets both against the stage; the fallbacks here are the sheet
   every template was laid out against, at the magnification it rests on. */
.t3b-paper {
    width: var(--t3b-sheet, 208px);
    flex: 0 0 auto;
    zoom: var(--t3b-zoom, 2.1);
}

.t3b-paper .t3i-tpl {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
    transition: none;
}

/* Empty fields are normally simply absent from the paper — the document should
   read as it will print. This is the escape hatch for editing: show the holes. */
.t3b-paper.show-empty .t3b-empty { display: block; opacity: .55; }
.t3b-empty { display: none; font-style: italic; }

/* The signature strip on the paper. Sized in the document's own scale (the card
   is set in 6px type), so it magnifies with everything else. */
.t3i-tpl-sign {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0 2px;
}

.t3i-tpl-sign-note { max-width: 55%; color: var(--tpl-muted); }

.t3i-tpl-sign-by { text-align: center; position: relative; }
.t3i-tpl-sign-label { color: var(--tpl-muted); }

.t3i-tpl-sign-mark {
    display: block;
    min-width: 60px;
    height: 22px;
    margin: 1px auto 0;
    object-fit: contain;
    object-position: bottom center;
}

.t3i-tpl-sign-typed {
    display: block;
    min-width: 60px;
    height: 22px;
    line-height: 22px;
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: 13px;
    color: var(--tpl-ink);
}

.t3i-tpl-sign-rule { border-top: 1px solid var(--tpl-rule); padding-top: 2px; font-weight: 700; }
.t3i-tpl-sign-role { color: var(--tpl-muted); font-weight: 400; }

/* The stamp: a real one is round, inked in the accent, and slightly askew. */
.t3i-tpl-stamp {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1.5px solid var(--tpl-accent);
    border-radius: 50%;
    transform: rotate(-11deg);
    color: var(--tpl-accent);
    font-size: 4.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-align: center;
    text-transform: uppercase;
    opacity: .85;
}

.t3i-tpl-stamp b { display: block; font-size: 6px; letter-spacing: .02em; }

.t3i-tpl-terms {
    padding: 5px 0 2px;
    color: var(--tpl-muted);
    border-top: 1px solid var(--tpl-rule);
}

.t3i-tpl-terms b { display: block; color: var(--tpl-ink); }

/* Foot of the preview: the number that decides whether the visitor sends it. */
.t3b-preview-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-top: 1px solid var(--t3-border);
    font-size: 12px;
    color: var(--t3-text-muted);
}

.t3b-preview-foot b { font-size: 15px; color: var(--t3-text); }

/* ==========================================================================
   DIALOGS

   The gate before anything leaves the browser, and the receipt after it does.
   ========================================================================== */

.t3b-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(9, 13, 20, .62);
    backdrop-filter: blur(3px);
}

.t3b-modal.is-open { display: flex; }

.t3b-modal-box {
    width: min(100%, 460px);
    max-height: 92vh;
    overflow-y: auto;
    padding: 26px;
    border-radius: 16px;
    background: var(--t3-surface);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
    animation: t3b-rise .18s ease;
}

@keyframes t3b-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.t3b-modal-ic {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--t3-primary) 12%, transparent);
    color: var(--t3-primary);
    font-size: 19px;
}

.t3b-modal-ic--ok { background: color-mix(in srgb, #1e9e5a 14%, transparent); color: #1e9e5a; }

.t3b-modal-title {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 800;
    color: var(--t3-text);
}

.t3b-modal-text {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--t3-text-muted);
}

.t3b-modal-foot { display: flex; gap: 10px; margin-top: 18px; }
.t3b-modal-foot .t3b-btn { flex: 1 1 0; justify-content: center; }

/* What the visitor is about to hand over, restated in one line. */
.t3b-recap {
    display: grid;
    gap: 7px;
    margin: 16px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--t3-text) 4%, transparent);
}

.t3b-recap div { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--t3-text-muted); }
.t3b-recap b { color: var(--t3-text); font-weight: 600; text-align: right; }

/* ---- The verification code ---------------------------------------------
   Six boxes, not one field: the shape of the input tells you the shape of the
   answer, and the last keystroke is the submit — there is no button to press. */

.t3b-code {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 20px 0 12px;
}

.t3b-code-box {
    width: 100%;
    padding: 14px 0;
    border: 1px solid var(--t3-border);
    border-radius: 10px;
    background: transparent;
    color: var(--t3-text);
    font: inherit;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.t3b-code-box:focus {
    border-color: var(--t3-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t3-primary) 16%, transparent);
}

.t3b-code-box:disabled { opacity: .7; cursor: default; }

/* The whole row answers at once — a code is right or wrong, never partly either. */
.t3b-code.is-bad .t3b-code-box {
    border-color: #e0517a;
    animation: t3b-shake .3s ease;
}

.t3b-code.is-ok .t3b-code-box {
    border-color: #1e9e5a;
    background: color-mix(in srgb, #1e9e5a 10%, transparent);
}

@keyframes t3b-shake {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.t3b-code-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 20px;
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t3-text-muted);
}

.t3b-code-state.is-bad { color: #e0517a; }
.t3b-code-state.is-ok { color: #1e9e5a; }

.t3b-spin {
    width: 13px;
    height: 13px;
    border: 2px solid color-mix(in srgb, var(--t3-text) 20%, transparent);
    border-top-color: var(--t3-primary);
    border-radius: 50%;
    animation: t3b-spin .6s linear infinite;
}

@keyframes t3b-spin { to { transform: rotate(360deg); } }

.t3b-code-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--t3-border);
}

/* ---- The receipt's action ----------------------------------------------- */

/* The invoice's address, shown rather than only copied. */
.t3b-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.t3b-link .t3b-input {
    font-size: 12px;
    color: var(--t3-text-muted);
}

.t3b-link .t3b-btn { flex: 0 0 auto; }

.t3b-done-note {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--t3-text-muted);
}

.t3b-done-note a { color: var(--t3-primary); font-weight: 600; text-decoration: none; }

/* WhatsApp is a brand before it is a button — the green is what people look for. */
.t3b-btn--wa {
    background: #25d366;
    border-color: transparent;
    color: #04301a;
}

.t3b-btn--wa:hover { color: #04301a; filter: brightness(1.06); }

/* ---- States the panes can be in ----------------------------------------- */

/* A step with nothing to do, saying so. */
.t3b-off {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px dashed var(--t3-border);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--t3-text-muted);
}

.t3b-off i { margin-top: 2px; color: var(--t3-primary); font-size: 15px; }
.t3b-off b { display: block; color: var(--t3-text); }
.t3b-off .t3b-btn { margin-top: 12px; }

/* Draft or sent, at a glance, in the vault. */
.t3b-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--t3-text) 10%, transparent);
    color: var(--t3-text-muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    vertical-align: middle;
}

.t3b-pill.is-sent {
    background: color-mix(in srgb, #1e9e5a 14%, transparent);
    color: #1e9e5a;
}

.t3b-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #14181f;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
    opacity: 0;
    transform: translate(-50%, 12px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.t3b-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.t3b-toast i { color: #4ade80; }

/* ==========================================================================
   SMALL SCREENS

   The builder is a two-column workspace, and on a phone it has one column. What
   matters is that the *document* stays reachable: an invoice you cannot see is an
   invoice you cannot trust, so the preview keeps its place under the editor rather
   than being hidden behind a tab.
   ========================================================================== */

@media (max-width: 767px) {
    .t3b-page { padding: 16px 14px 32px; }

    .t3b-top { align-items: stretch; gap: 12px; }
    .t3b-title { font-size: 22px; }

    /* The chip and the send button share the row; More collapses to its icon. */
    .t3b-actions { width: 100%; justify-content: space-between; }
    .t3b-more #t3bMore span,
    .t3b-btn--primary { flex: 0 0 auto; }
    .t3b-saved { order: -1; }

    .t3b-steps { padding: 8px; }
    .t3b-step { padding: 8px 9px; font-size: 12px; }
    .t3b-step-line { display: none; }

    .t3b-panel-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    .t3b-panel-body { padding: 14px; }
    .t3b-nav { padding: 12px 14px; }
    .t3b-nav-note { display: none; }

    .t3b-stage { padding: 14px 8px; }

    .t3b-code { gap: 6px; }
    .t3b-code-box { padding: 11px 0; font-size: 18px; }
    .t3b-modal-box { padding: 20px; }
    .t3b-modal-foot { flex-direction: column-reverse; }
}

/* The document is a fixed 208px of paper: below ~420px of stage it would need to
   shrink past legibility, so it scrolls sideways in its own well instead. */
@media (max-width: 380px) {
    .t3b-stage { justify-content: flex-start; }
}

/* ==========================================================================
   PRINT — the document, and nothing else.
   ========================================================================== */

@media print {
    body * { visibility: hidden; }

    .t3b-paper,
    .t3b-paper * { visibility: visible; }

    .t3b-page { position: static; overflow: visible; padding: 0; }

    .t3b-paper {
        position: absolute;
        top: 0;
        left: 0;
        width: 208px;
        zoom: 3.4;
    }

    .t3b-paper .t3i-tpl { box-shadow: none; }
    .t3b-empty { display: none !important; }
}