/* 2026 Tax Season feeder blocks (docs/tax-season-2026/PAGES.md).
 *
 * Shared by the calculator pages that answer "what does this one year-end move
 * do to my 2026 tax": the answer-first block, the live "this year's tax"
 * panel, the before/after table, the bracket meter, the hand-off into
 * /year-end-tax-moves/ and the engine disclaimer. Loaded after main.css by
 * those pages only. Colours come from css/tokens.css roles, so the blocks
 * follow [data-theme="dark"] wherever a page turns it on; the literal after
 * each var() is the light value for a page that does not load tokens.css.
 */

.ts-panel {
    background: var(--surface-card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 20px 22px;
    margin: 16px 0;
    color: var(--ink, #131a22);
}
.ts-panel h2 { margin: 0 0 10px; font-size: 1.15rem; color: var(--accent, #1e56c8); line-height: 1.35; }
.ts-panel h3 { margin: 16px 0 6px; font-size: 1rem; color: var(--ink, #131a22); }
.ts-panel p { line-height: 1.7; margin: 0 0 12px; color: var(--ink, #334155); }
.ts-panel p:last-child { margin-bottom: 0; }
.ts-panel a { color: var(--accent, #1d4ed8); }

/* Answer-first: the question as the H2, then the direct answer. */
.ts-answer { border-left: 4px solid var(--accent, #1e56c8); }
.ts-answer .ts-lead { font-size: 1.02rem; }

/* Key numbers / before-after tables. */
.ts-table-wrap { overflow-x: auto; margin: 10px 0 4px; -webkit-overflow-scrolling: touch; }
table.ts-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.ts-table caption { text-align: left; font-size: 0.82rem; color: var(--ink-muted, #475569); padding: 0 0 8px; line-height: 1.5; caption-side: top; }
table.ts-table th { background: var(--surface-raised, #f1f5f9); color: var(--ink-muted, #475569); text-align: left; padding: 7px 8px; font-weight: 600; }
table.ts-table td { padding: 7px 8px; border-bottom: 1px solid var(--border, #f1f5f9); vertical-align: top; }
table.ts-table td.num, table.ts-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ts-table tr.ts-total td { font-weight: 700; border-top: 2px solid var(--border-strong, #c9d0d9); }
table.ts-table .ts-src { font-size: 0.78rem; color: var(--ink-faint, #6b7583); }

/* The live calculator. */
.ts-calc { border: 2px solid var(--accent, #2563eb); background: var(--accent-surface, #f8fbff); }
.ts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; }
.ts-field { display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--ink, #334155); font-weight: 600; min-width: 0; }
.ts-field input, .ts-field select {
    padding: 9px 12px; border: 1px solid var(--border-strong, #cbd5e1); border-radius: 7px;
    font-size: 1rem; width: 100%; box-sizing: border-box;
    background: var(--surface-card, #fff); color: var(--ink, #131a22);
}
.ts-field .ts-hint { font-weight: 400; font-size: 0.75rem; color: var(--ink-faint, #64748b); }
.ts-chip { display: inline-block; margin: 12px 0 0; padding: 5px 11px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: #92400e; }
.ts-result { margin-top: 14px; }
.ts-head { background: var(--surface-card, #fff); border-left: 4px solid var(--accent, #2563eb); border-radius: 8px; padding: 12px 14px; }
.ts-head .ts-amount { font-size: 1.6rem; font-weight: 700; line-height: 1.2; color: var(--ink, #111827); overflow-wrap: anywhere; }
.ts-head .ts-sub { font-size: 0.9rem; color: var(--ink-muted, #475569); margin-top: 4px; line-height: 1.5; }
.ts-note { margin-top: 10px; padding: 11px 13px; border-radius: 8px; font-size: 0.88rem; line-height: 1.6; background: var(--accent-surface, #eff6ff); color: var(--ink, #334155); }
.ts-note.ts-warn { background: #fef3c7; color: #78350f; }

/* "Room left in your bracket" meter: one band per ordinary bracket, the
   household's taxable ordinary income as the fill, the room printed. */
.ts-meter { margin: 12px 0 6px; }
.ts-meter-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border-strong, #c9d0d9); background: var(--surface-raised, #eef1f5); }
.ts-meter-seg { position: relative; flex: 1 1 0; min-width: 0; border-right: 1px solid var(--border-strong, #c9d0d9); }
.ts-meter-seg:last-child { border-right: 0; }
.ts-meter-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent, #1e56c8); opacity: 0.75; }
.ts-meter-labels { display: flex; font-size: 0.72rem; color: var(--ink-muted, #5b6674); margin-top: 3px; }
.ts-meter-labels span { flex: 1 1 0; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The hand-off into Year-end Tax Moves at the result moment. */
.ts-cta {
    margin-top: 16px; padding: 13px 15px;
    border: 1px solid var(--border, #e2e8f0); border-left: 4px solid var(--ok, #177245);
    border-radius: 8px; background: var(--surface-card, #fff);
    font-size: 0.92rem; line-height: 1.6; color: var(--ink, #334155);
}
.ts-cta a { color: var(--ok, #177245); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.ts-cta a:hover { text-decoration: underline; }

/* The engine disclaimer, once per page, near the first figure. */
.ts-disclaimer { font-size: 0.82rem; color: var(--ink-muted, #64748b); padding: 10px 13px; background: var(--surface-raised, #f8fafc); border-left: 3px solid var(--border-strong, #94a3b8); border-radius: 6px; margin: 12px 0; line-height: 1.55; }

@media (max-width: 640px) {
    .ts-panel { padding: 16px 14px; }
    .panel .ts-panel { padding: 12px 8px; margin-left: -6px; margin-right: -6px; }
    table.ts-table { font-size: 0.78rem; }
    table.ts-table th, table.ts-table td { padding: 5px 3px; }
    table.ts-table th.num { white-space: normal; }
    .ts-head .ts-amount { font-size: 1.35rem; }
}

/* `hidden` must win over the display these blocks set (a page without its own
   [hidden] rule would otherwise show a hidden hand-off or example chip). */
.ts-panel [hidden], .ts-cta[hidden], .ts-chip[hidden], .ts-field[hidden] { display: none !important; }
/* The worked example paragraph, also when a feeder block sits outside a .ts-panel. */
p.ts-lead { margin: 10px 0 12px; line-height: 1.7; }