/* TaxSolve Design System — Web adaptation */
:root {
    --ts-page-gray:      #F7F7F7;
    --ts-accent-green:   #3EC91D;
    --ts-accent-hover:   #3F613A;
    --ts-accent-down:    #26960F;
    --ts-accent-light:   #E8FFE0;
    --ts-dark-text:      #1C1C1C;
    --ts-muted-text:     #5A5A5A;
    --ts-label-gray:     #646464;
    --ts-border:         #DCDCDC;
    --ts-copyright:      #2B393F;
    --ts-white:          #FFFFFF;

    /* Staff on-behalf-of (obo) banner — Decision 050. An amber/gold token set, deliberately
       DISTINCT from the green success/info banner (so "you are acting for a client" never reads
       as a confirmation) but NOT alarming (it is not the red error state). Designed from the
       TaxSolve palette per the Decision 032 in-canon-addendum precedent. */
    --ts-obo-bg:         #FFF8E6;  /* pale gold wash — the banner fill */
    --ts-obo-border:     #E0A815;  /* amber/gold rule — the banner border */
    --ts-obo-accent:     #8A6400;  /* deep amber — the banner heading text + icon */
    --ts-obo-meta:       #6B5418;  /* muted amber-brown — the plain-language meta line */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--ts-page-gray);
    color: var(--ts-dark-text);
    font-size: 14px;
}

a { color: var(--ts-accent-down); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--ts-accent-hover); }

/* ── Page wrapper (flex column for sticky footer) ── */
.ts-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* navy left column runs full height; header (white) covers the top */
    background: linear-gradient(to right, #1a2332 240px, var(--ts-page-gray) 240px);
}

/* ── Header ── */
.ts-header {
    height: 80px;
    background-color: var(--ts-white);
    border-bottom: 1px solid var(--ts-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(20, 28, 40, 0.06);
    position: relative;
    z-index: 2;
}

.ts-header-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.ts-header-logo {
    height: 36px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.ts-header-title {
    font-size: 14pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin-left: 20px;
    white-space: nowrap;
}

/* ── Portal switcher (header) ── */
.ts-portal-switcher {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

.ts-portal-btn {
    padding: 6px 16px;
    font-size: 10pt;
    font-weight: 600;
    color: var(--ts-muted-text);
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid transparent;
    transition: background-color 0.1s, color 0.1s, border-color 0.1s;
}

.ts-portal-btn:hover {
    background-color: var(--ts-accent-light);
    color: var(--ts-accent-down);
    text-decoration: none;
}

.ts-portal-btn.active {
    background-color: var(--ts-accent-green);
    color: var(--ts-white);
    border-color: var(--ts-accent-green);
}

.ts-portal-btn.active:hover {
    background-color: var(--ts-accent-down);
    color: var(--ts-white);
}

/* ── Content wrapper ── */
.ts-content-wrap {
    flex: 1;
    display: flex;
    overflow: hidden;
    background-color: var(--ts-page-gray);
}

/* ── Sidebar ── */
.ts-sidebar {
    width: 240px;
    background-color: #1a2332;
    border-right: 1px solid #141c28;
    flex-shrink: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.ts-nav {
    padding: 16px 0;
}

.ts-nav-item {
    padding: 8px 24px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 10pt;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: background-color 0.1s, color 0.1s;
}

.ts-nav-item:hover {
    background-color: #243044;
    color: var(--ts-white);
}

.ts-nav-item.active {
    background-color: #1b5e20;
    color: #fff;
    font-weight: 700;
    border-left: 4px solid var(--ts-accent-down);
    padding-left: 20px;
}

/* ── Sidebar footer (log out) ── */
.ts-sidebar-footer {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid #243044;
}
.ts-nav-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 10pt;
    font-weight: 500;
    border-radius: 2px;
    transition: background-color 0.1s, color 0.1s;
}
.ts-nav-logout:hover { background-color: #243044; color: var(--ts-white); text-decoration: none; }
.ts-nav-logout-icon { display: inline-flex; align-items: center; flex-shrink: 0; }

/* ── Main content area ── */
.ts-main {
    flex: 1;
    padding: 24px 24px 8px;
    overflow-y: auto;
}

/* ── Card ── */
.ts-card {
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 3px;
    padding: 20px 20px 16px;
}

/* ── Section label row ── */
.ts-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    margin-bottom: 8px;
}

.ts-section-label {
    font-size: 8pt;
    font-weight: 700;
    color: var(--ts-label-gray);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Accent button ── */
.btn-accent {
    background-color: var(--ts-accent-green);
    color: var(--ts-white);
    border: none;
    font-size: 10pt;
    font-weight: 600;
    padding: 5px 18px;
    cursor: pointer;
    border-radius: 2px;
    transition: background-color 0.1s;
    text-decoration: none;
    display: inline-block;
}

.btn-accent:hover, .btn-accent:focus {
    background-color: var(--ts-accent-hover);
    color: var(--ts-white);
    text-decoration: none;
}

.btn-accent:active {
    background-color: var(--ts-accent-down);
    color: var(--ts-white);
}

/* Stubbed phase-gated action (P2-T20 Review & File): a file action whose owning phase
   has not shipped renders as a real but DISABLED button — visible per canon,
   untriggerable (P4 submit-for-review / P6 e-file; P6 hard invariant: filing requires
   human approval). */
.btn-accent:disabled {
    background-color: var(--ts-border);
    color: var(--ts-muted-text);
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Submit button row ── */
.ts-action-row {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-color: var(--ts-page-gray);
    padding: 0 24px;
    flex-shrink: 0;
    margin-left: 240px; /* align with main content column, clear of the sidebar */
}

.btn-accent-lg {
    width: 200px;
    height: 40px;
    font-size: 10pt;
    font-weight: 600;
}

/* ── Footer ── */
.ts-footer {
    height: 35px;
    background-color: var(--ts-white);
    border-top: 1px solid var(--ts-border);
    display: flex;
    align-items: center;
    padding: 0 16px;
    flex-shrink: 0;
}

.ts-footer-copy {
    flex: 1;
    text-align: center;
    font-size: 8.5pt;
    font-weight: 700;
    color: var(--ts-copyright);
}

.ts-footer-version {
    font-size: 8.5pt;
    font-weight: 400;
    color: var(--ts-copyright);
    min-width: 80px;
    text-align: right;
}

/* ── Inputs ── */
.form-control {
    display: block;
    width: 100%;
    padding: 6px 10px;
    font-size: 11pt;
    line-height: 1.4;
    color: var(--ts-dark-text);
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius-sm);
    transition: border-color 0.1s, box-shadow 0.1s;
}
.form-control:focus {
    outline: none;
    border-color: var(--ts-accent-green);
    background-color: var(--ts-accent-light);
    box-shadow: 0 0 0 0.15rem rgba(62, 201, 29, 0.2);
}

textarea.form-control { min-height: 80px; resize: vertical; font-family: inherit; }

/* ── Form sections ── */
.ts-form { display: block; }

.ts-form-section {
    margin-bottom: 32px;
}

.ts-form-section:last-child {
    margin-bottom: 0;
}

.ts-form-section-title {
    font-size: 12pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin: 0 0 12px;
}

/* ── Manual-verification row (multi-line body text; not a single-line section label) ── */
.ts-manual-verification-row {
    margin-bottom: 16px;
}

.ts-manual-verification-row:last-child {
    margin-bottom: 0;
}

.ts-form-subgroup {
    margin-top: 16px;
}

.ts-form-subgroup:first-child {
    margin-top: 0;
}

.ts-form-hint {
    font-size: 9pt;
    margin: -8px 0 10px;
    line-height: 1.4;
}

.ts-notes-textarea {
    width: 100%;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.ts-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.ts-form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ts-form-label {
    display: block;
    font-size: 8.5pt;
    font-weight: 700;
    color: var(--ts-label-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

/* ── Radio + checkbox option cards ── */
.ts-radio-group,
.ts-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ts-radio-group-inline {
    flex-direction: row;
    flex-wrap: wrap;
}

.ts-radio-option,
.ts-checkbox-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--ts-border);
    border-radius: 2px;
    background-color: var(--ts-white);
    cursor: pointer;
    transition: border-color 0.1s, background-color 0.1s;
    margin: 0;
    flex: 0 0 auto;
}

.ts-radio-option:hover,
.ts-checkbox-option:hover {
    border-color: var(--ts-accent-green);
}

.ts-radio-option:has(input:checked),
.ts-checkbox-option:has(input:checked) {
    border-color: var(--ts-accent-green);
    background-color: var(--ts-accent-light);
}

.ts-radio-option input,
.ts-checkbox-option input {
    accent-color: var(--ts-accent-green);
    margin: 0;
    flex-shrink: 0;
}

.ts-radio-option-text,
.ts-checkbox-option-text {
    font-size: 11pt;
    color: var(--ts-dark-text);
}

/* ── Text-only button ── */
.btn-text {
    background: transparent;
    border: none;
    color: var(--ts-muted-text);
    font-size: 10pt;
    font-weight: 600;
    padding: 6px 0;
    cursor: pointer;
    text-decoration: none;
}

.btn-text:hover {
    color: var(--ts-dark-text);
    text-decoration: underline;
}

/* ── Action row with Back + Continue ── */
.ts-action-row-split {
    justify-content: space-between;
    padding: 0 32px;
}

.ts-action-row-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ── Tabs (Summary | Form 1040 etc.) ── */
.ts-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--ts-border);
    margin: 4px 0 20px;
}

.ts-tabs-tab {
    padding: 10px 18px;
    color: var(--ts-muted-text);
    font-weight: 600;
    font-size: 10pt;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.1s, border-color 0.1s;
}

.ts-tabs-tab:hover {
    color: var(--ts-dark-text);
    text-decoration: none;
}

.ts-tabs-tab.active {
    color: var(--ts-accent-down);
    border-bottom-color: var(--ts-accent-green);
}

/* ── IRS Form 1040 preview ── */
.ts-1040-form {
    background-color: var(--ts-white);
    border: 1.5px solid var(--ts-dark-text);
    border-radius: 2px;
    color: var(--ts-dark-text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 8px 0 16px;
}

.ts-1040-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 20px 12px;
    border-bottom: 2px solid var(--ts-dark-text);
    gap: 16px;
}

.ts-1040-form-name {
    font-size: 11pt;
    font-weight: 600;
}

.ts-1040-form-number {
    font-size: 28pt;
    font-weight: 800;
    color: var(--ts-dark-text);
    margin-left: 6px;
    line-height: 1;
    vertical-align: middle;
}

.ts-1040-form-subtitle {
    font-size: 10pt;
    margin-top: 4px;
    font-weight: 500;
}

.ts-1040-form-dept {
    font-size: 8pt;
    color: var(--ts-muted-text);
    margin-top: 2px;
}

.ts-1040-year-block {
    text-align: right;
    flex-shrink: 0;
}

.ts-1040-year {
    font-size: 24pt;
    font-weight: 800;
    color: var(--ts-dark-text);
    line-height: 1;
}

.ts-1040-omb {
    font-size: 8pt;
    color: var(--ts-muted-text);
    margin-top: 4px;
}

.ts-1040-section {
    padding: 14px 20px 16px;
    border-bottom: 1px solid var(--ts-border);
}

.ts-1040-section:last-child {
    border-bottom: none;
}

.ts-1040-section-label {
    font-size: 9pt;
    font-weight: 700;
    color: var(--ts-dark-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background-color: var(--ts-page-gray);
    padding: 6px 12px;
    margin: -14px -20px 12px;
    border-bottom: 1px solid var(--ts-border);
}

.ts-1040-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.ts-1040-checkbox-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10pt;
    cursor: default;
    margin: 0;
}

.ts-1040-checkbox-row input[type="checkbox"] {
    accent-color: var(--ts-accent-green);
    margin: 0;
}

.ts-1040-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}

.ts-1040-field-full {
    grid-column: 1 / -1;
}

.ts-1040-field-label {
    display: block;
    font-size: 7.5pt;
    color: var(--ts-muted-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.ts-1040-field-value {
    display: block;
    font-size: 11pt;
    color: var(--ts-dark-text);
    border-bottom: 1px solid var(--ts-border);
    padding: 1px 2px 3px;
    min-height: 22px;
}

.ts-1040-ssn {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* Dependent table inside the form */
.ts-1040-dep-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10pt;
}

.ts-1040-dep-table thead th {
    text-align: left;
    font-weight: 600;
    color: var(--ts-muted-text);
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ts-border);
    padding: 4px 8px;
}

.ts-1040-dep-table thead th.ts-cell-numeric {
    text-align: right;
}

.ts-1040-dep-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--ts-border);
}

/* Line item grid */
.ts-1040-lines {
    display: grid;
    grid-template-columns: 36px 1fr 110px;
    column-gap: 12px;
    row-gap: 7px;
    align-items: baseline;
}

.ts-1040-line-no {
    font-weight: 700;
    color: var(--ts-dark-text);
    font-size: 10pt;
}

.ts-1040-line-desc {
    color: var(--ts-dark-text);
    font-size: 10pt;
    line-height: 1.35;
}

.ts-1040-line-amt {
    font-variant-numeric: tabular-nums;
    text-align: right;
    border-bottom: 1px solid var(--ts-border);
    padding: 0 6px 2px;
    font-size: 10.5pt;
}

.ts-1040-line-no-total,
.ts-1040-line-desc-total {
    font-weight: 700;
}

.ts-1040-line-amt-total {
    font-weight: 700;
    border-bottom-width: 2px;
    border-bottom-color: var(--ts-dark-text);
}

.ts-1040-section-refund {
    background-color: var(--ts-accent-light);
}

.ts-1040-section-refund .ts-1040-line-amt-total {
    color: var(--ts-accent-hover);
}

.ts-1040-section-sign {
    background-color: var(--ts-page-gray);
}

.ts-1040-sig-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px 24px;
    margin-bottom: 12px;
}

.ts-1040-sig-field {
    border-bottom: 1.5px solid var(--ts-dark-text);
    height: 28px;
    margin-bottom: 4px;
}

.ts-1040-sig-label {
    font-size: 8pt;
    color: var(--ts-muted-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ts-1040-sig-note {
    font-size: 8.5pt;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 640px) {
    .ts-1040-info-grid {
        grid-template-columns: 1fr;
    }
    .ts-1040-lines {
        grid-template-columns: 28px 1fr 90px;
        column-gap: 8px;
    }
    .ts-1040-sig-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Refund banner ── */
.ts-refund-banner {
    background-color: var(--ts-accent-light);
    color: var(--ts-accent-hover);
    border: 1px solid var(--ts-accent-green);
    border-radius: 4px;
    padding: 28px 32px;
    margin: 8px 0 24px;
    text-align: center;
}

.ts-refund-banner-label {
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ts-accent-down);
    margin-bottom: 6px;
}

.ts-refund-banner-amount {
    font-size: 40pt;
    font-weight: 700;
    line-height: 1;
    color: var(--ts-accent-hover);
    font-variant-numeric: tabular-nums;
}

.ts-refund-banner-meta {
    font-size: 10pt;
    color: var(--ts-accent-hover);
    margin-top: 10px;
    opacity: 0.85;
}

/* ── Summary list (1040 line items) ── */
.ts-summary-list {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    row-gap: 8px;
    margin: 0 0 8px;
}

.ts-summary-list dt {
    font-weight: 400;
    color: var(--ts-dark-text);
    font-size: 10.5pt;
}

.ts-summary-list dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--ts-dark-text);
    font-size: 10.5pt;
    font-variant-numeric: tabular-nums;
}

.ts-summary-list-total {
    border-top: 1px solid var(--ts-border);
    padding-top: 8px;
    margin-top: 4px;
}

.ts-summary-list-total dt,
.ts-summary-list-total dd {
    font-weight: 700;
}

.ts-summary-list-grand-total {
    border-top: 2px solid var(--ts-accent-green);
    padding-top: 10px;
    margin-top: 6px;
}

.ts-summary-list-grand-total dt,
.ts-summary-list-grand-total dd {
    font-weight: 700;
    color: var(--ts-accent-hover);
    font-size: 12pt;
}

@media (max-width: 640px) {
    .ts-summary-list {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }
    .ts-summary-list dt {
        padding-top: 6px;
    }
    .ts-summary-list dd {
        text-align: left;
        padding-bottom: 4px;
    }
    .ts-refund-banner-amount {
        font-size: 32pt;
    }
    .ts-refund-banner {
        padding: 20px 16px;
    }
}

/* ── Preview disclaimer ── */
.ts-preview-disclaimer {
    font-size: 9pt;
    margin-top: 24px;
    line-height: 1.5;
}

/* ── Status banner (in-progress / info) ── */
.ts-status-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: var(--ts-accent-light);
    border: 1px solid var(--ts-accent-green);
    border-radius: 4px;
    padding: 16px 20px;
    margin: 8px 0 24px;
}

.ts-status-banner-icon {
    color: var(--ts-accent-down);
    line-height: 0;
    flex-shrink: 0;
}

.ts-status-banner-content {
    flex: 1;
    min-width: 0;
}

.ts-status-banner-state {
    font-size: 12pt;
    font-weight: 600;
    color: var(--ts-accent-hover);
}

.ts-status-banner-meta {
    font-size: 9pt;
    color: var(--ts-muted-text);
    margin-top: 4px;
}

/* ── Status banner — obo (Acting as <Client>) modifier (Decision 050) ──
   Reuses the .ts-status-banner layout + its -icon / -content / -state / -meta children;
   only the color tokens change to the amber/gold obo set. The banner is PERSISTENT
   (non-dismissible) — it is the "you are editing on behalf of a client" frame, rendered
   only on a server-validated eligible obo session, so it must stay in view the whole time. */
.ts-status-banner--obo {
    background-color: var(--ts-obo-bg);
    border-color: var(--ts-obo-border);
    justify-content: space-between;
}

.ts-status-banner--obo .ts-status-banner-icon {
    color: var(--ts-obo-accent);
}

.ts-status-banner--obo .ts-status-banner-state {
    color: var(--ts-obo-accent);
}

.ts-status-banner--obo .ts-status-banner-meta {
    color: var(--ts-obo-meta);
}

/* The "Exit acting-as / Back to Workspace" affordance — a posted form (antiforgery) that
   clears the obo session marker. Styled as a quiet amber link-button so it reads as an
   escape hatch, not a primary action; flex-shrink:0 keeps it on the banner's trailing edge. */
.ts-status-banner-exit {
    flex-shrink: 0;
    margin-left: 14px;
}

.ts-status-banner-exit-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--ts-obo-border);
    border-radius: 4px;
    color: var(--ts-obo-accent);
    font: inherit;
    font-size: 9pt;
    font-weight: 600;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
}

.ts-status-banner-exit-btn:hover {
    background-color: var(--ts-obo-border);
    color: var(--ts-white);
}

@media (max-width: 640px) {
    .ts-status-banner--obo {
        flex-wrap: wrap;
    }
    .ts-status-banner-exit {
        margin-left: 0;
        margin-top: 8px;
        flex-basis: 100%;
    }
}

/* ── Timeline ── */
.ts-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.ts-timeline::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background-color: var(--ts-border);
    z-index: 0;
}

.ts-timeline-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 6px 0;
    position: relative;
}

.ts-timeline-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--ts-white);
    border: 2px solid var(--ts-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
    color: var(--ts-border);
    box-sizing: border-box;
}

.ts-timeline-step-done .ts-timeline-icon {
    background-color: var(--ts-accent-green);
    border-color: var(--ts-accent-green);
    color: var(--ts-white);
}

.ts-timeline-step-current .ts-timeline-icon {
    background-color: var(--ts-white);
    border-color: var(--ts-accent-green);
    color: var(--ts-accent-green);
}

.ts-timeline-step-pending .ts-timeline-icon {
    background-color: var(--ts-page-gray);
    border-color: var(--ts-border);
}

.ts-timeline-text {
    flex: 1;
    padding-top: 1px;
}

.ts-timeline-title {
    font-size: 11pt;
    font-weight: 600;
    color: var(--ts-dark-text);
}

.ts-timeline-step-current .ts-timeline-title {
    color: var(--ts-accent-hover);
}

.ts-timeline-step-pending .ts-timeline-title {
    color: var(--ts-muted-text);
    font-weight: 500;
}

.ts-timeline-meta {
    font-size: 9pt;
    color: var(--ts-muted-text);
    margin-top: 2px;
}

/* ── Stats grid (Staff Dashboard) ── */
.ts-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 8px 0 24px;
}

/* Admin Dashboard (task #564) briefly needed a 3-tile ".ts-stats-grid-3" modifier while its 4th "MRR"
   tile was dropped outright (no recurring-billing concept existed to source one from). Task #567
   relabeled that tile to a real "Collected this month" aggregate, so the Admin Dashboard is back to
   4 real tiles and uses the plain .ts-stats-grid rule above, same as every other stats page on this
   app (Reports/Client/Staff Dashboard) -- the modifier is removed, not left dead. */

.ts-stat-card {
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 3px;
    padding: 18px 20px;
}
a.ts-stat-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
a.ts-stat-card:hover {
    border-color: var(--ts-accent-green);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.ts-stat-card-number {
    font-size: 28pt;
    font-weight: 700;
    color: var(--ts-dark-text);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ts-stat-card-label {
    font-size: 8.5pt;
    font-weight: 700;
    color: var(--ts-label-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 10px;
}

/* ── Table row meta (subtext under a cell value) ── */
.ts-row-meta {
    display: block;
    font-size: 9pt;
    color: var(--ts-muted-text);
    margin-top: 2px;
}

/* ── Activity list ── */
.ts-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ts-activity-item {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ts-border);
}

.ts-activity-item:last-child {
    border-bottom: none;
}

.ts-activity-time {
    color: var(--ts-muted-text);
    font-size: 9.5pt;
    font-weight: 600;
    min-width: 120px;
    flex-shrink: 0;
}

.ts-activity-text {
    color: var(--ts-dark-text);
    font-size: 10.5pt;
    flex: 1;
    line-height: 1.4;
}

@media (max-width: 960px) {
    .ts-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ts-stats-grid {
        grid-template-columns: 1fr;
    }
    .ts-activity-item {
        flex-direction: column;
        gap: 4px;
    }
    .ts-activity-time {
        min-width: 0;
    }
}

/* ── Filter bar (Queue) ── */
.ts-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0 16px;
    padding: 12px 16px;
    background-color: var(--ts-page-gray);
    border: 1px solid var(--ts-border);
    border-radius: 3px;
}

.ts-filter-control {
    flex: 0 0 auto;
    width: auto;
    min-width: 160px;
    max-width: 220px;
}

.ts-search-input {
    flex: 1 1 220px;
    max-width: 360px;
    margin-left: auto;
}

/* #553 (uiux L-b): .form-control's own color/background are unconditional (no :not(:disabled)
   guard), so a disabled filter/search control used to render with the SAME look as an enabled
   one — reading as interactive chrome instead of the inert-this-wave placeholder it is (AllDocuments'
   own doc-comment). Mirrors .ts-pagination-btn:disabled's existing treatment below verbatim, so the
   inert filter/search bar finally reads as consistently inert as the inert pagination footer. */
.ts-filter-control:disabled,
.ts-search-input:disabled {
    color: var(--ts-border);
    cursor: not-allowed;
}

/* ── Table checkbox column ── */
.ts-table-check {
    width: 36px;
    text-align: center;
    padding: 4px 8px;
}

.ts-table-check input[type="checkbox"] {
    accent-color: var(--ts-accent-green);
    margin: 0;
}

/* ── Filter bar action cluster (right side) ── */
.ts-filter-bar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

/* ── Drop zone ── */
.ts-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    margin: 0 0 20px;
    background-color: var(--ts-white);
    border: 2px dashed var(--ts-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.ts-drop-zone:hover {
    border-color: var(--ts-accent-green);
    background-color: var(--ts-accent-light);
}
.ts-drop-zone-icon {
    font-size: 36px;
    color: var(--ts-label-gray);
    line-height: 1;
    user-select: none;
}
.ts-drop-zone-label {
    font-size: 10.5pt;
    font-weight: 700;
    color: var(--ts-dark-text);
}
.ts-drop-zone-sub {
    font-size: 9.5pt;
    color: var(--ts-muted-text);
}

/* ── Numeric / trend cells in tables ── */
.ts-cell-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 1%;
}

/* Equal-width column variant: override the auto-shrink hints so every column gets the same slice */
.ts-table.ts-table-equal { table-layout: fixed; }
.ts-table.ts-table-equal th,
.ts-table.ts-table-equal td { width: auto; }

.ts-trend-up {
    color: var(--ts-accent-down);
    font-weight: 600;
}

.ts-trend-down {
    color: var(--ts-muted-text);
    font-weight: 600;
}

.ts-trend-flat {
    color: var(--ts-muted-text);
    font-weight: 600;
}

/* ── Table footer (totals) ── */
.ts-table tfoot tr {
    background-color: var(--ts-page-gray);
}

.ts-table tfoot th {
    background-color: var(--ts-page-gray);
    color: var(--ts-dark-text);
    font-size: 10pt;
    font-weight: 700;
    padding: 8px;
    border-top: 2px solid var(--ts-border);
    text-align: left;
}

.ts-table tfoot th.ts-cell-numeric {
    text-align: right;
}

/* ── Pagination ── */
.ts-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 4px 0;
    margin-top: 8px;
    border-top: 1px solid var(--ts-border);
    font-size: 9.5pt;
}

.ts-pagination-status {
    color: var(--ts-muted-text);
    font-weight: 600;
}

.ts-pagination-controls {
    display: flex;
    gap: 6px;
}

.ts-pagination-btn {
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    color: var(--ts-dark-text);
    font-size: 9.5pt;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 2px;
    cursor: pointer;
    transition: border-color 0.1s, background-color 0.1s, color 0.1s;
}

.ts-pagination-btn:hover:not(:disabled) {
    border-color: var(--ts-accent-green);
    color: var(--ts-accent-down);
    background-color: var(--ts-accent-light);
}

.ts-pagination-btn:disabled {
    color: var(--ts-border);
    cursor: not-allowed;
}

/* P4-staff queue row actions: inline claim/assign/reassign/unassign POST forms.
   Each row action is its own antiforgery <form>; they wrap and align on one row. */
.ts-queue-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.ts-inline-form {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.ts-inline-action {
    padding: 2px 6px;
    font-size: 9pt;
    white-space: nowrap;
}

.ts-assign-select {
    width: auto;
    min-width: 110px;
    padding: 4px 6px;
    font-size: 9pt;
}

@media (max-width: 720px) {
    .ts-filter-bar {
        flex-direction: column;
    }
    .ts-filter-control,
    .ts-search-input {
        max-width: 100%;
        width: 100%;
        margin-left: 0;
    }
    .ts-pagination {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
}

@media (max-width: 640px) {
    .ts-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ── TaxSolve table (DataGridView equivalent) ── */
.ts-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--ts-border);
    font-size: 10pt;
}

.ts-table thead th {
    background-color: #eef0f3;
    color: var(--ts-muted-text);
    font-size: 8.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    height: 36px;
    text-align: left;
    border-bottom: 1px solid var(--ts-border);
}
.ts-table thead th.ts-cell-numeric { text-align: right; }

.ts-table tbody td {
    background-color: var(--ts-white);
    color: var(--ts-dark-text);
    padding: 4px 8px;
    height: 32px;
    border-bottom: 1px solid var(--ts-border);
    font-size: 10pt;
}

.ts-table tbody tr:hover td {
    background-color: var(--ts-accent-light);
}

.ts-table-actions {
    text-align: right;
    width: 1%;
    white-space: nowrap;
}

.ts-table-link {
    color: var(--ts-accent-down);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.ts-table-link:hover {
    color: var(--ts-accent-hover);
    text-decoration: underline;
}

/* A submit button that reads as a table action link (usability fix #1/#3 fallback: the "Continue"
   row action POSTs the single create affordance when no live return is resolved — e.g. the
   anonymous demo mock or a brand-new user with no return yet). */
.ts-table-link-button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    color: var(--ts-accent-down);
    font-weight: 600;
    white-space: nowrap;
}

.ts-table-link-button:hover {
    color: var(--ts-accent-hover);
    text-decoration: underline;
}

.ts-table-link-sep {
    color: var(--ts-border);
    margin: 0 6px;
}

/* ── Upload zone ── */
.ts-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    margin: 8px 0 24px;
    border: 2px dashed var(--ts-border);
    border-radius: 4px;
    background-color: var(--ts-page-gray);
    color: var(--ts-muted-text);
    cursor: pointer;
    transition: border-color 0.1s, background-color 0.1s, color 0.1s;
}

.ts-upload-zone:hover,
.ts-upload-zone:focus-within {
    border-color: var(--ts-accent-green);
    background-color: var(--ts-accent-light);
    color: var(--ts-accent-down);
}

.ts-upload-zone-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.ts-upload-zone-icon {
    margin-bottom: 8px;
    color: inherit;
    line-height: 0;
}

.ts-upload-zone-text {
    font-size: 11pt;
    font-weight: 600;
    margin-bottom: 4px;
}

.ts-upload-zone-hint {
    font-size: 9pt;
    color: var(--ts-muted-text);
}

/* ── Status badges ── */
.ts-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 8.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ts-badge-draft {
    background-color: var(--ts-page-gray);
    color: var(--ts-label-gray);
    border: 1px solid var(--ts-border);
}

.ts-badge-filed {
    background-color: var(--ts-accent-green);
    color: var(--ts-white);
}

.ts-badge-amendment {
    background-color: var(--ts-accent-light);
    color: var(--ts-accent-down);
    border: 1px solid var(--ts-accent-green);
}

/* ── Error page ── */
.ts-error-headline {
    font-size: 14pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin: 0 0 16px 0;
}

.ts-error-hint {
    font-size: 9pt;
    margin-top: 24px;
    line-height: 1.5;
}

/* ── Landing layout ── */
html { scroll-behavior: smooth; }

.ts-landing-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--ts-page-gray);
}

.ts-landing-header {
    height: 80px;
    background-color: var(--ts-white);
    border-bottom: 1px solid var(--ts-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    flex-shrink: 0;
}

.ts-landing-nav {
    margin-left: auto;
}

.ts-landing-link {
    font-size: 10pt;
    font-weight: 600;
    color: var(--ts-muted-text);
    text-decoration: none;
    padding: 6px 16px;
    border-radius: 2px;
    transition: background-color 0.1s, color 0.1s;
}

.ts-landing-link:hover {
    background-color: var(--ts-accent-light);
    color: var(--ts-accent-down);
    text-decoration: none;
}

.ts-landing-cta {
    margin-left: 8px;
    background-color: var(--ts-accent-green);
    color: var(--ts-white);
    font-size: 10pt;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 2px;
    text-decoration: none;
    transition: background-color 0.1s;
}

.ts-landing-cta:hover {
    background-color: var(--ts-accent-down);
    color: var(--ts-white);
    text-decoration: none;
}

/* ── Auth screens (Login / Sign up) ── */
.ts-auth-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 48px;
}

.ts-auth-card {
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 4px;
    padding: 36px 36px 28px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.ts-auth-card-wide {
    max-width: 640px;
}

.ts-auth-header {
    text-align: center;
    margin-bottom: 24px;
}

.ts-auth-title {
    font-size: 22pt;
    font-weight: 700;
    color: var(--ts-dark-text);
    margin: 0 0 6px;
}

.ts-auth-subtitle {
    font-size: 11pt;
    color: var(--ts-muted-text);
    margin: 0;
}

.ts-auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ts-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9.5pt;
    margin-top: -4px;
}

.ts-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ts-dark-text);
    cursor: pointer;
    margin: 0;
}

.ts-auth-check-block {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 10pt;
    line-height: 1.45;
    color: var(--ts-dark-text);
    margin-top: 4px;
}

.ts-auth-check input {
    accent-color: var(--ts-accent-green);
    margin: 0;
    flex-shrink: 0;
}

.ts-auth-link {
    color: var(--ts-accent-down);
    text-decoration: none;
    font-weight: 600;
}

.ts-auth-link:hover {
    text-decoration: underline;
    color: var(--ts-accent-hover);
}

.ts-auth-submit {
    width: 100%;
    height: 44px;
    margin-top: 8px;
}

.ts-auth-foot {
    text-align: center;
    font-size: 10pt;
    color: var(--ts-muted-text);
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--ts-border);
}

.ts-auth-disclaimer {
    margin-top: 18px;
    text-align: center;
    font-size: 9pt;
    max-width: 420px;
    line-height: 1.5;
}

/* ── Stepper (multi-step flows like New Client / New Return) ── */
.ts-stepper {
    margin: 8px 0 20px;
    padding: 14px 18px;
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 4px;
}

.ts-stepper-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ts-stepper-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10pt;
    color: var(--ts-muted-text);
    font-weight: 500;
}

.ts-stepper-step + .ts-stepper-step::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: var(--ts-border);
    margin-right: 6px;
}

.ts-stepper-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--ts-page-gray);
    border: 1px solid var(--ts-border);
    color: var(--ts-muted-text);
    font-weight: 700;
    font-size: 9pt;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-stepper-step-current .ts-stepper-num {
    background-color: var(--ts-accent-green);
    border-color: var(--ts-accent-green);
    color: var(--ts-white);
}

.ts-stepper-step-current {
    color: var(--ts-dark-text);
    font-weight: 600;
}

.ts-stepper-step-done .ts-stepper-num {
    background-color: var(--ts-accent-hover);
    border-color: var(--ts-accent-hover);
    color: var(--ts-white);
}

.ts-stepper-step-done {
    color: var(--ts-muted-text);
}

/* ── Return-wide stepper (top of every workflow screen) ── */
.ts-return-stepper {
    margin: 4px 0 20px;
    padding: 14px 18px;
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 4px;
}

.ts-return-stepper .ts-stepper-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ts-return-stepper .ts-stepper-step + .ts-stepper-step::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background-color: var(--ts-border);
    margin-right: 6px;
}

.ts-return-stepper .ts-stepper-step a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 4px 8px;
    border-radius: 3px;
    transition: background-color 0.1s, color 0.1s;
}

.ts-return-stepper .ts-stepper-step a:hover {
    background-color: var(--ts-accent-light);
    text-decoration: none;
    color: var(--ts-accent-down);
}

.ts-return-stepper .ts-stepper-step-current a {
    background-color: var(--ts-accent-light);
}

/* ── Form-type picker (Add income document) ── */
.ts-form-picker-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 12px 0 24px;
}

.ts-form-picker-card {
    display: flex;
    flex-direction: column;
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-left: 4px solid var(--ts-accent-green);
    border-radius: 4px;
    padding: 16px 16px 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.1s, box-shadow 0.1s, transform 0.1s;
}

.ts-form-picker-card:hover {
    border-color: var(--ts-accent-green);
    box-shadow: 0 2px 10px rgba(62, 201, 29, 0.14);
    transform: translateY(-1px);
    text-decoration: none;
    color: inherit;
}

.ts-form-picker-code {
    display: inline-block;
    background-color: var(--ts-accent-hover);
    color: var(--ts-white);
    font-size: 9pt;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    align-self: flex-start;
}

.ts-form-picker-title {
    font-size: 11.5pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin: 10px 0 4px;
    line-height: 1.25;
}

.ts-form-picker-desc {
    font-size: 9.5pt;
    color: var(--ts-muted-text);
    line-height: 1.45;
    margin: 0 0 10px;
    flex: 1;
}

.ts-form-picker-cta {
    font-size: 9pt;
    font-weight: 600;
    color: var(--ts-accent-down);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ts-picker-upload-cta {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background-color: var(--ts-accent-light);
    border: 1px solid var(--ts-accent-green);
    border-radius: 4px;
    margin-top: 20px;
}

.ts-picker-upload-cta-text {
    flex: 1;
    min-width: 0;
    color: var(--ts-accent-hover);
    font-size: 11pt;
}

.ts-picker-upload-cta-text strong {
    font-weight: 600;
}

@media (max-width: 960px) {
    .ts-form-picker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Live form preview (right pane on W-2 / 1099 / 1098 data entry + AI extraction review) ── */

/* Wide split when preview is shown — overrides the default .ts-deep-layout. */
.ts-deep-layout-preview {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* Preview pane card */
.ts-preview-pane {
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 4px;
    padding: 14px 14px 12px;
    align-self: start;
    position: sticky;
    top: 16px;
}

.ts-preview-pane-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ts-preview-pane-title {
    font-size: 11pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin: 0;
}

/* Visual / Validation tab toggle */
.ts-preview-tabs {
    display: inline-flex;
    border: 1px solid var(--ts-border);
    border-radius: 14px;
    overflow: hidden;
}

.ts-preview-tab {
    background: var(--ts-white);
    border: 0;
    padding: 4px 14px;
    font-size: 9pt;
    font-weight: 600;
    color: var(--ts-muted-text);
    cursor: pointer;
    transition: background-color 0.1s, color 0.1s;
}

.ts-preview-tab:hover { color: var(--ts-dark-text); }

.ts-preview-tab.active {
    background: var(--ts-accent-green);
    color: var(--ts-white);
}

/* Hide inactive tab content */
.ts-preview-panel[hidden] { display: none; }

/* IRS-style W-2 form preview */
.ts-w2-preview {
    background-color: var(--ts-white);
    border: 1.5px solid var(--ts-dark-text);
    border-radius: 3px;
    color: var(--ts-dark-text);
}

.ts-w2-preview-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 2px solid var(--ts-dark-text);
    gap: 12px;
}

.ts-w2-preview-title {
    font-size: 10pt;
    font-weight: 600;
}

.ts-w2-preview-title strong {
    font-weight: 700;
}

.ts-w2-preview-title small {
    display: block;
    font-size: 7.5pt;
    color: var(--ts-muted-text);
    font-weight: 400;
    margin-top: 1px;
}

.ts-w2-preview-year {
    text-align: right;
    flex-shrink: 0;
}

.ts-w2-preview-year .y {
    font-size: 18pt;
    font-weight: 800;
    line-height: 1;
}

.ts-w2-preview-year .o {
    font-size: 7pt;
    color: var(--ts-muted-text);
    margin-top: 2px;
    letter-spacing: 0.02em;
}

/* 4-column box grid */
.ts-w2-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-collapse: collapse;
}

.ts-preview-box {
    border-right: 1px solid var(--ts-border);
    border-bottom: 1px solid var(--ts-border);
    padding: 6px 8px;
    min-height: 48px;
    transition: background-color 0.12s, box-shadow 0.12s;
    cursor: default;
}

.ts-preview-box:last-child { border-right: none; }

.ts-preview-box.is-highlighted {
    background-color: var(--ts-accent-light);
    box-shadow: inset 0 0 0 2px var(--ts-accent-green);
}

.ts-preview-box-label {
    font-size: 7.5pt;
    color: var(--ts-muted-text);
    line-height: 1.25;
    margin-bottom: 3px;
}

.ts-preview-box-label strong {
    color: var(--ts-dark-text);
    font-weight: 700;
}

.ts-preview-box-value {
    font-size: 10pt;
    color: var(--ts-dark-text);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.3;
}

.ts-preview-box-value.empty { color: var(--ts-muted-text); font-style: italic; }
.ts-preview-box-value.numeric { text-align: right; }

.ts-preview-span-2 { grid-column: span 2; }
.ts-preview-span-3 { grid-column: span 3; }
.ts-preview-span-4 { grid-column: span 4; }

/* Validation tab content */
.ts-preview-checks {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ts-preview-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ts-border);
    font-size: 10pt;
}

.ts-preview-check:last-child { border-bottom: none; }

.ts-preview-check-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9pt;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

.ts-preview-check-pass .ts-preview-check-icon {
    background-color: var(--ts-accent-green);
    color: var(--ts-white);
}

.ts-preview-check-warn .ts-preview-check-icon {
    background-color: var(--ts-accent-light);
    color: var(--ts-accent-down);
    border: 1px solid var(--ts-accent-down);
}

.ts-preview-check-body { flex: 1; }
.ts-preview-check-title { font-weight: 600; color: var(--ts-dark-text); }
.ts-preview-check-detail {
    font-size: 9pt;
    color: var(--ts-muted-text);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Reconciliation card (sibling below the preview pane) */
.ts-recon-pane {
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 4px;
    padding: 14px 14px 10px;
    margin-top: 14px;
}

.ts-recon-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ts-recon-title {
    font-size: 11pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin: 0;
}

.ts-recon-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 8.5pt;
    font-weight: 700;
    color: var(--ts-accent-down);
    background-color: var(--ts-accent-light);
    border: 1px solid var(--ts-accent-green);
    padding: 2px 10px;
    border-radius: 10px;
}

.ts-recon-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ts-accent-green);
}

.ts-recon-row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 10pt;
    border-top: 1px solid var(--ts-border);
}

.ts-recon-row:first-of-type { border-top: none; }

.ts-recon-row-label { color: var(--ts-dark-text); }
.ts-recon-row-value {
    color: var(--ts-dark-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ts-recon-row-zero .ts-recon-row-value { color: var(--ts-accent-down); }

/* Overall AI confidence pill (above the left form pane) */
.ts-ai-confidence-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9pt;
    font-weight: 700;
    color: var(--ts-accent-down);
    background-color: var(--ts-accent-light);
    border: 1px solid var(--ts-accent-green);
    padding: 4px 12px;
    border-radius: 14px;
}

.ts-ai-confidence-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--ts-accent-green);
}

/* Per-field AI confidence (small inline under low-confidence inputs etc.) */
.ts-field-ai {
    display: inline-block;
    font-size: 8pt;
    font-weight: 600;
    color: var(--ts-accent-down);
    margin-top: 4px;
    letter-spacing: 0.02em;
}

/* P3-T2 — W-2 AI extraction review: a LOW-CONFIDENCE field is flagged distinctly (the prototype
   "AI 71% · verify"), and a PENDING field (e.g. 1099-B lots missing basis) is flagged as
   not-yet-completable. Both are surfaced for the reviewer's eye, never auto-accepted. */
.ts-field-ai-low {
    color: var(--ts-warning-text);
}

.ts-field-ai-pending {
    color: var(--ts-muted-text);
}

/* P3-T2 — one extracted field on the AI extraction review screen (the gate row). A flagged field gets a
   subtle amber rail; an accepted/rejected field is visually resolved. */
.ts-ai-field {
    padding-bottom: 4px;
}

.ts-ai-field.is-flagged {
    border-left: 3px solid var(--ts-warning-text);
    padding-left: 10px;
    margin-left: -13px;
}

.ts-ai-field.is-accepted .ts-input-wrap,
.ts-ai-field.is-accepted .form-control {
    background-color: var(--ts-accent-light);
}

.ts-ai-field.is-rejected {
    opacity: 0.62;
}

/* The "Maps to your return" / "For your records only" hint under each field. */
.ts-ai-target {
    display: block;
    font-size: 8pt;
    color: var(--ts-muted-text);
    margin-top: 2px;
}

/* M3-T4 — the per-field pre-accept CONSEQUENCE WARNING (_AiField.cshtml's additive "Warning" ViewData
   slot; today's one consumer is 1099-G Box 2 / the shared Decision-104 refuse-loudly signal — accepting
   it makes the return's next calculation attempt REFUSE, HTTP 422, unlike every other field on this
   partial which only fills a draft value). Deliberately a DISTINCT red/danger tone, not the amber
   .is-flagged rail above (a recoverable "low confidence, please verify" notice) or the neutral green
   .ts-attention-strip (informational) — this field's accept has a materially different, return-blocking
   consequence and must not be visually confusable with either. Reuses the SAME error literals
   (#FEE2E2 / #B91C1C) as .ts-badge-rejected / .ts-status-banner--error / .ts-recon-status--error (no
   --ts-danger custom property exists yet in this file's :root — see that established precedent). */
.ts-ai-field-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 10px;
    background-color: #FEE2E2;
    border: 1px solid #B91C1C;
    border-radius: var(--ts-radius-sm);
    font-size: 8.5pt;
    font-weight: 600;
    color: #B91C1C;
    line-height: 1.4;
}

.ts-ai-field-warning-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #B91C1C;
    color: var(--ts-white);
    font-weight: 700;
    font-size: 8pt;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* The per-field accept / reject GATE controls. */
.ts-ai-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.ts-ai-status {
    margin-top: 8px;
}

/* A compact accent button for the inline Accept control. */
.btn-accent-sm {
    padding: 4px 14px;
    font-size: 9pt;
    border-radius: var(--ts-radius-sm);
}

@media (max-width: 1080px) {
    .ts-deep-layout-preview { grid-template-columns: 1fr; }
    .ts-preview-pane { position: static; }
}

@media (max-width: 640px) {
    .ts-form-picker-grid { grid-template-columns: 1fr; }
    .ts-picker-upload-cta { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ── Form misc ── */
.ts-form-section-tight {
    margin-bottom: 16px;
}

.ts-form-group-full {
    grid-column: 1 / -1;
}

/* ── Deep edit layout (W-2 data entry / AI extraction review) ── */
.ts-deep-title {
    font-size: 18pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin: 8px 0 4px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.ts-deep-meta {
    font-size: 11pt;
    font-weight: 500;
    color: var(--ts-muted-text);
}

.ts-deep-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    margin-top: 16px;
}

.ts-deep-form {
    min-width: 0;
}

.ts-deep-aside {
    background-color: var(--ts-page-gray);
    border: 1px solid var(--ts-border);
    border-radius: 4px;
    padding: 16px;
    align-self: start;
    position: sticky;
    top: 16px;
}

.ts-deep-aside-title {
    font-size: 8.5pt;
    font-weight: 700;
    color: var(--ts-label-gray);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}

/* ── Source toolbar (Upload / Re-import / Carry-forward) ── */
.ts-source-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 10px 14px;
    background-color: var(--ts-page-gray);
    border: 1px solid var(--ts-border);
    border-radius: 4px;
    margin: 12px 0 16px;
    font-size: 10pt;
}

.btn-text-strong {
    background: transparent;
    border: none;
    color: var(--ts-accent-down);
    font-size: 10pt;
    font-weight: 600;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: none;
}

.btn-text-strong:hover {
    color: var(--ts-accent-hover);
    text-decoration: underline;
}

.ts-source-meta {
    margin-left: auto;
    color: var(--ts-muted-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ts-source-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--ts-accent-green);
    display: inline-block;
}

/* ── W-2 section (numbered) ── */
.ts-w2-section {
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 4px;
    margin-bottom: 16px;
    overflow: hidden;
}

.ts-w2-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background-color: var(--ts-page-gray);
    border-bottom: 1px solid var(--ts-border);
}

.ts-w2-section-ix {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 9pt;
    font-weight: 700;
    color: var(--ts-muted-text);
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 3px;
    padding: 2px 6px;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.ts-w2-section-title {
    font-size: 11pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin: 0;
}

.ts-w2-section-meta {
    margin-left: auto;
    font-size: 9pt;
    color: var(--ts-muted-text);
}

.ts-w2-section-meta code {
    font-family: ui-monospace, 'Consolas', monospace;
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 9pt;
    color: var(--ts-dark-text);
}

.ts-w2-section .ts-field-grid {
    padding: 16px;
}

/* 12-column field grid for box-style forms */
.ts-field-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 12px;
    row-gap: 14px;
}

.ts-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ts-col-3 { grid-column: span 3; }
.ts-col-4 { grid-column: span 4; }
.ts-col-5 { grid-column: span 5; }
.ts-col-6 { grid-column: span 6; }
.ts-col-7 { grid-column: span 7; }
.ts-col-8 { grid-column: span 8; }
.ts-col-12 { grid-column: span 12; }

.ts-box-tag {
    display: inline-block;
    font-family: ui-monospace, 'Consolas', monospace;
    font-size: 9pt;
    font-weight: 700;
    color: var(--ts-white);
    background-color: var(--ts-accent-hover);
    padding: 1px 6px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: 1px;
}

.ts-req { color: var(--ts-accent-down); font-weight: 700; }

/* Read-only definition list (e.g. the account Profile basics). */
.ts-detail-list { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ts-detail-row { display: flex; flex-direction: column; gap: 2px; }
.ts-detail-row dt { margin: 0; }
.ts-detail-row dd { margin: 0; font-size: 10.5pt; color: var(--ts-dark-text); }
.ts-opt {
    font-size: 8.5pt;
    color: var(--ts-muted-text);
    font-weight: 400;
    margin-left: 4px;
}

.ts-field-hint {
    display: block;
    font-size: 9pt;
    color: var(--ts-muted-text);
    margin-top: 2px;
}

/* Currency input with $ prefix */
.ts-input-wrap {
    position: relative;
}

.ts-input-prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ts-muted-text);
    font-size: 11pt;
    pointer-events: none;
}

.ts-input-money {
    padding-left: 22px !important;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Inline checkbox group variant */
.ts-checkbox-group-inline {
    flex-direction: row;
    flex-wrap: wrap;
}

/* ── Reconciliation mini-checklist ── */
.ts-mini-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ts-mini-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10pt;
    color: var(--ts-dark-text);
}

.ts-mini-check-mark {
    color: var(--ts-accent-green);
    font-weight: 700;
    font-size: 11pt;
    width: 16px;
    text-align: center;
}

.ts-mini-check-todo {
    color: var(--ts-muted-text);
}

.ts-mini-check-todo .ts-mini-check-mark {
    color: var(--ts-border);
}

/* ── AI review components ── */
.ts-ai-summary {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 4px;
    margin: 12px 0 14px;
}

.ts-ai-thumb {
    width: 56px;
    height: 64px;
    background-color: var(--ts-accent-light);
    border: 1px solid var(--ts-accent-green);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10pt;
    font-weight: 700;
    color: var(--ts-accent-hover);
}

.ts-ai-title {
    font-size: 11pt;
    font-weight: 600;
    color: var(--ts-dark-text);
}

.ts-ai-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 9.5pt;
    color: var(--ts-muted-text);
    margin-top: 4px;
}

.ts-ai-stat strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ts-ai-stat-engine {
    color: var(--ts-label-gray);
}

.ts-ai-overall {
    text-align: center;
    padding-left: 16px;
    border-left: 1px solid var(--ts-border);
}

.ts-ai-overall-pct {
    font-size: 22pt;
    font-weight: 700;
    color: var(--ts-accent-hover);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ts-ai-overall-lab {
    font-size: 8.5pt;
    color: var(--ts-muted-text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.ts-conf-hi { color: var(--ts-accent-green); }
.ts-conf-md { color: var(--ts-label-gray); }
.ts-conf-lo { color: var(--ts-accent-down); }

.ts-conf-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    margin-right: 6px;
    vertical-align: 1px;
}

/* Confidence badge per field */
.ts-conf-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 9pt;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: start;
    margin-top: 22px;
}

.ts-conf-badge-hi {
    background-color: var(--ts-accent-light);
    color: var(--ts-accent-down);
    border: 1px solid var(--ts-accent-green);
}

.ts-conf-badge-md {
    background-color: var(--ts-page-gray);
    color: var(--ts-label-gray);
    border: 1px solid var(--ts-border);
}

.ts-conf-badge-lo {
    background-color: var(--ts-white);
    color: var(--ts-accent-down);
    border: 1px dashed var(--ts-accent-down);
}

/* Attention strip */
.ts-attention-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background-color: var(--ts-accent-light);
    border: 1px solid var(--ts-accent-green);
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 10pt;
}

.ts-attention-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--ts-accent-green);
    color: var(--ts-white);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-attention-text {
    flex: 1;
    color: var(--ts-accent-hover);
}

.ts-attention-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background-color: var(--ts-white);
    border: 1px solid var(--ts-accent-green);
    border-radius: 14px;
    font-size: 9.5pt;
    font-weight: 600;
    color: var(--ts-accent-down);
    text-decoration: none;
    transition: background-color 0.1s;
}

.ts-attention-chip:hover {
    background-color: var(--ts-accent-green);
    color: var(--ts-white);
    text-decoration: none;
}

/* AI extraction row (field row with confidence badge) */
.ts-ai-row {
    display: grid;
    grid-template-columns: 32px 1fr 64px;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ts-border);
    align-items: start;
}

.ts-ai-row:last-child {
    border-bottom: none;
}

.ts-ai-row .ts-box-tag {
    margin: 22px 0 0;
}

.ts-ai-row-body { min-width: 0; }

.ts-ai-row-lo {
    background-color: rgba(255, 248, 232, 0.5);
}

.ts-ai-row-md {
    background-color: var(--ts-page-gray);
}

.ts-ai-note {
    font-size: 9pt;
    color: var(--ts-muted-text);
    margin: 6px 0 0;
    line-height: 1.4;
}

.ts-ai-note code {
    font-family: ui-monospace, 'Consolas', monospace;
    background-color: var(--ts-page-gray);
    border: 1px solid var(--ts-border);
    border-radius: 3px;
    padding: 0 5px;
    color: var(--ts-dark-text);
}

/* PDF placeholder in deep aside */
.ts-pdf-placeholder {
    background-color: var(--ts-white);
    border: 1px dashed var(--ts-border);
    border-radius: 4px;
    padding: 14px;
    text-align: center;
}

.ts-pdf-placeholder-icon {
    width: 48px;
    height: 56px;
    margin: 0 auto 8px;
    background-color: var(--ts-accent-light);
    border: 1px solid var(--ts-accent-green);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9pt;
    font-weight: 700;
    color: var(--ts-accent-hover);
}

.ts-pdf-placeholder-name {
    font-size: 10pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    word-break: break-all;
}

.ts-pdf-placeholder-meta {
    font-size: 9pt;
    color: var(--ts-muted-text);
    margin: 2px 0 8px;
}

/* Mobile: collapse deep layout */
@media (max-width: 960px) {
    .ts-deep-layout {
        grid-template-columns: 1fr;
    }
    .ts-deep-aside {
        position: static;
    }
}

@media (max-width: 720px) {
    .ts-ai-summary {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .ts-ai-overall {
        border-left: none;
        border-top: 1px solid var(--ts-border);
        padding: 12px 0 0;
    }
    .ts-field-grid > .ts-field {
        grid-column: span 12;
    }
}

.ts-landing-main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 32px 48px;
}

.ts-landing-body { flex: 1; width: 100%; }

/* ── Hero ── */
.ts-hero {
    text-align: center;
    padding: 32px 0 56px;
}

.ts-hero-tag {
    display: inline-block;
    background-color: var(--ts-accent-light);
    color: var(--ts-accent-down);
    font-size: 9pt;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ts-hero-headline {
    font-size: 34pt;
    font-weight: 700;
    color: var(--ts-dark-text);
    line-height: 1.1;
    margin: 0 0 16px;
}

.ts-hero-subhead {
    font-size: 13pt;
    color: var(--ts-muted-text);
    max-width: 640px;
    margin: 0 auto 32px;
    line-height: 1.4;
}

.ts-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.ts-hero-cta:hover { text-decoration: none; }

/* ── Value props ── */
.ts-value-props {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 32px 0;
}

.ts-value-prop {
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 3px;
    padding: 24px;
}

.ts-value-prop-title {
    font-size: 12pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin: 0 0 8px;
}

.ts-value-prop-body {
    font-size: 10pt;
    color: var(--ts-muted-text);
    margin: 0;
    line-height: 1.5;
}

/* ── Path picker ── */
.ts-path-picker {
    padding: 32px 0 16px;
}

.ts-path-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 8px;
}

.ts-path-card {
    display: block;
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-left: 4px solid var(--ts-accent-green);
    border-radius: 3px;
    padding: 24px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.1s, box-shadow 0.1s, transform 0.1s;
}

.ts-path-card:hover {
    border-color: var(--ts-accent-green);
    box-shadow: 0 2px 8px rgba(62, 201, 29, 0.14);
    transform: translateY(-1px);
    text-decoration: none;
}

.ts-path-card-title {
    font-size: 14pt;
    font-weight: 600;
    color: var(--ts-dark-text);
    margin: 0 0 8px;
}

.ts-path-card-body {
    font-size: 10pt;
    color: var(--ts-muted-text);
    margin: 0 0 12px;
    line-height: 1.5;
}

.ts-path-card-cta {
    font-size: 10pt;
    font-weight: 600;
    color: var(--ts-accent-down);
}

/* ── Landing responsive breakpoints ── */
@media (max-width: 960px) {
    .ts-value-props {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .ts-value-props,
    .ts-path-cards {
        grid-template-columns: 1fr;
    }

    .ts-hero-headline { font-size: 26pt; }
    .ts-hero-subhead  { font-size: 12pt; }
    .ts-landing-main  { padding: 32px 20px 24px; }
    .ts-hero          { padding: 16px 0 40px; }
}

/* ── Utility ── */
.text-muted-ts   { color: var(--ts-muted-text); }
.text-label-ts   { color: var(--ts-label-gray); }

/* ============================================================
   STANDARD THEME REFRESH — SaaS dashboard look
   (kept in sync with wwwroot/prototype/taxsolve-prototype.css)
   ============================================================ */

:root {
    --ts-navy:        #1a2332;
    --ts-navy-edge:   #141c28;
    --ts-navy-hover:  #243044;
    --ts-navy-text:   #cbd5e1;
    --ts-navy-label:  #6b7888;

    --ts-radius:      10px;
    --ts-radius-sm:   8px;
    --ts-radius-lg:   14px;

    --ts-shadow-sm:   0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --ts-shadow-md:   0 4px 12px rgba(16, 24, 40, 0.08);

    --ts-icon-bg:     #E8F8E3;

    --ts-success-bg:  #DCFCE7;  --ts-success-text: #15803D;
    --ts-info-bg:     #DBEAFE;  --ts-info-text:    #1D4ED8;
    --ts-warning-bg:  #FEF3C7;  --ts-warning-text: #B45309;
    --ts-violet-bg:   #EDE9FE;  --ts-violet-text:  #6D28D9;
    --ts-neutral-bg:  #F1F3F5;  --ts-neutral-text: #5A5A5A;

    /* softened base tones to match the new theme */
    --ts-page-gray:   #F4F5F7;
    --ts-border:      #E4E7EC;
}

/* The page gradient + sidebar already read these vars */
.ts-page { background: linear-gradient(to right, var(--ts-navy) 240px, var(--ts-page-gray) 240px); }
.ts-content-wrap { background-color: var(--ts-page-gray); }

/* ── Header chrome (bell + avatar) ── */
.ts-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 18px;
    padding-left: 18px;
    border-left: 1px solid var(--ts-border);
}
.ts-header-bell {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-muted-text);
    text-decoration: none;
    transition: background-color 0.12s, color 0.12s;
}
.ts-header-bell:hover { background-color: var(--ts-page-gray); color: var(--ts-dark-text); }
.ts-header-bell-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ts-accent-green);
    border: 2px solid var(--ts-white);
}
/* The logout control is a POST <form><button>, not an <a>: this reset makes the
   <button> render pixel-identical to the prior anchor (strip the UA button
   background/border/font), and keeps the wrapping form layout-neutral so the
   header-actions flex row is unchanged. No visible change vs the old anchor. */
.ts-header-user-form { display: inline-flex; margin: 0; }
button.ts-header-user {
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.ts-header-user {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 5px 8px 5px 5px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ts-dark-text);
    transition: background-color 0.12s;
}
.ts-header-user:hover { background-color: var(--ts-page-gray); text-decoration: none; color: var(--ts-dark-text); }
.ts-header-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--ts-accent-green);
    color: var(--ts-white);
    font-size: 9.5pt;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ts-header-user-name { font-size: 10pt; font-weight: 600; color: var(--ts-dark-text); white-space: nowrap; }
.ts-header-caret { color: var(--ts-muted-text); display: inline-flex; }
/* ── User menu dropdown ── */
.ts-user-menu-wrap { position: relative; display: inline-flex; }
.ts-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--ts-white);
    border: 1px solid var(--ts-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    z-index: 200;
    padding: 4px 0;
}
.ts-user-dropdown-logout-form { display: block; margin: 0; padding: 0; }
.ts-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 16px;
    font-size: 10pt;
    font: inherit;
    color: var(--ts-dark-text);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
}
.ts-user-dropdown-item:hover { background-color: var(--ts-page-gray); color: var(--ts-dark-text); text-decoration: none; }
.ts-user-dropdown-divider { border-top: 1px solid var(--ts-border-color); margin: 4px 0; }

/* ══ P4-notify: header-bell notification center (in-canon addendum) ══════ */
/* The bell wrapper anchors the absolutely-positioned dropdown. */
.ts-notif-bell-wrap { position: relative; display: inline-flex; }

/* Numeric unread badge on the bell (the dot stays for the at-a-glance cue). */
.ts-header-bell-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background-color: #E5484D;
    color: var(--ts-white);
    font-size: 8pt;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 2px solid var(--ts-white);
    box-sizing: content-box;
}

/* The dropdown panel. */
.ts-notif-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: 92vw;
    background-color: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: var(--ts-radius);
    box-shadow: var(--ts-shadow-md);
    z-index: 30;
    overflow: hidden;
}
.ts-notif-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ts-border);
}
.ts-notif-dropdown-title { font-size: 10.5pt; font-weight: 700; color: var(--ts-dark-text); }
.ts-notif-dropdown-body { max-height: 360px; overflow-y: auto; }
.ts-notif-dropdown-loading,
.ts-notif-dropdown-empty {
    padding: 22px 14px;
    text-align: center;
    color: var(--ts-muted-text);
    font-size: 9.5pt;
    margin: 0;
}
.ts-notif-dropdown-foot {
    padding: 10px 14px;
    border-top: 1px solid var(--ts-border);
    text-align: center;
    background-color: #FAFBFC;
}
.ts-notif-dropdown-all { font-size: 9.5pt; font-weight: 600; }

/* Dropdown rows. */
.ts-notif-drop-row {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ts-border);
    cursor: pointer;
    transition: background-color 0.1s;
}
.ts-notif-drop-row:last-child { border-bottom: none; }
.ts-notif-drop-row:hover,
.ts-notif-drop-row:focus-visible { background-color: #F4F7FB; outline: none; }
.ts-notif-drop-row.is-unread { background-color: #F1FAF0; }
.ts-notif-drop-row.is-unread:hover { background-color: #E8F6E5; }
.ts-notif-drop-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
    background-color: currentColor;
}
.ts-notif-drop-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-notif-drop-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ts-notif-drop-cat { font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ts-label-gray); }
.ts-notif-drop-time { font-size: 8.5pt; color: var(--ts-muted-text); white-space: nowrap; }
.ts-notif-drop-title { font-size: 10pt; font-weight: 600; color: var(--ts-dark-text); }
.ts-notif-drop-row.is-read .ts-notif-drop-title { font-weight: 500; color: var(--ts-muted-text); }
.ts-notif-drop-body {
    font-size: 9pt;
    color: var(--ts-muted-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Category accent colors (shared by the dropdown dot + the page icon/chip). */
.ts-notif-cat-workflow        { color: var(--ts-info-text); }
.ts-notif-cat-assignment      { color: var(--ts-violet-text); }
.ts-notif-cat-documentRequest { color: var(--ts-warning-text); }
.ts-notif-cat-billing         { color: var(--ts-success-text); }

/* ── The full Notification Center page ── */
.ts-notif-list { list-style: none; margin: 0; padding: 0; }
.ts-notif-row {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 4px;
    border-bottom: 1px solid var(--ts-border);
}
.ts-notif-row:last-child { border-bottom: none; }
.ts-notif-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--ts-icon-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ts-notif-icon svg { width: 18px; height: 18px; }
.ts-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ts-notif-line { display: flex; align-items: center; gap: 10px; }
.ts-notif-cat-chip {
    font-size: 8pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--ts-neutral-bg);
}
.ts-notif-time { font-size: 8.5pt; color: var(--ts-muted-text); }
.ts-notif-title-link,
.ts-notif-title { font-size: 10.5pt; font-weight: 600; color: var(--ts-dark-text); }
.ts-notif-title-link:hover { color: var(--ts-accent-down); }
.ts-notif-row.is-read .ts-notif-title-link,
.ts-notif-row.is-read .ts-notif-title { font-weight: 500; color: var(--ts-muted-text); }
.ts-notif-text { margin: 0; font-size: 9.5pt; color: var(--ts-muted-text); }
.ts-notif-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ts-notif-unread-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--ts-accent-green);
    flex-shrink: 0;
}
.ts-notif-row.is-read .ts-notif-unread-dot { visibility: hidden; }

/* Empty state. */
.ts-notif-empty { text-align: center; padding: 56px 20px; color: var(--ts-muted-text); }
.ts-notif-empty-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--ts-icon-bg);
    color: var(--ts-accent-down);
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.ts-notif-empty-icon svg { width: 26px; height: 26px; }
.ts-notif-empty-title { font-size: 12pt; font-weight: 600; color: var(--ts-dark-text); margin: 0 0 4px; }
.ts-notif-empty-sub { font-size: 9.5pt; margin: 0; }

/* ── Sidebar nav: inset rounded pill active state + icons ── */
.ts-nav { padding: 14px 12px; }
.ts-nav-item {
    padding: 9px 12px;
    margin: 2px 0;
    border-radius: var(--ts-radius-sm);
    gap: 12px;
}
.ts-nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.ts-nav-item:hover { background-color: var(--ts-navy-hover); }
.ts-nav-item.active {
    background-color: #1b5e20;
    color: #fff;
    font-weight: 700;
    border-left: none;
    padding-left: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ── Return-workspace sidebar (ported from taxsolve-prototype.css for the P2-T1 hub:
      section labels, numbered section items, progress metas) ── */
.ts-nav-section {
    padding: 14px 12px 6px;
    font-size: 8.5pt;
    font-weight: 700;
    color: var(--ts-navy-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ts-nav-item .ts-nav-meta {
    margin-left: auto;
    font-size: 9pt;
    color: #8b97a8;
    font-variant-numeric: tabular-nums;
}
.ts-nav-item.active .ts-nav-meta { color: #fff; }

.ts-nav-item .ts-nav-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #2a3647;
    border: 1px solid #3a4658;
    color: var(--ts-navy-text);
    font-size: 9pt;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-nav-item.done .ts-nav-num { background-color: var(--ts-accent-hover); border-color: var(--ts-accent-hover); color: var(--ts-white); }
.ts-nav-item.active .ts-nav-num { background-color: #0f1b12; border-color: #0f1b12; color: var(--ts-accent-green); }

/* ── POST affordances (start-a-return, Decision 025): a form-wrapped button that renders
      identically to the surrounding anchors ── */
.ts-nav-post { margin: 0; }
.ts-nav-post button.ts-nav-item {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    color: var(--ts-navy-text);
    text-align: left;
    cursor: pointer;
}
.ts-nav-post button.ts-nav-item:hover { background-color: var(--ts-navy-hover); color: var(--ts-white); }
.ts-inline-form { display: inline-flex; margin: 0; }
.ts-inline-form .btn-accent { font-family: inherit; }

/* Prior-year reach (#362 follow-on): the start-return year selector sits to the left of
   the "+ Start new return" button on the dashboard, defaulting to the current filing year. */
.ts-start-return-form { gap: 8px; align-items: center; }
.ts-start-year-select { width: auto; min-width: 88px; }

/* ── Cards: larger radius + soft shadow, no hard border ── */
.ts-card {
    border-radius: var(--ts-radius-lg);
    box-shadow: var(--ts-shadow-sm);
    border-color: var(--ts-border);
    padding: 22px 24px 18px;
}
.ts-card + .ts-card { margin-top: 16px; }
.ts-card-flush { padding: 0; overflow: hidden; }

/* ── Page head (title + subtitle + action) ── */
.ts-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
}
.ts-page-head-text { min-width: 0; }
.ts-page-title { font-size: 21pt; font-weight: 700; color: var(--ts-dark-text); margin: 0; line-height: 1.1; }
.ts-page-subtitle { font-size: 11pt; color: var(--ts-muted-text); margin: 6px 0 0; }

/* ── Buttons ── */
.btn-accent {
    padding: 8px 18px;
    border-radius: var(--ts-radius-sm);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-accent-lg { min-width: 200px; width: auto; height: 42px; }
.form-control { border-radius: var(--ts-radius-sm); }

/* ── Status-dot pill badges ── */
.ts-badge-dot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 9pt;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.ts-badge-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
    flex-shrink: 0;
}
/* IN-FLIGHT PULSE (External Review workspace list). Animates the pill's OWN ::before dot rather
   than adding a second indicator beside it — the badge already carries one, and two would read as
   two states. Applied server-side from ExternalReviewStatusDisplay.IsInFlight, then toggled by
   external-review-status-poll.js as statuses settle. Composes with any ts-badge-* colour. */
.ts-badge-dot.ts-badge-pulse::before {
    animation: ts-badge-pulse 1.4s ease-in-out infinite;
}
@keyframes ts-badge-pulse {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.72); }
}
/* Motion is decoration here, never the only signal — the badge TEXT always states the status. So a
   reduced-motion preference simply stops the animation; nothing is lost. */
@media (prefers-reduced-motion: reduce) {
    .ts-badge-dot.ts-badge-pulse::before { animation: none; }
}
.ts-badge-success { background-color: var(--ts-success-bg); color: var(--ts-success-text); }
.ts-badge-info    { background-color: var(--ts-info-bg);    color: var(--ts-info-text); }
.ts-badge-warning { background-color: var(--ts-warning-bg); color: var(--ts-warning-text); }
.ts-badge-violet  { background-color: var(--ts-violet-bg);  color: var(--ts-violet-text); }
.ts-badge-neutral { background-color: var(--ts-neutral-bg); color: var(--ts-neutral-text); }

/* ── Stat cards: circular icon + body + sub-label ── */
.ts-stat-card {
    border-radius: var(--ts-radius-lg);
    box-shadow: var(--ts-shadow-sm);
    border-color: var(--ts-border);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.ts-stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--ts-icon-bg);
    color: var(--ts-accent-down);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ts-stat-card-icon svg { width: 22px; height: 22px; }
.ts-stat-card-body { min-width: 0; display: flex; flex-direction: column; }
.ts-stat-card-number { font-size: 26pt; }
.ts-stat-card-label { margin-top: 2px; }
.ts-stat-card-sub { font-size: 9pt; color: var(--ts-muted-text); margin-top: 3px; }
a.ts-stat-card:hover { box-shadow: var(--ts-shadow-md); transform: translateY(-1px); border-color: var(--ts-border); }

/* ── Activity list: circular icons ── */
.ts-activity-item { gap: 14px; padding: 14px 0; align-items: flex-start; }
.ts-activity-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--ts-icon-bg);
    color: var(--ts-accent-down);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ts-activity-icon svg { width: 18px; height: 18px; }
.ts-activity-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ts-activity-time { display: block; min-width: 0; margin-bottom: 2px; }
.ts-activity-text { display: block; }

/* ── Tables: borderless, soft header, roomier rows ── */
.ts-table { border: none; }
.ts-table thead th { background-color: #F8F9FB; padding: 10px 14px; }
.ts-table tbody td { padding: 12px 14px; }
.ts-table tbody tr:last-child td { border-bottom: none; }
.ts-table tbody tr:hover td { background-color: #F8F9FB; }

/* ── Option cards + filter bar radius ── */
.ts-radio-option,
.ts-checkbox-option { border-radius: var(--ts-radius-sm); padding: 10px 14px; }
.ts-filter-bar { border-radius: var(--ts-radius); }

/* ══ Collapsible sidebar ══════════════════════════════════════════════ */
/* Single source of truth for the sidebar width; the page gradient, the
   sidebar column, and the action-row indent all read this variable. */
.ts-page { --ts-sidebar-w: 240px; }
.ts-page { background: linear-gradient(to right, var(--ts-navy) var(--ts-sidebar-w), var(--ts-page-gray) var(--ts-sidebar-w)); }
/* App-shell: bound the page to the viewport so the main column scrolls
   internally (it already declares overflow-y:auto). This keeps the sidebar
   viewport-height, so its pinned footer (the collapse toggle) and the page
   footer stay visible instead of scrolling away. */
.ts-page { height: 100vh; overflow: hidden; }
.ts-sidebar { width: var(--ts-sidebar-w); transition: width 0.16s ease; }
.ts-action-row { margin-left: var(--ts-sidebar-w); transition: margin-left 0.16s ease; }
.ts-nav-item, .ts-nav-collapse { white-space: nowrap; overflow: hidden; }

/* Pin the collapse toggle to the bottom of the sidebar: only the nav list
   scrolls, so the toggle stays visible above the footer on long pages.
   `min-height: 0` lets the flex nav shrink below its content and scroll. */
.ts-sidebar { overflow: hidden; }
.ts-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ts-sidebar-footer { flex-shrink: 0; background-color: var(--ts-navy); }

/* Full-height sidebar so the collapse toggle pins to the very bottom on EVERY
   page, even ones with an action row below the main column (e.g. the
   questionnaire's "Continue" bar). The sidebar is lifted out of the
   content-wrap flow and stretched between the header and the page footer; the
   main column is offset to clear it. */
.ts-page { position: relative; --ts-header-h: 80px; --ts-footer-h: 35px; }
.ts-sidebar {
    position: absolute;
    top: var(--ts-header-h);
    bottom: var(--ts-footer-h);
    left: 0;
    z-index: 1;
}
.ts-main { margin-left: var(--ts-sidebar-w); transition: margin-left 0.16s ease; }

/* Collapse toggle button (lives in the sidebar footer) */
.ts-nav-collapse {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--ts-navy-text);
    font-family: inherit;
    font-size: 10pt;
    font-weight: 500;
    border-radius: var(--ts-radius-sm);
    transition: background-color 0.12s, color 0.12s;
}
.ts-nav-collapse:hover { background-color: var(--ts-navy-hover); color: var(--ts-white); }
.ts-nav-collapse-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.ts-nav-collapse-icon svg { width: 22px; height: 22px; transition: transform 0.16s ease; }

/* Collapsed state: icon-only rail */
.ts-collapsed .ts-page { --ts-sidebar-w: 68px; }
.ts-collapsed .ts-nav { padding: 14px 10px; }
.ts-collapsed .ts-nav-item { font-size: 0; gap: 0; justify-content: center; padding-left: 12px; padding-right: 12px; }
.ts-collapsed .ts-nav-item.active { padding-left: 12px; }
.ts-collapsed .ts-nav-section { display: none; }
.ts-collapsed .ts-nav-item .ts-nav-meta { display: none; }
.ts-collapsed .ts-nav-item .ts-nav-num { font-size: 9pt; }
.ts-collapsed .ts-sidebar-footer { padding: 12px 10px; }
.ts-collapsed .ts-nav-collapse { justify-content: center; gap: 0; }
.ts-collapsed .ts-nav-collapse-label { display: none; }
.ts-collapsed .ts-nav-collapse-icon svg { transform: rotate(180deg); }

/* == Interview mode ==================================================== */
/* Guided question-by-question variant of each section. Rendered by
   taxsolve-interview.js into a .ts-iv mount inside the standard ts-card. */
.ts-iv { max-width: 660px; margin: 8px auto 0; }
.ts-iv-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.ts-iv-progress-label { font-size: 9pt; font-weight: 600; color: var(--ts-muted-text); white-space: nowrap; }
.ts-iv-progress-bar { flex: 1; height: 6px; background: var(--ts-border); border-radius: 999px; overflow: hidden; }
.ts-iv-progress-fill { height: 100%; background: var(--ts-accent-green); border-radius: 999px; transition: width 0.25s ease; }
.ts-iv-step { animation: ts-iv-in 0.22s ease; }
@keyframes ts-iv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ts-iv-q { font-size: 17pt; font-weight: 700; color: var(--ts-dark-text); line-height: 1.3; margin: 0 0 6px; }
.ts-iv-hint { font-size: 10.5pt; color: var(--ts-muted-text); margin: 0 0 20px; line-height: 1.5; }
.ts-iv-flow { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 8.5pt; font-weight: 600; color: var(--ts-accent-hover); background: var(--ts-icon-bg); border: 1px solid #d2eec9; border-radius: 999px; padding: 3px 10px; }

.ts-iv-options { display: flex; flex-direction: column; gap: 10px; }
.ts-iv-option { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--ts-white); border: 1px solid var(--ts-border); border-radius: var(--ts-radius); cursor: pointer; transition: border-color 0.12s, background-color 0.12s, box-shadow 0.12s; text-align: left; width: 100%; font: inherit; }
.ts-iv-option:hover { border-color: var(--ts-accent-green); }
.ts-iv-option.selected { border-color: var(--ts-accent-green); background: var(--ts-accent-light); box-shadow: var(--ts-shadow-sm); }
.ts-iv-option-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ts-border); flex-shrink: 0; margin-top: 1px; position: relative; }
.ts-iv-option.selected .ts-iv-option-radio { border-color: var(--ts-accent-down); }
.ts-iv-option.selected .ts-iv-option-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ts-accent-down); }
.ts-iv-option-title { display: block; font-size: 10.5pt; font-weight: 600; color: var(--ts-dark-text); }
.ts-iv-option-desc { display: block; font-size: 9pt; color: var(--ts-muted-text); margin-top: 2px; line-height: 1.45; }

.ts-iv-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; }
.ts-iv-yesno .ts-iv-option { justify-content: center; align-items: center; padding: 16px; font-size: 11pt; font-weight: 600; color: var(--ts-dark-text); }

.ts-iv-input-row { max-width: 420px; }
.ts-iv-input-row .ts-input-wrap { position: relative; }
.ts-iv-input-row .form-control { font-size: 14pt; padding: 12px 14px; }
.ts-iv-input-row .form-control.ts-input-money { padding-left: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.ts-iv-input-row .ts-input-prefix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ts-muted-text); font-size: 12pt; pointer-events: none; }
.ts-iv-multimoney { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.ts-iv-multimoney .ts-iv-mm-row { display: grid; grid-template-columns: 1fr 170px; gap: 12px; align-items: center; }
.ts-iv-mm-label { font-size: 10pt; font-weight: 500; color: var(--ts-dark-text); }
.ts-iv-mm-label small { display: block; font-size: 8.5pt; color: var(--ts-muted-text); font-weight: 400; }

.ts-iv-info-body { font-size: 10.5pt; color: var(--ts-dark-text); line-height: 1.6; background: var(--ts-page-gray); border: 1px solid var(--ts-border); border-radius: var(--ts-radius); padding: 16px 18px; }
.ts-iv-info-body strong { color: var(--ts-accent-hover); }

.ts-iv-actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.ts-iv-actions .spacer { flex: 1; }
.ts-iv-kbd-hint { font-size: 8.5pt; color: var(--ts-muted-text); }
.ts-iv-kbd-hint kbd { font-family: inherit; background: var(--ts-page-gray); border: 1px solid var(--ts-border); border-radius: 4px; padding: 1px 6px; font-size: 8pt; }

.ts-iv-summary { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--ts-border); border-radius: var(--ts-radius); overflow: hidden; }
.ts-iv-summary-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 16px; background: var(--ts-white); border-bottom: 1px solid var(--ts-border); }
.ts-iv-summary-row:last-child { border-bottom: none; }
.ts-iv-summary-q { font-size: 9.5pt; color: var(--ts-muted-text); }
.ts-iv-summary-a { font-size: 10pt; font-weight: 600; color: var(--ts-dark-text); text-align: right; }
.ts-iv-summary-edit { font-size: 9pt; font-weight: 600; color: var(--ts-accent-down); background: none; border: none; cursor: pointer; padding: 2px 4px; }
.ts-iv-summary-edit:hover { text-decoration: underline; }
.ts-iv-summary-note { margin-top: 14px; font-size: 9.5pt; color: var(--ts-accent-hover); background: var(--ts-icon-bg); border: 1px solid #d2eec9; border-radius: var(--ts-radius-sm); padding: 10px 14px; line-height: 1.5; }

.ts-iv-switch { font-size: 9pt; font-weight: 600; color: var(--ts-muted-text); text-decoration: none; }
.ts-iv-switch:hover { color: var(--ts-accent-hover); text-decoration: underline; }

/* "Interview mode" pill on standard pages */
.ts-iv-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 9pt; font-weight: 600; color: var(--ts-accent-hover); background: var(--ts-icon-bg); border: 1px solid #d2eec9; border-radius: 999px; padding: 4px 12px; text-decoration: none; transition: background-color 0.12s; }
.ts-iv-toggle:hover { background: var(--ts-accent-light); text-decoration: none; color: var(--ts-accent-hover); }
/* == "On behalf of" banner ============================================= */
/* Shown on client-portal pages when a staff user enters via ?obo=1.
   Rendered by taxsolve-prototype.js; state persists in sessionStorage. */
.ts-obo-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; background: var(--ts-warning-bg); border: 1px solid #f0d9a0; border-radius: var(--ts-radius-sm); color: var(--ts-warning-text); font-size: 9.5pt; }
.ts-obo-banner strong { font-weight: 700; }
.ts-obo-actions { margin-left: auto; display: flex; gap: 14px; align-items: center; white-space: nowrap; }
.ts-obo-actions a { color: var(--ts-warning-text); font-weight: 600; text-decoration: none; }
.ts-obo-actions a:hover { text-decoration: underline; }
.ts-obo-actions button { background: none; border: 1px solid #e3c170; color: var(--ts-warning-text); border-radius: 6px; padding: 3px 10px; font: inherit; font-size: 8.5pt; font-weight: 600; cursor: pointer; }
.ts-obo-actions button:hover { background: rgba(180, 83, 9, 0.08); }
/* == Prior-year context chip =========================================== */
/* Shown when a return is opened with ?ty=NNNN (a year other than 2025).
   Rendered by taxsolve-prototype.js; state persists in sessionStorage. */
.ts-year-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 8.5pt; font-weight: 600; color: var(--ts-violet-text); background: var(--ts-violet-bg); border: 1px solid #d8ccf4; border-radius: 999px; padding: 4px 6px 4px 12px; margin-left: 12px; }
.ts-year-chip button { background: none; border: none; color: var(--ts-violet-text); font: inherit; font-size: 10pt; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 999px; }
.ts-year-chip button:hover { background: rgba(109, 40, 217, 0.12); }
/* == Dependents page (P2-T3) =========================================== */
/* Ported VERBATIM from taxsolve-prototype.css for 2. Dependents/Dependents.html. */
.ts-add-dependent-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
/* Interview save-failure line (P2-T3 production seam — the prototype's summary action is
   a plain anchor and has no failure state; the production onDone handler persists through
   the draft API and needs one). Rendered hidden by taxsolve-interview.js until fail(). */
.ts-iv-error { margin: 10px 0 0; font-size: 9.5pt; font-weight: 600; color: var(--ts-warning-text); }
/* == P2-T5: debounced live-recompute states ============================ */
/* Production-only affordances for the server-recompute pattern
   (js/return-live-recompute.js); the prototype's recon pane is a spec-only
   inline calculator with no error surface. Status line: non-destructive
   server messages (422 engine refusals, unmappable validation errors) — ALSO
   the shared FIRST-PAINT refusal surface every recomputing page renders
   server-side under Decision 027(1) (W-2 entry, the return hub, Dependents).
   Field errors: 400 ProblemDetails messages under the offending input. */
.ts-recon-status {
    margin: 2px 0 8px;
    padding: 8px 12px;
    font-size: 9.5pt;
    line-height: 1.45;
    color: var(--ts-warning-text);
    background: var(--ts-warning-bg);
    border: 1px solid #f0d9a0;
    border-radius: var(--ts-radius-sm);
}
/* #549 error variant: the shared _StaffStatusBanner partial applies this alongside role="alert" for a
   genuine staff error (permission denial, concurrency/stale-stamp conflict, illegal/"no longer
   available" transition refusal, input-validation failure) instead of the neutral warning-amber above.
   Same shape (margin/padding/font-size/border-radius unchanged) — only the palette + border recolor,
   reusing the EXACT existing error literals (#FEE2E2 / #B91C1C) that .ts-status-banner--error and
   .ts-badge-rejected already use elsewhere; no --ts-danger/--ts-error custom property exists yet in
   this file's :root, so this follows that established literal-color precedent rather than inventing one. */
.ts-recon-status--error {
    color: #B91C1C;
    background: #FEE2E2;
    border-color: #B91C1C;
}
.ts-field-error {
    font-size: 8.5pt;
    font-weight: 600;
    color: var(--ts-warning-text);
    margin-top: 2px;
    line-height: 1.4;
}
.form-control.is-invalid {
    border-color: var(--ts-warning-text);
    background-color: var(--ts-warning-bg);
}
/* == P2-08: Decision 026 draft-version conflict retry ================== */
/* The 412 recovery affordance the live-recompute JS appends to the status
   line (js/return-live-recompute.js showConflict): one click = re-GET the
   draft, merge (user-dirty fields win), retry the PUT once. */
.ts-status-retry {
    background: none;
    border: 1px solid #e3c170;
    color: var(--ts-warning-text);
    border-radius: 6px;
    padding: 2px 10px;
    margin-left: 6px;
    font: inherit;
    font-size: 8.5pt;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.ts-status-retry:hover { background: rgba(180, 83, 9, 0.08); }
/* == P2-T4: Income hub split action row ================================ */
/* Verbatim from taxsolve-prototype.css (.ts-action-right /
   .btn-secondary-action) — the Income page's "+ Add income document" +
   "Continue to deductions" right-hand action group. */
.ts-action-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-secondary-action {
  background: #fff;
  color: #2fbf20;
  border: 1px solid #2fbf20;
}
.ts-action-right .btn-secondary,
.ts-action-right .btn-accent {
  min-height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* == P2-T18: Taxes Paid — the editable estimated-payments total ========= */
/* The one production input on the Taxes Paid page (the draft's single 1040
   line-26 slot, bound through js/return-live-recompute.js). The prototype
   tfoot shows static text; the task-directed editable affordance keeps the
   numeric column's footprint instead of a full-width form box. */
.ts-estimated-total-cell .ts-input-wrap {
    max-width: 160px;
    margin-left: auto;
}
/* == Accessibility utilities (additive — no visual change for mouse users) == */
/* Keyboard focus ring: :focus-visible only fires for keyboard/AT focus, so mouse
   clicks are visually unchanged. Uses the design-system accent-down token. */
a:focus-visible,
button:focus-visible,
.btn-accent:focus-visible,
.ts-nav-item:focus-visible,
.ts-portal-btn:focus-visible,
.ts-table-link:focus-visible,
.ts-value-prop:focus-visible,
[data-ts-collapse]:focus-visible,
[data-ai-accept]:focus-visible,
[data-ai-reject]:focus-visible,
.ts-preview-tab:focus-visible {
    outline: 2px solid var(--ts-accent-down);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Screen-reader-only content: present in the accessibility tree, off-screen for
   sighted users (the standard clip pattern). */
.ts-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link: off-screen until it receives keyboard focus, then it slides into the
   top-left so a keyboard user can jump straight to the main content. */
.ts-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: 8px 16px;
    background: var(--ts-accent-down);
    color: var(--ts-white);
    font-weight: 700;
    border-radius: 0 0 var(--ts-radius-sm) 0;
}
.ts-skip-link:focus {
    left: 0;
    color: var(--ts-white);
    text-decoration: none;
}

/* ══ Marketing landing page extensions (.ts-lp-*)
   Full-bleed sections ported from TaxSolve.Returns/landing.css and adapted to
   design-system tokens. Barlow Condensed loaded via @section Head in Index.cshtml. ══ */

/* ── Shared inner centering (used inside full-bleed sections) ── */
.ts-lp-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 72px 32px;
}
.ts-lp-inner--sm {
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 32px;
}

/* ── Eyebrow labels ── */
.ts-lp-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--ts-accent-down);
    margin-bottom: 10px;
}
.ts-lp-eyebrow--solid {
    background: var(--ts-accent-green);
    color: #fff;
    padding: 5px 14px;
    border-radius: 4px;
    letter-spacing: 2px;
    margin-bottom: 20px;
}
.ts-lp-eyebrow--green { color: var(--ts-accent-green); }

/* ── Hero (dark full-bleed) ── */
.ts-lp-hero {
    background: linear-gradient(135deg, #1a2332 55%, #233048 100%);
    position: relative;
    overflow: hidden;
    text-align: center;
}
.ts-lp-hero::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(62,201,29,0.13) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.ts-lp-hero .ts-lp-inner { position: relative; z-index: 1; }

.ts-lp-h1 {
    font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Segoe UI', sans-serif;
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 900;
    color: #fff;
    line-height: 1.05;
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: -1px;
}
.ts-lp-h1 span { color: var(--ts-accent-green); }

.ts-lp-hero-sub {
    color: rgba(255,255,255,0.75);
    font-size: 17px;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 28px;
}

.ts-lp-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    margin-bottom: 48px;
}
.ts-lp-hero-cta:hover { text-decoration: none; }

/* ── Stats bar ── */
.ts-lp-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 4px;
}
.ts-lp-stat-num {
    font-family: 'Barlow Condensed', 'Segoe UI', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--ts-accent-green);
    line-height: 1;
}
.ts-lp-stat-label {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* ── Section shells ── */
.ts-lp-section { width: 100%; }
.ts-lp-section--white { background: var(--ts-white); }
.ts-lp-section--soft  { background: #f4f6f4; }
.ts-lp-section--dark  { background: #1a2332; }

/* ── Section headings ── */
.ts-lp-section-title {
    font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Segoe UI', sans-serif;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: #1a2332;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: 0 0 10px;
}
.ts-lp-section-title--light { color: #fff; }

.ts-lp-section-sub {
    color: var(--ts-muted-text);
    font-size: 16px;
    max-width: 520px;
    line-height: 1.6;
    margin: 0 0 44px;
}
.ts-lp-section-sub--light { color: rgba(255,255,255,0.65); }

/* ── AI document extraction (two-column: visual + copy) ── */
.ts-lp-extract {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
.ts-lp-extract-copy { max-width: 460px; }
.ts-lp-extract-title {
    font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Segoe UI', sans-serif;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    color: #1a2332;
    line-height: 1.1;
    margin: 0 0 16px;
}
.ts-lp-extract-title span { color: var(--ts-accent-green); }
.ts-lp-extract-body {
    color: var(--ts-muted-text);
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 28px;
}
.ts-lp-extract-cta { display: inline-flex; align-items: center; gap: 10px; }

/* Visual: document tiles flowing into an extracted-data card */
.ts-lp-extract-visual {
    display: flex;
    align-items: center;
    gap: 18px;
}
.ts-lp-doc-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex-shrink: 0;
}
.ts-lp-doc {
    width: 134px;
    background: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.ts-lp-doc--b { margin-left: 26px; }
.ts-lp-doc--c { margin-left: 8px; flex-direction: row; align-items: center; gap: 8px; }
.ts-lp-doc-tag { font-size: 12px; font-weight: 700; color: #1a2332; }
.ts-lp-doc-bank { font-size: 18px; line-height: 1; }
.ts-lp-doc-line { height: 6px; border-radius: 3px; background: #e2e6e2; }
.ts-lp-doc-line--short { width: 60%; }
.ts-lp-doc-line--green { background: var(--ts-accent-light); }

.ts-lp-extract-spark {
    flex-shrink: 0;
    color: var(--ts-accent-green);
    font-size: 20px;
    opacity: 0.75;
}

.ts-lp-extract-card {
    position: relative;
    flex: 1;
    min-width: 0;
    background: var(--ts-white);
    border: 1px solid var(--ts-border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    padding: 20px 22px 10px;
}
.ts-lp-extract-check {
    position: absolute;
    top: -14px; right: 18px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--ts-accent-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ts-lp-extract-check svg { width: 16px; height: 16px; }
.ts-lp-extract-rows { margin: 0; }
.ts-lp-extract-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--ts-border);
}
.ts-lp-extract-row:last-child { border-bottom: none; }
.ts-lp-extract-row dt { color: var(--ts-muted-text); font-size: 13px; margin: 0; }
.ts-lp-extract-row dd { color: #1a2332; font-size: 14px; font-weight: 700; margin: 0; }
.ts-lp-extract-skel {
    display: block;
    width: 84px; height: 9px;
    border-radius: 4px;
    background: #e2e6e2;
}

@media (max-width: 860px) {
    .ts-lp-extract { grid-template-columns: 1fr; gap: 36px; }
    .ts-lp-extract-copy { order: 1; max-width: none; }
    .ts-lp-extract-visual { order: 2; }
}

/* ── Services grid ── */
.ts-lp-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.ts-lp-service {
    background: var(--ts-white);
    border-radius: 12px;
    padding: 32px 28px;
    border-left: 5px solid var(--ts-accent-green);
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.18s, box-shadow 0.18s;
}
.ts-lp-section--white .ts-lp-service { background: var(--ts-white); }
.ts-lp-service:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(62,201,29,0.14);
}
.ts-lp-service-icon { font-size: 34px; margin-bottom: 14px; }
.ts-lp-service-title {
    font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Segoe UI', sans-serif;
    font-size: 21px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1a2332;
    margin: 0 0 10px;
}
.ts-lp-service-body { color: var(--ts-muted-text); font-size: 14px; line-height: 1.65; margin: 0; }
.ts-lp-service-tag {
    display: inline-block;
    background: var(--ts-accent-light);
    color: var(--ts-accent-down);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    margin-top: 14px;
    letter-spacing: 0.4px;
}

/* ── Why TaxSolve grid ── */
.ts-lp-why {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
.ts-lp-why-item {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 24px 18px;
    text-align: center;
    transition: background 0.18s, border-color 0.18s;
}
.ts-lp-why-item:hover {
    background: rgba(62,201,29,0.1);
    border-color: var(--ts-accent-green);
}
.ts-lp-why-icon { font-size: 28px; margin-bottom: 10px; }
.ts-lp-why-title {
    font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    margin: 0 0 6px;
}
.ts-lp-why-body { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; margin: 0; }

/* ── Testimonials ── */
.ts-lp-testi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.ts-lp-testi-card {
    background: var(--ts-white);
    border-radius: 12px;
    padding: 26px 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.ts-lp-testi-stars { color: var(--ts-accent-green); font-size: 15px; margin-bottom: 10px; letter-spacing: 2px; }
.ts-lp-testi-text  { font-size: 14px; color: #555; line-height: 1.65; font-style: italic; margin: 0 0 16px; }
.ts-lp-testi-author { display: flex; align-items: center; gap: 12px; }
.ts-lp-testi-avatar {
    width: 40px; height: 40px;
    background: var(--ts-accent-light);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ts-lp-testi-name { font-weight: 600; font-size: 14px; color: #1a2332; }
.ts-lp-testi-role { font-size: 12px; color: #aaa; }

/* ── Final CTA (green gradient) ── */
.ts-lp-cta {
    background: linear-gradient(135deg, #1d6b0e 0%, #0f3d07 100%);
    text-align: center;
}
.ts-lp-cta-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 64px 32px;
}
.ts-lp-cta-headline {
    font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Segoe UI', sans-serif;
    font-size: clamp(30px, 5vw, 54px);
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    margin: 0 0 14px;
}
.ts-lp-cta-sub { color: rgba(255,255,255,0.88); font-size: 17px; margin: 0 0 28px; }
.ts-lp-cta-btn {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: var(--ts-accent-down);
    border-radius: 6px;
    padding: 15px 36px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}
.ts-lp-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,0.2);
    text-decoration: none;
}
.ts-lp-cta-soft {
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    margin: 18px 0 0;
}
.ts-lp-cta-chatlink {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.ts-lp-cta-chatlink:hover { color: var(--ts-accent-light); }

/* ── Chat FAB ── */
.ts-lp-chat-fab {
    position: fixed;
    bottom: 28px; right: 28px;
    width: 58px; height: 58px;
    background: var(--ts-accent-green);
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 28px rgba(62,201,29,0.45);
    z-index: 999;
    transition: transform 0.18s, box-shadow 0.18s;
}
.ts-lp-chat-fab:hover { transform: scale(1.1); box-shadow: 0 12px 36px rgba(62,201,29,0.55); }
.ts-lp-chat-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: #e53935;
    color: #fff;
    font-size: 10px; font-weight: 700;
    border-radius: 50%;
    width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}

/* ── Chat window ── */
.ts-lp-chat {
    position: fixed;
    bottom: 100px; right: 28px;
    width: 360px; height: 500px;
    background: var(--ts-white);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.22);
    z-index: 998;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ts-lp-chat[hidden] { display: none; }
.ts-lp-chat-hdr {
    background: #1a2332;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}
.ts-lp-chat-avatar {
    width: 36px; height: 36px;
    background: var(--ts-accent-green);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.ts-lp-chat-hdr-name { color: #fff; font-size: 14px; font-weight: 600; margin: 0; }
.ts-lp-chat-hdr-status { display: flex; align-items: center; gap: 5px; }
.ts-lp-chat-hdr-status-dot {
    width: 7px; height: 7px;
    background: var(--ts-accent-green);
    border-radius: 50%;
    animation: ts-lp-pulse 1.5s infinite;
    display: inline-block;
    flex-shrink: 0;
}
@keyframes ts-lp-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.ts-lp-chat-hdr-online { color: rgba(255,255,255,0.55); font-size: 11px; margin: 0; }
.ts-lp-chat-close {
    margin-left: auto; background: none; border: 0;
    color: rgba(255,255,255,0.6); font-size: 18px; cursor: pointer; line-height: 1;
}
.ts-lp-chat-close:hover { color: #fff; }
.ts-lp-chat-msgs {
    flex: 1; overflow-y: auto;
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    background: #f8fdf7;
}
.ts-lp-chat-msg { display: flex; flex-direction: column; max-width: 85%; }
.ts-lp-chat-msg--bot  { align-self: flex-start; }
.ts-lp-chat-msg--user { align-self: flex-end; }
.ts-lp-chat-bubble {
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 13.5px; line-height: 1.55;
}
.ts-lp-chat-msg--bot .ts-lp-chat-bubble {
    background: var(--ts-white); color: #1a2332;
    border-bottom-left-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.ts-lp-chat-msg--user .ts-lp-chat-bubble {
    background: var(--ts-accent-green); color: #fff;
    border-bottom-right-radius: 3px;
}
.ts-lp-chat-footer {
    padding: 10px;
    border-top: 1px solid var(--ts-border);
    display: flex; gap: 8px;
    background: var(--ts-white);
    flex-shrink: 0;
}
.ts-lp-chat-input {
    flex: 1;
    border: 1.5px solid var(--ts-border);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 13.5px; outline: none;
    transition: border 0.18s;
    font-family: inherit;
}
.ts-lp-chat-input:focus { border-color: var(--ts-accent-green); }
.ts-lp-chat-send {
    width: 38px; height: 38px;
    background: var(--ts-accent-green);
    border: 0; border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #fff;
    transition: background 0.18s; flex-shrink: 0;
}
.ts-lp-chat-send:hover { background: var(--ts-accent-hover); }

/* ── Marketing landing responsive ── */
@media (max-width: 768px) {
    .ts-lp-inner     { padding: 56px 20px; }
    .ts-lp-inner--sm { padding: 36px 20px; }
    .ts-lp-cta-inner { padding: 48px 20px; }
    .ts-lp-services  { grid-template-columns: 1fr; }
    .ts-lp-why       { grid-template-columns: 1fr 1fr; }
    .ts-lp-testi     { grid-template-columns: 1fr; }
    .ts-lp-stats     { gap: 24px; }
    .ts-lp-chat      { width: calc(100vw - 32px); right: 16px; }
}
@media (max-width: 480px) {
    .ts-lp-why          { grid-template-columns: 1fr; }
    .ts-lp-chat-fab     { bottom: 16px; right: 16px; }
    .ts-lp-h1           { letter-spacing: -0.5px; }
}

/* Fieldset reset so a <fieldset>/<legend> grouping (e.g. the SignUp radio group)
   carries no default border/margin/padding — purely structural, no visual change. */
fieldset { border: 0; margin: 0; padding: 0; }

/* Disabled / phase-gated pseudo-link (rendered as a <span>, not an anchor-to-nowhere). */
.ts-auth-link.is-disabled,
.is-disabled {
    color: var(--ts-muted-text);
    cursor: default;
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   P6-W5 — Staff E-file Submission (prototype canon: 7. Review & File/E-file Submission.html
   + the post-transmit acknowledgment-status surface). Reuses the existing design system
   (ts-status-banner / ts-stepper / ts-mini-checklist / ts-table / ts-summary-list / ts-badge);
   ONLY the new tokens below had no existing class — a clearly-delimited additive section.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* Reject badge — the one status color the e-file lifecycle needs that the palette lacked.
   Red error tone (distinct from the amber "amendment/pending" and the green "filed"). */
.ts-badge-rejected {
    background-color: #FEE2E2;
    color: #B91C1C;
}

/* Status-banner — FILED (every authority accepted): deepen the default success banner so the
   terminal "accepted / filed" state reads as a completed confirmation, not in-progress. */
.ts-status-banner--filed {
    background-color: var(--ts-success-bg);
    border-color: var(--ts-success-text);
}
.ts-status-banner--filed .ts-status-banner-icon,
.ts-status-banner--filed .ts-status-banner-state {
    color: var(--ts-success-text);
}

/* Status-banner — REJECTED (at least one authority rejected): the red alert frame. A reject
   never silently passes (Decision 056); the banner makes the rejected state unmissable and the
   actionable next-step copy lives in the per-jurisdiction rows below it. */
.ts-status-banner--error {
    background-color: #FEE2E2;
    border-color: #B91C1C;
}
.ts-status-banner--error .ts-status-banner-icon,
.ts-status-banner--error .ts-status-banner-state {
    color: #B91C1C;
}
.ts-status-banner--error .ts-status-banner-meta {
    color: #991B1B;
}
/* "Why?" disclosure on a recompute-refusal banner: hides the raw engine/statute text behind a
   click so the banner leads with a plain-language summary, not internal tax-code jargon. */
.ts-refusal-why { margin-top: 4px; }
.ts-refusal-why > summary { cursor: pointer; font-weight: 600; color: #B91C1C; }
.ts-refusal-why-detail { display: block; margin-top: 4px; color: #991B1B; }

/* Staff orientation bar: a full-width strip shown when a preparer is inside a client's return
   data-entry chrome, with a one-click route back to that return's Workspace. */
.ts-staff-return-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 24px;
    background-color: var(--ts-accent-hover);
    color: var(--ts-white);
    font-size: 9.5pt;
}
.ts-staff-return-bar-text { font-weight: 600; }
.ts-staff-return-bar-link { color: var(--ts-white); text-decoration: underline; font-weight: 600; white-space: nowrap; }
.ts-staff-return-bar-link:hover { color: var(--ts-white); text-decoration: underline; }

/* The per-jurisdiction reject next-step note rendered under a rejected submission row — the
   actionable message resolved from the ack's stored message KEY (W4 reject-message resolver). */
.ts-efile-reject-note {
    margin: 6px 0 0;
    padding: 10px 14px;
    background-color: #FEF2F2;
    border-left: 3px solid #B91C1C;
    border-radius: var(--ts-radius-sm);
    font-size: 9pt;
    color: #991B1B;
}
.ts-efile-reject-note strong {
    color: #B91C1C;
}

/* Return verification current-run artifact (Ticket #969). */
.rv-container { width: min(1160px, 100%); margin: 0 auto; }
.rv-breadcrumb { display: flex; gap: 8px; margin-bottom: 16px; color: var(--ts-text-muted); font-size: 9.5pt; }
.rv-breadcrumb a { color: var(--ts-accent); font-weight: 700; text-decoration: none; }
.rv-page-head, .rv-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.rv-page-head { margin-bottom: 18px; }
.rv-run-meta { display: flex; align-items: center; gap: 8px; }
.rv-eyebrow { margin: 0 0 3px; color: var(--ts-accent); font-size: 8.5pt; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rv-state { margin: 0 0 14px; padding: 16px 18px; border-left: 4px solid #b45309; border-radius: var(--ts-radius-sm); background: #fffbeb; }
.rv-state h2 { margin: 0 0 4px; font-size: 14pt; }.rv-state p { margin: 0; color: var(--ts-text-muted); }
/* Task #1013 Pass A finding A-5: .rv-state p's margin:0 (needed so the banner's own lead paragraph
   sits flush under its h2) has higher specificity than the bare .rv-note rule below, so the Reason /
   Next step paragraphs #1013 added stacked with zero separation. Matches the prototype's own
   declared value verbatim (return-verification-v2.css:129, .rv-note { margin: 12px 2px 0; ... }),
   scoped to .rv-state so every OTHER .rv-note on this page (evidence/reconciliation "Unavailable in
   this run", etc., all outside .rv-state) keeps its existing spacing unchanged. */
.rv-state .rv-note { margin: 12px 2px 0; }
.rv-state-info { border-color: #0369a1; background: #f0f9ff; }.rv-state-error { border-color: #b91c1c; background: #fef2f2; }
.rv-jumpbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 26px; padding: 10px 0; border-bottom: 1px solid var(--ts-border); }
.rv-jumpbar > span { color: var(--ts-text-muted); font-size: 9pt; font-weight: 700; }.rv-jumpbar a { color: var(--ts-text); font-size: 9pt; font-weight: 700; text-decoration: none; }
.rv-jumpbar b { display: inline-grid; min-width: 18px; place-items: center; border-radius: 50%; background: #fee2e2; color: #991b1b; }
.rv-section { margin-bottom: 32px; scroll-margin-top: 20px; }.rv-section-head { align-items: end; margin-bottom: 12px; }.rv-section-head h2 { margin: 0; font-size: 16pt; }
.rv-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.rv-fact, .rv-finding, .rv-disclosure, .rv-contributors { border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm); background: var(--ts-white); }
.rv-fact { padding: 15px; }.rv-fact > span { color: var(--ts-text-muted); font-size: 8pt; font-weight: 700; text-transform: uppercase; }.rv-fact strong { display: block; margin-top: 5px; }
.rv-note { color: var(--ts-text-muted); font-size: 9pt; }.rv-determination { padding: 15px; border-left: 4px solid #0369a1; border-radius: var(--ts-radius-sm); background: #f0f9ff; }.rv-determination p { margin: 6px 0 0; }
.rv-predicates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.rv-predicates > div { padding: 10px; border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm); }.rv-predicates dt { color: var(--ts-text-muted); font-size: 8pt; }.rv-predicates dd { margin: 4px 0 0; font-weight: 700; }
.rv-table-region { overflow-x: auto; border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm); }.rv-table { min-width: 620px; margin: 0; }.rv-table-region:focus-visible { outline: 3px solid var(--ts-accent); outline-offset: 2px; }
.rv-disclosure { margin-bottom: 10px; overflow: hidden; }.rv-disclosure summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; }.rv-disclosure summary small { display: block; color: var(--ts-text-muted); }.rv-disclosure-body { padding: 0 16px 16px; border-top: 1px solid var(--ts-border); }
.rv-contributors { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1.3fr); gap: 20px; margin-top: 14px; padding: 14px; background: #f8faf8; }.rv-contributors h3 { margin: 0 0 4px; }.rv-contributors dl { margin: 0; }.rv-contributors dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ts-border); }.rv-contributors dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 700; }.rv-aggregate-blocked { display: block !important; color: #92400e; font-weight: 700; }.rv-total { font-weight: 800; }
.rv-finding { margin-bottom: 10px; padding: 16px; }.rv-finding header { display: flex; align-items: center; gap: 10px; }.rv-finding p { margin-bottom: 0; }
.rv-actions { display: grid; gap: 10px; }.rv-actions form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }.rv-contract-form label { display: grid; gap: 4px; color: var(--ts-text-muted); font-size: 9pt; }
@media (max-width: 720px) { .rv-page-head, .rv-section-head { flex-direction: column; align-items: flex-start; }.rv-facts, .rv-predicates, .rv-contributors { grid-template-columns: 1fr; }.rv-jumpbar { position: sticky; top: 0; z-index: 2; background: var(--ts-page-bg); } }

/* Return verification v2 parity and page-scoped responsive chrome. The shared layout does not
   expose a page-class slot, so :has(.rv-container) is the narrow standards-compatible hook. */
.rv-jumpbar {
    position: sticky;
    top: 0;
    z-index: 5;
    flex-wrap: nowrap;
    padding: 11px 8px;
    background: color-mix(in srgb, var(--ts-page-bg) 96%, transparent);
    backdrop-filter: blur(6px);
    overflow-x: auto;
}
.rv-jumpbar a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--ts-border);
    border-radius: 999px;
    background: var(--ts-white);
    white-space: nowrap;
}
.rv-pill {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 26px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 8.5pt;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
}
.rv-tone-neutral { background: #eef1ef; color: #445149; }
.rv-tone-low { background: #e0f2fe; color: #075985; }
.rv-tone-medium { background: #fef3c7; color: #92400e; }
.rv-tone-high { background: #fff1f2; color: #be123c; }
.rv-tone-critical { background: #fee2e2; color: #991b1b; }
.rv-finding.rv-tone-low { border-left: 4px solid #0284c7; }
.rv-finding.rv-tone-medium { border-left: 4px solid #d97706; }
.rv-finding.rv-tone-high { border-left: 4px solid #e11d48; }
.rv-finding.rv-tone-critical { border-left: 4px solid #dc2626; }
.rv-finding header { justify-content: space-between; align-items: flex-start; }
.rv-finding header > div { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.rv-code { color: var(--ts-text-muted); font-family: Consolas, monospace; font-size: 9pt; }
.rv-comparison { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 1px; margin-top: 14px; overflow: hidden; border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm); background: var(--ts-border); }
.rv-comparison > div { display: grid; gap: 3px; padding: 12px 14px; background: #fafbfa; }
.rv-comparison span { color: var(--ts-text-muted); font-size: 8pt; font-weight: 700; text-transform: uppercase; }
.rv-comparison strong { font-variant-numeric: tabular-nums; }
.rv-recommendation { padding: 12px 14px; border-radius: var(--ts-radius-sm); background: #f7f9f7; }
.rv-run-fingerprint { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); margin: 12px 0 0; border: 1px solid var(--ts-border); border-radius: var(--ts-radius-sm); overflow: hidden; }
.rv-run-fingerprint > div { min-width: 0; padding: 10px 12px; border-right: 1px solid var(--ts-border); background: #f8faf8; }
.rv-run-fingerprint > div:last-child { border-right: 0; }
.rv-run-fingerprint dt { color: var(--ts-text-muted); font-size: 7.8pt; font-weight: 750; text-transform: uppercase; }
.rv-run-fingerprint dd { margin: 4px 0 0; overflow-wrap: anywhere; font-size: 9pt; font-weight: 700; }
.rv-table caption.rv-visually-hidden,
.rv-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.rv-row-excluded { background: #f6f7f6; color: var(--ts-text-muted); }
.rv-table small { display: block; margin-top: 3px; color: var(--ts-text-muted); }
.rv-contract-form input,
.rv-contract-form select { min-height: 38px; }

@media (max-width: 720px) {
    .ts-page:has(.rv-container) { --ts-sidebar-w: 0px; }
    .ts-page:has(.rv-container) .ts-sidebar { display: none; }
    .ts-page:has(.rv-container) .ts-main,
    .ts-page:has(.rv-container) .ts-action-row { margin-left: 0; }
    .ts-page:has(.rv-container) .ts-main { padding: 16px 14px 28px; }
    .rv-page-head,
    .rv-section-head { flex-direction: column; align-items: flex-start; }
    .rv-facts,
    .rv-predicates,
    .rv-contributors,
    .rv-comparison { grid-template-columns: 1fr; }
    .rv-run-fingerprint { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rv-run-meta { flex-wrap: wrap; }
}