/*styles.css*/
/* === 1. Reset / Defaults === */
/* Global box-sizing and margin/padding reset */
/*Universal*/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1 { font-size: 1.3rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.1rem; }

:root {
    --color-logo-blue: #0d008a;
    --color-brand-blue-dark: #00008b;
    --color-brand-accent: #005580;
    --color-red-text: #c10000;
    --snippet-width: 856px;
    --bg-page: #fff;
    --bg-panel: #f4f4f4;
    --bg-bar: #ddd;
    --bg-muted: #eee;
    --bg-modal: #e8e7e7;
    --bg-light: #f2f2f2;
    --bg-soft-blue: #EAF4FF;
    --bg-soft-red: #ecdad9;
    --bg-soft-green: #daf4e7;
    --bg-soft-yellow: #fbffd9;
    --bg-soft-brown: #DED3B7;
    --bg-focus: #fffbe6;
    --bg-footer: #f8f8f8;
    --bg-darker-gray: #858585;
    --tooltip-bg: rgba(20, 20, 20, 0.9);
    --tooltip-color: #fff;
    --tooltip-font-size: 0.75rem;
    --tooltip-padding: 4px 6px;
    --tooltip-radius: 4px;
    --tooltip-rise: 4px;
    --sd-finder-inline-margin: 23px;
    --tsj-hidden-width: 224px;
}

body, h1, h2, p, ul, ol {
    margin: 0;
    padding: 0;
}

/*img, */
video {
    max-width: 100%;
    height: auto;
    display: block;
}

.logoBlue {
    color: var(--color-logo-blue);
}

/* === LAYOUT GRID (updated) === */
body { /* contains left panel, top-bar, snippet-panel, right-panel */
    width: 100vw;                 /* was 1030px; let right panel claim remaining space */
    min-width: 845px;
    height: 572px;
    font-family: Roboto, Arial, sans-serif;
    font-size: 18px;
    font-weight: 500;
    overflow-x: auto;
    overflow-y: hidden;
    display: grid;

    /* 3 columns: left fixed, center fixed, right flexible */
    grid-template-columns: 174px var(--snippet-width) 1fr;
    grid-template-rows: 30px 1fr;

    /* Row 1: original top bar over center, new bar over right */
    /* Row 2: left panel + center snippets + right panel */
    grid-template-areas:
      "left-panel top-bar top-bar-right"
      "left-panel snippet-panel right-panel";
}

body.filing-single-layout {
    --snippet-width: calc(856px - var(--tsj-hidden-width));
}

#left-panel {
    grid-area: left-panel;
    background: linear-gradient(
        to bottom,
        var(--bg-bar) 0 30px,
        var(--bg-panel) 30px 100%
    );
    display: flex;
    flex-direction: column;
    padding: 5px;
    min-height: 0;
}

#brand-block {
    height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    padding-top: 8px;
    background: transparent;
}

#logo {
    background-size: contain;
    margin: 0;
    position: relative;
    top: 20px;
    left: 5px;
}

#logo img {
    width: 89%;
    height: auto;
}

.version {
    font-size: 8px;
    font-weight: normal;
    text-align: center;
    margin-top: 12px;
}
#year-select {
    height: 58px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    justify-items: center;
    margin: 2px 0;
    padding: 3px 0 1px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    column-gap: 6px;
}

.year-select-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.year-select-label {
    font-size: 12.7px;
    font-weight: 600;
    line-height: 1;
}

#tax-year,
#tax-state,
#topic-filter-trigger,
#top-topic-filter-trigger {
    background: var(--color-brand-blue-dark);
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 4px;
}

#tax-state {
    text-transform: uppercase;
}

#topic-filter-trigger,
#top-topic-filter-trigger {
    cursor: pointer;
    min-width: 52px;
    height: 27px;
    line-height: 1;
}

#nav-radios {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 157px;
    grid-auto-rows: max-content;
    align-content: start;
    row-gap: 2px;
    padding: 4px 0;
    border: 0;
    margin-right: -3px;
    margin-left: 2px;
    overflow-y: auto;
    scrollbar-gutter: stable;
}
#nav-radios input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
#nav-radios label {
    background: #000;
    color: #fff;
    font-weight: bold;
    padding: 4px;
    margin-bottom: 2px;
    display: block;
    border-radius: 6px;
    margin-left: 3px;
}
#tool-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
    margin-bottom: 0;
    padding: 5px 0 5px 5px;
}
#tool-buttons button {
    background: darkgreen;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 2px;
}
#tool-btn-12 {
    background: linear-gradient(180deg, #9b1c1c 0%, #6f1414 100%);
    border-color: #3f0c0c;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
#tool-btn-12:hover,
#tool-btn-12:focus {
    background: linear-gradient(180deg, #b02222 0%, #7f1818 100%);
}
#tool-btn-02.has-note {
    background: #0b5f0b;
    box-shadow: inset 0 0 0 2px #f1c94f;
}
#tool-btn-02.has-note::after {
    content: " •";
    color: #ffd873;
    font-weight: bold;
}
#notes-modal {
    position: fixed;
    top: 120px;
    left: 120px;
    width: 420px;
    height: 360px;
    background: var(--bg-page);
    border: 2px solid #222;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    resize: both;
    overflow: hidden;
    min-width: 174px;
    min-height: 260px;
}
#notes-modal.is-pinned {
    box-shadow: 0 0 0 2px #f1c94f, 0 12px 24px rgba(0, 0, 0, 0.35);
}
.notes-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--bg-bar);
    border-bottom: 1px solid #222;
    cursor: move;
    user-select: none;
}
.notes-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.notes-title-wrap h2 {
    margin: 0;
    font-size: 1rem;
}
.notes-timestamp {
    font-size: 0.78rem;
    color: #2f2f2f;
}
.notes-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.notes-pin-btn,
.notes-close {
    background: none;
    border: 1px solid #333;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
}
.notes-pin-btn img {
    width: 18px;
    height: 18px;
}
.notes-close {
    font-size: 1.4rem;
    line-height: 1;
}
.notes-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    flex: 1;
    min-height: 0;
}
#notes-modal textarea {
    width: 100%;
    flex: 1;
    resize: none;
    padding: 8px 10px;
    border: 1px solid #888;
    border-radius: 6px;
    background: #fbfaeb;
    font-family: inherit;
    font-size: 0.95rem;
}
#notes-modal .notes-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.notes-footer-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.notes-counter {
    font-size: 0.85rem;
    color: #333;
}
#notes-modal::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 6px;
    width: 22px;
    height: 22px;
    border-right: 3px solid #3a3a3a;
    border-bottom: 3px solid #3a3a3a;
    border-bottom-right-radius: 4px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}
.tooltip-bubble {
    position: absolute;
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    font-size: var(--tooltip-font-size);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-radius);
    opacity: 0;
    transform: translateY(var(--tooltip-rise));
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}
.notes-resize-hint {
    right: 28px;
    bottom: 10px;
}
.notes-pin-hint {
    top: 28px;
    right: 0;
}
.notes-pin-btn {
    position: relative;
}
.notes-pin-btn:hover .notes-pin-hint,
.notes-pin-btn:focus-visible .notes-pin-hint {
    opacity: 1;
    transform: translateY(0);
}
.notes-resize-hotspot {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36px;
    height: 36px;
    cursor: se-resize;
}
.notes-resize-hotspot:hover .notes-resize-hint {
    opacity: 1;
    transform: translateY(0);
}
#notes-modal .notes-delete-btn {
    background: #8d1b1b;
    color: #fff;
    border: 1px solid #5f1010;
    border-radius: 6px;
    padding: 6px 10px;
}
#notes-modal .notes-delete-btn:hover,
#notes-modal .notes-delete-btn:focus {
    background: #b11f1f;
}

/* stacked "except / medical" next to the main word */
.btn-stacked-label {
    display: inline-block;
    vertical-align: top;
    line-height: 1.05;
    font-weight: normal;
    font-size: 0.65rem;      /* smaller than label text */
    text-align: center;
    margin-left: 4px;
}

.btn-stacked-label > span { display: block; } /* stack the two words */

#tool-buttons button:hover { background-color: #0d008a; }
.reset-confirm {
    padding: 4px 0 2px;
}
.reset-confirm p {
    margin: 0 0 8px;
}
.reset-confirm .device-data-definition {
    font-size: 0.93rem;
    color: #2f2f2f;
    font-weight: 400;
}
.reset-confirm .device-data-term {
    font-weight: 500;
    color: #3b3b3b;
}
.reset-confirm .device-data-note,
.reset-confirm .device-data-note small {
    font-weight: 400;
}
.reset-confirm__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}
.reset-confirm__actions.utilities-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: stretch;
    gap: 10px;
}
.reset-confirm__actions.utilities-actions.utilities-actions--two-col {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
}
.reset-confirm__actions.utilities-actions button {
    width: 100%;
    background: darkgreen;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 2px;
}
.reset-confirm__actions.utilities-actions:not(.utilities-actions--two-col) button {
    width: min(240px, 100%);
    justify-self: center;
}
@media (max-width: 560px) {
    .reset-confirm__actions.utilities-actions,
    .reset-confirm__actions.utilities-actions.utilities-actions--two-col {
        grid-template-columns: 1fr;
    }
}
.reset-confirm__actions.utilities-actions button:hover,
.reset-confirm__actions.utilities-actions button:focus {
    background-color: #0d008a;
}
.reset-confirm__actions.device-data-actions button {
    background: darkgreen;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 2px 8px;
}
.reset-confirm__actions.device-data-actions button:hover,
.reset-confirm__actions.device-data-actions button:focus {
    background-color: #0d008a;
}
.reset-confirm__actions button[data-action="app-reset-confirm"] {
    background: #8d1b1b;
    color: #fff;
    border: 1px solid #5f1010;
}
#top-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    grid-area: top-bar;
    background: var(--bg-bar);
    display: flex;
    max-height: 36px;
    align-items: center;
    padding: 0 4px;
    gap: 0;
}
#top-bar-right {
    grid-area: top-bar-right;
    position: sticky;      /* stick like the original */
    top: 0;
    z-index: 99;           /* just below your #top-bar z-index:100 */
    background: var(--bg-bar);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    max-height: 36px;
    border-left: 1px solid black; /* subtle seam where it meets center bar */
}
#top-bar-right .rightbar-title {
    font-weight: bold;
    padding-left: 4px;
}
#top-bar-right .rightbar-spacer { flex: 1; }
#top-bar-right .rightbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

#top-logo {
    max-height: 28px;
    background-size: contain;
    padding: 0;
    margin-left: 5px;
    /*visibility: hidden;*/
}

/* Hide duplicated top-bar controls when left-panel is visible */
#top-logo,
#top-year-select,
#top-reveal-select,
#top-state-select,
#nav-dropdown,
#menu-dropdown {
    display: none;
}

#top-year-select select,
#top-reveal-select select,
#top-state-select select,
#nav-dropdown select,
#menu-dropdown select {
    background: var(--color-brand-blue-dark);
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    height: 24px;
    /*visibility: hidden;*/
}

#top-reveal-select button {
    background: var(--color-brand-blue-dark);
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    height: 24px;
}

.spacer { flex-grow: 1; }

#top-bar-columns-wrap {
    display: flex;
    align-items: center;
}

#top-bar-columns {
    display: flex;
    align-items: center;
}

.top-bar-shift-6 {
    position: relative;
    left: 3px;
}

.role {
    width: 112px;
    text-align: center;
    font-weight: bold;
}
.role-joint {
    width: 107px;
    text-align: center;
}
.role-mfj-stacked { padding-right: 6px; }

#snippet-panel {
    grid-area: snippet-panel;
    background: var(--bg-page);
    scroll-padding-top: 64px;
    overflow-y: auto;
    overflow-x: clip;
    scrollbar-gutter: stable;
    padding: 4px;
    width: var(--snippet-width);
    max-width: 100%;
}

#SDScenarios-container {
    /*display: inline-block;*/
    width: min(827px, 100%);
    /*width: fit-content;*/
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 0 68px 0 0;
}

.sd-bordered {
    width: 462px;
    max-width: 462px;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 0;
    border-bottom: none !important;
    margin-top: 6px;
}

.sd-bordered .opt_SD_name {
    width: 45ch;
    max-width: 45ch;
    flex: 0 0 100%;
    margin-bottom: 4px;
}

.sd-bordered .scenario-row.active-sd {
    flex-wrap: wrap;
    padding-right: 0;
    width: calc(100% - 26px);
    max-width: calc(100% - 26px);
    margin-left: 26px;
}

.sd-rate-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
    position: relative;
    top: -15px;
}
.sd-bordered .sd-rate-row { top: -10px !important; }
.sd-rate-row label {
    white-space: nowrap;
    line-height: 1.1;
    margin-right: 0;
    padding-top: 0.25rem;
    /*margin-top:                                                                                                                                                                                         .25rem;*/
}
.sd-rate-row label input[type="radio"] {
    vertical-align: top;
    margin-top: -0.2rem;
}
.scenario-row.active-sd .sd-rate-row label {
    margin-right: 0 !important;
}
.sd-rate-row .sd-rate-pair {
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    margin-left: 0.5rem;
}

.sd-bordered .sd-action-buttons { flex-wrap: wrap; }
.sd-bordered .sd-action-buttons {
    position: relative;
    top: -12px;
    margin-bottom: -8px;
}
.sd-bordered .sd-action-buttons > div { flex-wrap: wrap; }
.sd-bordered .sd-action-buttons button { white-space: nowrap; }
/* Single source of truth for Finder spacing inside the bordered SD row */
.sd-bordered .sd-finder-link { margin: 0 var(--sd-finder-inline-margin) !important; }
.sd-bordered .sd-action-buttons button[data-action="sd-clear-all"] {
    margin-left: 0;
}

.marginLeft-10 { margin-left: 10px; }

/*++++++++++++++++++++++++++++++*/
/*For all snippets *//*++++++++++++++++++++++++++++++*/
/*For table layouts only (snippets) */
.section {
    margin-top: 5px;
    /*border-top: 5px solid darkblue !important;*/
    border-bottom: 2px solid darkgray !important;
}

#snippet-panel .section:first-of-type {
    margin-top: 0;
}

.text-bold { font-weight: bold; }
.text-small { font-size: 80%; }
.text-right { text-align: right; padding-right: 6px; }
.text-center { text-align: center; margin: 0 auto; }
.text-section-head { font-size: 125%; text-align: center; margin: 0 auto; }
.text-gray { color: #555; }
.bg-itemized-yellow { background-color: var(--bg-soft-yellow); }
.bg-soft-brown { background-color: var(--bg-soft-brown);}
.bg-soft-blue { background-color: var(--bg-soft-blue);}
.bg-soft-red {background-color: var(--bg-soft-red);}
.OH_subtraction { background-color: #eee3d4; }


.snippet-income {
    border-top: 2px solid #6f7480 !important;
    background: linear-gradient(180deg, #f6f7f9 0%, #eceff3 100%);
}
.section.snippet-income,
.section.snippet-investments,
.section.snippet-state,
.section.snippet-state-,
.section.snippet-credits,
.section.snippet-deductions,
.section.snippet-deductions- {
    width: fit-content;
    max-width: 100%;
}
.income-slate-accent {
    background-color: #cdd2da;
}
.income-slate-table {
    background-color: #eef1f5;
}
.income-slate-table tr.income-band-1 td { background-color: #f7f9fd; }
.income-slate-table tr.income-band-2 td { background-color: #e8ecf3; }
.income-slate-table tr.income-band-3 td { background-color: #e9ecf2; }
.income-slate-table tr.income-band-4 td { background-color: #dde2ea; }
.income-slate-table tr.income-band-5 td { background-color: #e6e9ef; }
.income-slate-table tr.income-band-6 td { background-color: #d8dde7; }
/*.income-slate-table tr.income-band-5 td { background-color: #e3e7ee; }*/
/*.income-slate-table tr.income-band-6 td { background-color: #d2d8e3; }*/

/*.income-slate-table tr.income-band-1 td { background-color: #e9ecf2; }*/
/*.income-slate-table tr.income-band-2 td { background-color: #dde2ea; }*/
/*.income-slate-table tr.income-band-3 td { background-color: #e6e9ef; }*/
/*.income-slate-table tr.income-band-4 td { background-color: #d8dde7; }*/
/*.income-slate-table tr.income-band-5 td { background-color: #e3e7ee; }*/
/*.income-slate-table tr.income-band-6 td { background-color: #d2d8e3; }*/

.income-slate-table tr.income-band-1 input[type="text"],
.income-slate-table tr.income-band-2 input[type="text"],
.income-slate-table tr.income-band-3 input[type="text"],
.income-slate-table tr.income-band-4 input[type="text"],
.income-slate-table tr.income-band-5 input[type="text"],
.income-slate-table tr.income-band-6 input[type="text"] {
    background-color: #fff;
}

/* Investments snippet: dedicated blue palette for snippet-level orientation + row grouping */
.snippet-investments {
    border-top: 2px solid #6f95bc !important;
    background: linear-gradient(180deg, #f3f8fe 0%, #e8f1fb 100%);
}
.investments-blue-table {
    background-color: #edf5ff;
}
.investments-blue-table tr.investments-band-1 td { background-color: #e9f3ff; }
.investments-blue-table tr.investments-band-2 td { background-color: #dce9fb; }
.investments-blue-table tr.investments-band-3 td { background-color: #e5f0ff; }
.investments-blue-table tr.investments-band-4 td { background-color: #d8e6fa; }
.investments-blue-table tr.investments-band-5 td { background-color: #e4efff; }
.investments-blue-table tr.investments-band-6 td { background-color: #d3e2f7; }
.investments-blue-table tr.investments-band-1 input[type="text"],
.investments-blue-table tr.investments-band-2 input[type="text"],
.investments-blue-table tr.investments-band-3 input[type="text"],
.investments-blue-table tr.investments-band-4 input[type="text"],
.investments-blue-table tr.investments-band-5 input[type="text"],
.investments-blue-table tr.investments-band-6 input[type="text"] {
    background-color: #fff;
}

/* state snippet: amber palette */
.snippet-state,
.snippet-state- {
    border-top: 2px solid #b88a3d !important;
    background: linear-gradient(180deg, #fff6e8 0%, #f9edd7 100%);
}
.state-amber-table {
    background-color: #fff2dc;
}
.state-amber-table tr.state-band-1 td { background-color: #fdeed4; }
.state-amber-table tr.state-band-2 td { background-color: #f6ddb2; }
.state-amber-table tr.state-band-3 td { background-color: #fbe8c8; }
.state-amber-table tr.state-band-4 td { background-color: #f1d29b; }
.state-amber-table tr.state-band-5 td { background-color: #f9e3bf; }
.state-amber-table tr.state-band-6 td { background-color: #ebc98a; }
.state-amber-table tr.state-band-1 input[type="text"],
.state-amber-table tr.state-band-2 input[type="text"],
.state-amber-table tr.state-band-3 input[type="text"],
.state-amber-table tr.state-band-4 input[type="text"],
.state-amber-table tr.state-band-5 input[type="text"],
.state-amber-table tr.state-band-6 input[type="text"] {
    background-color: #fff;
}

/* Credits snippet: plum palette */
.snippet-credits {
    border-top: 2px solid #b87d86 !important;
    background: linear-gradient(180deg, #fdf2f3 0%, #f8e6e9 100%);
}
.credits-plum-table {
    background-color: #faecef;
}
.credits-plum-table tr.credits-band-1 td { background-color: #f9e7ea; }
.credits-plum-table tr.credits-band-2 td { background-color: #f2d4d9; }
.credits-plum-table tr.credits-band-3 td { background-color: #f6dfe3; }
.credits-plum-table tr.credits-band-4 td { background-color: #edcdd3; }
.credits-plum-table tr.credits-band-5 td { background-color: #f6dce1; }
.credits-plum-table tr.credits-band-6 td { background-color: #e8c3cb; }
.credits-plum-table tr.credits-band-1 input[type="text"],
.credits-plum-table tr.credits-band-2 input[type="text"],
.credits-plum-table tr.credits-band-3 input[type="text"],
.credits-plum-table tr.credits-band-4 input[type="text"],
.credits-plum-table tr.credits-band-5 input[type="text"],
.credits-plum-table tr.credits-band-6 input[type="text"] {
    background-color: #fff;
}

/* OH items snippet: dedicated light-green palette for snippet-level orientation + row grouping */
.snippet-deductions,
.snippet-deductions- {
    border-top: 2px solid #7da67f !important;
    background: linear-gradient(180deg, #f3fbf3 0%, #e7f4e8 100%);
}
.deductions-green-table {
    background-color: #eff8ef;
}
.deductions-green-table tr.deductions-band-1 td { background-color: #e8f6e9; }
.deductions-green-table tr.deductions-band-2 td { background-color: #dceedd; }
.deductions-green-table tr.deductions-band-3 td { background-color: #e4f3e4; }
.deductions-green-table tr.deductions-band-4 td { background-color: #d7ebd9; }
.deductions-green-table tr.deductions-band-5 td { background-color: #e2f2e3; }
.deductions-green-table tr.deductions-band-6 td { background-color: #d2e7d3; }
.deductions-green-table tr.deductions-band-1 input[type="text"],
.deductions-green-table tr.deductions-band-2 input[type="text"],
.deductions-green-table tr.deductions-band-3 input[type="text"],
.deductions-green-table tr.deductions-band-4 input[type="text"],
.deductions-green-table tr.deductions-band-5 input[type="text"],
.deductions-green-table tr.deductions-band-6 input[type="text"] {
    background-color: #fff;
}

/*.snippet-credits-items {*/
/*    border-top: 2px solid #7f838c !important;*/
/*    background: linear-gradient(180deg, #f5f5f7 0%, #eceef2 100%);*/
/*}*/
/*.credits-amber-table {*/
/*    background-color: #eef0f4;*/
/*}*/
/*.credits-amber-table tr.credits-band-1 td { background-color: #e5e8ee; }*/
/*.credits-amber-table tr.credits-band-2 td { background-color: #dce0e8; }*/
/*.credits-amber-table tr.credits-band-3 td { background-color: #e8ebf1; }*/
/*.credits-amber-table tr.credits-band-4 td { background-color: #d7dce5; }*/
/*.credits-amber-table tr.credits-band-5 td { background-color: #e2e6ed; }*/
/*.credits-amber-table tr.credits-band-6 td { background-color: #d1d7e1; }*/
/*.credits-amber-table tr.credits-band-1 input[type="text"],*/
/*.credits-amber-table tr.credits-band-2 input[type="text"],*/
/*.credits-amber-table tr.credits-band-3 input[type="text"],*/
/*.credits-amber-table tr.credits-band-4 input[type="text"],*/
/*.credits-amber-table tr.credits-band-5 input[type="text"],*/
/*.credits-amber-table tr.credits-band-6 input[type="text"] {*/
/*    background-color: transparent;*/
/*}*/







#right-panel {
    grid-area: right-panel;
    /*max-height: 565px;*/
     max-height: 95vh;
    margin-right: 4px;
    border: 3px solid darkgreen;
    padding: 6px;
    background: var(--bg-page);
    overflow-y: auto;               /* scroll independently if needed */
    min-width: 0;                   /* allow panel to shrink inside grid */
    box-sizing: border-box;
    overflow-x: auto;
    position: relative;             /* anchor help overlay */
}

.clickableARIATextLink {
    color: blue;
    text-decoration: underline;
}
button.clickableARIATextLink {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
}
.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;
}

.icon-cell {
    width: 24px;
    height: 25px;
    text-align: center;
    padding-left: 2px;
}
.verbiage-cell {
    width: 465px;
    /*padding-left: 6px;*/
    padding: 0 5px 0 5px;
    height: 25px;
}
.reserved {
    /*background-color: #999999;*/
    background-color: var(--bg-muted);
}
.dep-X {
    padding-left: 6px;
    height: 25px;
}
tr td { border: 1px solid black; }

.value-cell {
    width: 112px;
    text-align: right;
    background-color: var(--bg-muted);
    font-size: .8rem;
}

.tax-table {
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
}

input[type="text"] {
    width: 100%;
    height: 100%;
    border: none;
    text-align: right;
    box-sizing: border-box;
    font-size: 13px;
    /*background-color: #f0f0f0;*/
    color: black;
}

/* END For Grid Layouts=========================================*/

/*++++++++++++++++++++++++++++++*/
/*For tables and grids (and flex if exists)*/
/*For <input> boxes*//*++++++++++++++++++++++++++++++*/
/*For grids and flex if exists*/
.icon {
    width: 20px;
    height: 18px;
    margin: 3px 1px 0 1px;
}
.icon-next-to-text {
    width: 18px;
    height: 16px;
    margin: 3px 1px 1px 1px;
}
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}
.icon-button:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

.dep-name { /*dependent name */
    max-width: 180px;
    margin-right: 15px;
    border: 1px solid black;
    text-align: left;
}
.dep-name-short {
    width: 12ch;
}
input.dep-name {
    border-left: 1px solid darkgray;
    border-right: 1px solid darkgray;
    border-bottom: 3px solid darkgray;
    text-align: left;
    padding: 4px; /* optional, improves readability */
}

.ui-choice-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.tax-ui {
    /*.ui-choice-left*/
    justify-content: flex-start;
    justify-content: center;
    font-weight: normal;
}
.tax-ui .ui-choice:focus-visible { box-shadow: 0 0 0 3px rgba(13, 0, 138, 0.4); }

.tax-ui .inline-flex-center {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Checkbox checkmark */
input[type="checkbox"],
input[type="radio"] {
    position: relative;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.inline-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
/*.inline-checkbox */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 2px solid #6b6b6b;
    border-radius: 3px;
    display: inline-block;
    vertical-align: middle;
}
.inline-checkbox input[type="checkbox"] {
    width: 23px;
    height: 23px;
}
input[type="radio"]{
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 2px solid #6b6b6b;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
}

.dep-credit-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
}
.inline-checkbox input {
    margin: 0;
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 7px;
    height: 13px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
input[type="checkbox"]:checked {
    background: #0d008a;
    border-color: #0d008a;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: #0d008a;
    box-shadow: 0 0 0 1px rgba(13, 0, 138, 0.2);
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus,
input[type="radio"]:focus-visible {
    outline: 2px solid #f0c000;
    outline-offset: 1px;
    border-color: #0d008a;
    box-shadow: 0 0 0 2px rgba(13, 0, 138, 0.3);
    background-color: #fff;
}

input[type="checkbox"]:checked:focus,
input[type="checkbox"]:checked:focus-visible {
    background-color: #0d008a;
}

/* Radio dot */
input[type="radio"]:checked { border-color: #0d008a; }

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    background: #0d008a;
    border-radius: 50%;
}

.shortenedInput {
    max-width: 80px;
    margin: 0 0 0 30px;
    text-align: right;
}

.shortenedInput-withCheckbox {
    max-width: 80px;
    margin: 0 0 0 5px;
}

/* Touch-target utility classes for dense checkbox/input clusters. */
input.touch-target-input.shortenedInput-withCheckbox_x_disabled {
    min-height: 28px;
    height: 28px;
    margin-left: 12px;
    padding: 0 6px;
}

input.touch-target-checkbox_x_disabled {
    width: 28px;
    height: 28px;
    margin-right: 8px;
}

label.inline-checkbox.touch-target-label {
    min-height: 28px;
    padding: 8px 4px;
    margin-right: 10px;
}

/* === Text alignment inside text inputs === */.ui-choice-centered input[type="text"] { text-align: center; }

.right-justify {
    float: right;
    text-align: right;
    margin-right: 6px;
}

label.active-section {
    border: 3px double currentColor;
    font-weight: normal !important;
}

.border-l { border-left: 1px solid black; }
.border-r { border-right: 1px solid black; }

/* Accessibility + Interactive Styling */
button:hover, button:focus,
select:hover, select:focus,
#nav-radios label:hover, #nav-radios label:focus {
    outline: 2px solid #004080;
    background-color: transparent; /*or initial or inherit*/
}

#nav-radios label:hover,
#nav-radios label:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px #004080;
    margin-right: 0;
}

.ageRelated { background-color: var(--bg-muted); }

.fed-blue-light { background-color: #EAF4FF; }
.fed-blue-dark { background-color: #EAF4FF; }
.deductions-green-light { background-color: var(--bg-soft-green); }
.SD-light-gray, withholding {
    background-color: rgb(241, 248, 255); /*light blue*/
    background-color: var(--bg-muted); /*light gray*/
}
.bb3d { border-bottom: 3px double black; }
.bt3d { border-top: 3px double black; }
.bb3 { border-bottom: 3px solid black; }
.bt3 { border-top: 3px solid black; }
.bb2s { border-bottom: 2px solid black; }
.bt2s { border-top: 2px solid black; }

/* Responsive Enhancements */
#snippet-panel { margin-left: 6px; }

#skip_SD_dropdown_0 { margin-right: 15px; }
#txt_SD_name_0 {
    border: 1px solid darkblue;
    text-align: left;

}    /*background-color: #f4faff;*/

.scenario-row.active-sd {
    width: min(797px, calc(100% - 26px));
    margin-left: 25px;
    font-size: .8rem;
    font-weight: normal;
    border: 2px solid #004080;
    backdrop-filter: #eee;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

body.filing-single-layout #top-bar-columns .hidden_spouse_input {
    display: none !important;
}

body.filing-single-layout #top-bar-columns-wrap {
    transform: translateX(-18px);
}

.sd-dropdown-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.75em 0 0.75em 25px;
}.sd-action-buttons button {
    background-color: darkgreen;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 1px 3px;
    cursor: pointer;
}

.sd-action-buttons button:hover { background-color: #0d008a; }

#calculateSalesTax {
    --sales-tax-panel-width: 600px;
}

#calculateSalesTax .sales-tax-modal-content {
    padding: 20px 20px 20px 0;
    width: var(--sales-tax-panel-width);
    max-width: var(--sales-tax-panel-width);
}

#SalesTax-container.sales-tax-top {
    width: var(--sales-tax-panel-width);
    max-width: var(--sales-tax-panel-width);
    box-sizing: border-box;
    overflow-x: visible;
    padding: 0 0 10px 0;
    margin-bottom: 12px;
}

#calculateSalesTax .sales-tax-header {
    margin-bottom: 6px;
    padding-left: 0;
}

#calculateSalesTax .sales-tax-bordered {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
    padding: 0;
    margin-top: 6px;
}

#calculateSalesTax .sales-dropdown-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.75em 0;
    padding-left: 0;
}

#calculateSalesTax .scenario-row.active-sales {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    font-size: .8rem;
    font-weight: normal;
    border: 2px solid #004080;
    backdrop-filter: #eee;
    padding: 4px 4px 4px 10px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
}

#calculateSalesTax .sales-preset-line {
    display: flex;
    align-items: center;
    gap: .4rem;
}

#calculateSalesTax .sales-rates-line {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(0.25rem, 1.2vw, 0.75rem);
    width: 100%;
    padding: 0 10px 0 4px;
    box-sizing: border-box;
}

#calculateSalesTax .opt_sales_name {
    width: 24ch;
    max-width: 100%;
    border: 1px solid darkblue;
    text-align: left;
}

#calculateSalesTax .active-label,
#calculateSalesTax .sales-rate-label {
    margin-left: 4px;
}

#calculateSalesTax .sales-rates-line .total-rate-label,
#calculateSalesTax #sales_rate_total_0 {
    font-weight: 700;
}

#calculateSalesTax .sales-rate {
    width: 8ch;
}

#calculateSalesTax .sales-action-buttons {
    margin-top: 0.5rem;
    width: 100%;
}

#calculateSalesTax .sales-action-buttons > div {
    margin: 0;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.5rem;
}

#calculateSalesTax #saved-sales-list-actions {
    margin: 16px 0 0 0;
    padding: 0;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.5rem;
}

#calculateSalesTax .sales-action-buttons > div button,
#calculateSalesTax #saved-sales-list-actions button {
    width: 100%;
    box-sizing: border-box;
}

#calculateSalesTax .sales-buttons-divider {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 12px 0 0 0;
}

#calculateSalesTax .sales-estimator-table {
    margin-left: 0;
    width: var(--sales-tax-panel-width);
    max-width: var(--sales-tax-panel-width);
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

#calculateSalesTax .sales-estimator-table td:first-child,
#calculateSalesTax .sales-estimator-table th:first-child {
    width: 315px;
    padding-left: 6px;
    text-align: left;
}

#calculateSalesTax .sales-estimator-table td:nth-child(2),
#calculateSalesTax .sales-estimator-table td:nth-child(3),
#calculateSalesTax .sales-estimator-table td:nth-child(4),
#calculateSalesTax .sales-estimator-table th:nth-child(2),
#calculateSalesTax .sales-estimator-table th:nth-child(3),
#calculateSalesTax .sales-estimator-table th:nth-child(4) {
    width: 95px;
}

#calculateSalesTax .sales-estimator-controls {
    margin-top: 15px;
    display: flex;
    width: var(--sales-tax-panel-width);
    max-width: var(--sales-tax-panel-width);
    gap: 10px;
    padding-right: 0;
    justify-content: flex-end !important;
}

#calculateSalesTax .sales-action-buttons button,
#calculateSalesTax #saved-sales-list-actions button,
#calculateSalesTax .sales-estimator-controls button {
    background-color: darkgreen;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 1px 3px;
    cursor: pointer;
}

#calculateSalesTax .sales-action-buttons button:hover,
#calculateSalesTax #saved-sales-list-actions button:hover,
#calculateSalesTax .sales-estimator-controls button:hover {
    background-color: #0d008a;
}

.export-modal, .import-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* dim background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.importFilenamePattern{
    color: #0d008a;
    font-weight: normal;
    font-size: .8rem;
}
.export-modal-content, .import-modal-content {
    background: var(--bg-modal);
    padding: 24px 32px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    max-width: 90vw;
    width: 520px;
    box-sizing: border-box;
    text-align: left;
}
.import-modal-content {
    margin: 35px auto;
    height: 340px !important;
    width: 420px !important;
}

#importDropArea {
    display: flex;
    flex-direction: column; /* stack items vertically */
    justify-content: center; /* center vertically */
    align-items: center;     /* center horizontally */
    text-align: center;      /* center inline text elements like <p>, <h3> */
    padding: 20px;           /* optional, for spacing */
}

.export-modal-content h3, .import-modal-content h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 1.2em;
    color: #0d008a;
    text-align: center;
}

.export-modal-content label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
}

.export-modal-content input[type="text"] {
    width: 100%;
    padding: 6px 10px;
    text-align: left;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 16px;
}

.export-modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.export-modal-buttons button,  #browseFileBtn, #cancelImportBtn {
    padding: 6px 14px;
    font-size: 0.95em;
    border: 1px solid black;
    border-radius: 6px;
    cursor: pointer;
    background-color: darkgreen;
    color: white;
}
.export-modal-buttons button:hover {
    background-color: #0d008a;
}

.export-modal-buttons button:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

.import-drop-area {
    border: 2px dashed #999;
    padding: 30px;
    margin: 10px 0;
    border-radius: 8px;
    cursor: pointer;
}
.import-drop-area.highlight {
    border-color: #0d008a;
}
/* Applies to all focusable form elements */
input:focus,
select:focus,
textarea:focus {
    border: 2px solid #f0c000; /* #f0c000 Yellow border when focused   (logo blue = #0d008a)  */
    box-shadow: 0 0 4px 2px #f0c000;
    outline: none; /* Optional: remove the default outline */
    font-weight: bold;
    background-color: var(--bg-focus); /* optional: soft yellow tint */
}

/*================*/

a[data-action],
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"],
select,
[role="button"],
[role="menuitem"],
[role="tab"],
[aria-haspopup],
[aria-expanded],
[data-action] {
    cursor: pointer;
}

.background-darker-gray{ background-color: var(--bg-darker-gray); }

.has-tooltip:hover { box-shadow: 0 0 0 6px rgba(0, 128, 255, 0.2); }
.has-tooltip {
    position: relative;
}
#topic-filter-trigger.has-tooltip:hover,
#top-topic-filter-trigger.has-tooltip:hover {
    box-shadow: none;
}
.tooltip-js .has-tooltip[data-tooltip]::after {
    content: none;
}
.has-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    font-size: var(--tooltip-font-size);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-radius);
    opacity: 0;
    transform: translate(-50%, var(--tooltip-rise));
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    max-width: 260px;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    z-index: 2;
}
.has-tooltip[data-tooltip]:hover::after,
.has-tooltip[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}
.global-tooltip {
    position: fixed;
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    font-size: var(--tooltip-font-size);
    padding: var(--tooltip-padding);
    border-radius: var(--tooltip-radius);
    max-width: 260px;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
    opacity: 0;
    transform: translateY(var(--tooltip-rise));
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 9999;
    display: none;
}
.global-tooltip[data-position="bottom"] {
    transform: translateY(calc(-1 * var(--tooltip-rise)));
}
.global-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sd-finder-link {
    margin-left: 0;
    white-space: nowrap;
}

.SD-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.scenario-row.active-sd label {
    margin-right: 8px;
    white-space: nowrap;
}

.opt_SD_name {
    width: 20ch;
    max-width: 100%;
    text-align: left;
}

.opt_SD_rate {
    width: 9ch;
    max-width: 100%;
}

.sd-action-buttons > * {
    margin-right: 8px;
}

.hide_S_J tr > :is(td, th):nth-child(4),
.hide_S_J tr > :is(td, th):nth-child(5) { display: none; }

.hide_sales_sj tr > :is(td, th):nth-child(3),
.hide_sales_sj tr > :is(td, th):nth-child(4) { display: none; }

.mfj-inline-option.is-disabled {
    color: #7a7a7a;
    opacity: 0.65;
}

.mfj-inline-option input[type="checkbox"]:disabled {
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.9);
    border-color: #8d8d8d;
}

.disabled-table-row {
    opacity: 0.5;
    pointer-events: none; /* disables clicks */
}

/*To resolve an issue where the text followed by an icon appears lower than it should (not vertically centered)*/
/* Keep the table cell’s default table-cell behavior */
.shift-right {
    padding-left: 280px;
    vertical-align: middle;
}
/* This is the key: make the inline box itself center within the td */
.shift-right .label-wrap {
    display: inline-flex;      /* inline so it can be vertically aligned inside td */
    vertical-align: middle;    /* centers the wrapper within the td */
    align-items: center;       /* centers text and icon within the wrapper */
    gap: 0.3rem;
    line-height: 1;            /* neutral line box so the icon can't drag it down */
}
/* Size icon to the text and avoid baseline drag */
.shift-right .icon {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    vertical-align: middle;    /* belt-and-suspenders */
}

/*@media screen and (max-width: 1020px) {*/
/*    #snippet-panel {*/

/*    }*/

/*    body { !* for right panel *!*/
/*        grid-template-columns: 0 1fr;  !* left gone, center full *!*/
/*        grid-template-areas:*/
/*          "top-bar top-bar"*/
/*          "snippet-panel snippet-panel";*/
/*    }*/

/*    #left-panel { display: none; }*/

/*    #right-panel { display: none; }*/
/*    #top-bar-right { display: none; }  !* hide the extension on narrow screens *!*/

/*    #top-bar {*/
/*        display: grid;*/
/*        grid-template-columns: auto auto auto auto 1fr 106px 112px 102px 12px;*/
/*        align-items: center;*/
/*        gap: 6px;*/
/*    }*/

/*    #top-logo {*/
/*        visibility: visible;*/
/*        #top-bar #top-logo,*/
/*        #top-bar #top-year-select,*/
/*        #top-bar #nav-dropdown,*/
/*        #top-bar #menu-dropdown {*/
/*            display: block;*/
/*        }*/
/*    }*/
/*}*/
@media screen and (max-width: 1280px) {
    /* Collapse to two columns: keep left panel, hide right panel */
    body {
        grid-template-columns: 174px var(--snippet-width);
        grid-template-areas:
          "left-panel top-bar"
          "left-panel snippet-panel";
    }

    #right-panel { display: none; }
    #top-bar-right { display: none; }

}

@media screen and (max-width: 1280px) and (min-width: 1201px) {
    /* Non-MFJ/MFS above ~1200px: keep both side panels visible. */
    body.filing-single-layout {
        grid-template-columns: 174px var(--snippet-width) 1fr;
        grid-template-areas:
          "left-panel top-bar top-bar-right"
          "left-panel snippet-panel right-panel";
    }
    body.filing-single-layout #left-panel { display: flex; }
    body.filing-single-layout #right-panel { display: block; }
    body.filing-single-layout #top-bar-right { display: flex; }
}

@media screen and (max-width: 1200px) and (min-width: 1001px) {
    /* Non-MFJ/MFS phase 1: hide right panel, keep left panel. */
    body.filing-single-layout {
        grid-template-columns: 174px 1fr;
        grid-template-areas:
          "left-panel top-bar"
          "left-panel snippet-panel";
    }
    body.filing-single-layout #left-panel { display: flex; }
    body.filing-single-layout #right-panel { display: none; }
    body.filing-single-layout #top-bar-right { display: none; }
}

@media screen and (max-width: 1020px) {
    /* Collapse to two columns: center content full-width, no side panels */
    :root {
        --snippet-width: 100%;
    }
    body {
        grid-template-columns: 0 1fr;
        grid-template-areas:
          "top-bar top-bar"
          "snippet-panel snippet-panel";
    }

    #left-panel { display: none; }
    #right-panel { display: none; }
    #top-bar-right { display: none; }
    #top-bar {
        display: grid;
        grid-template-columns: 60px 60px 44px 52px 130px 96px 1fr 106px 112px 102px 12px;
        align-items: center;
        gap: 6px;
        width: 100%;
        max-width: 845px;
        margin: 0 auto;
    }

    #snippet-panel {
    /*#SDScenarios-container {*/
        width: 100%;
        max-width: 852px;
        margin: 0 auto;
    }

    /* Show compact logo + controls in narrow view */
    /*#top-logo { visibility: visible; }*/

    /* These were nested incorrectly before */
    #top-bar #top-logo,
    #top-bar #top-year-select,
    #top-bar #top-reveal-select,
    #top-bar #top-state-select,
    #top-bar #nav-dropdown,
    #top-bar #menu-dropdown {
        display: block;
    }

    #top-bar #top-logo,
    #top-bar #top-year-select,
    #top-bar #top-reveal-select,
    #top-bar #top-state-select,
    #top-bar #nav-dropdown,
    #top-bar #menu-dropdown,
    #top-bar-columns {
        align-self: center;
    }

    /* Vertical alignment fixes in narrow view */
    #top-bar #top-logo {
        position: relative;
        top: -5px;
    }
    #top-bar-columns {
        position: static;
        top: auto;
    }
    #top-bar #top-year-select,
    #top-bar #top-reveal-select,
    #top-bar #top-state-select,
    #top-bar #nav-dropdown,
    #top-bar #menu-dropdown {
        position: relative;
        top: -17px;
    }

    /* Lift Taxpayer/Spouse/MFJ group without affecting other items */
    #top-bar-columns-wrap {
        position: relative;
        top: -5px;
        margin-left: 4px;
    }

    /* Lift Taxpayer/Spouse/MFJ group only in narrow view */

    /* If your selects are hidden by default, flip them on here */
    #top-year-select select,
    #top-reveal-select select,
    #top-state-select select,
    #nav-dropdown select,
    #menu-dropdown select {
        visibility: visible;
    }

    #top-reveal-select button {
        visibility: visible;
    }

    /* Fixed widths for top bar menus in narrow view */
    #top-year-select select {
        max-width: 60px;
        width: 60px;
    }
    #top-reveal-select select,
    #top-reveal-select button {
        max-width: 52px;
        width: 52px;
    }
    #top-state-select select {
        max-width: 44px;
        width: 44px;
        text-transform: uppercase;
    }
    #nav-dropdown select {
        max-width: 130px;
        width: 130px;
    }
    #menu-dropdown select {
        max-width: 96px;
        width: 96px;
    }

    /* Reduce space between controls and Taxpayer by 6px in narrow view */
    #top-bar .spacer {
        margin-right: -3px;
    }

    /* Reduce gaps between top-year, nav, and menu by 10px */
    #top-bar #top-year-select,
    #top-bar #top-reveal-select,
    #top-bar #top-state-select,
    #top-bar #nav-dropdown,
    #top-bar #menu-dropdown {
        margin-right: -10px;
    }

    /* Nudge Taxpayer column group left by 5px in narrow view */
    #top-bar-columns {
        margin-left: -5px;
    }
    #top-bar #menu-dropdown {
        margin-right: 0;
    }

    body.filing-single-layout #top-bar-columns-wrap {
        transform: translateX(-14px);
    }

}

@media screen and (max-width: 1000px) {
    /* Non-MFJ/MFS phase 2 (<1000): hide left panel too. */
    body.filing-single-layout {
        min-width: 0;
        grid-template-columns: 1fr;
        grid-template-areas:
          "top-bar"
          "snippet-panel";
    }
    body.filing-single-layout #top-bar {
        width: min(100%, var(--snippet-width));
        max-width: var(--snippet-width);
        margin: 0 auto;
    }
    body.filing-single-layout #snippet-panel {
        width: min(100%, var(--snippet-width));
        max-width: var(--snippet-width);
        margin: 0 auto;
    }
    body.filing-single-layout #left-panel { display: none; }
    body.filing-single-layout #right-panel { display: none; }
    body.filing-single-layout #top-bar-right { display: none; }
}

.topic-filter-modal__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 8px 0 14px;
    max-height: calc(72vh + 50px);
    overflow-y: auto;
    padding-right: 6px;
}

.topic-filter-modal__column {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 1px;
}

.topic-filter-modal__option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.topic-filter-modal__child-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.topic-filter-modal__aux-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 2px;
    font-size: 0.88rem;
    font-weight: 600;
}

.topic-filter-modal__option--parent {
    font-weight: 700;
}

.topic-filter-modal__option--spacer-before {
    margin-top: 1em;
}

.topic-filter-modal__option[data-topic-filter-depth="1"] {
    padding-left: 16px;
}

.topic-filter-modal__option[data-topic-filter-depth="2"] {
    padding-left: 32px;
}

.topic-filter-modal__option[data-topic-filter-depth="3"] {
    padding-left: 48px;
}

.topic-filter-modal__actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.topic-filter-modal__actions-right {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.topic-filter-modal__menu {
    background: darkgreen;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 2px 8px;
    min-width: 170px;
    height: 27px;
    appearance: none;
}

.topic-filter-modal__menu:hover,
.topic-filter-modal__menu:focus {
    color: white;
    background: darkgreen;
    border: 1px solid black;
    box-shadow: none;
}

.topic-filter-modal__menu:focus,
.topic-filter-modal__menu:focus-visible {
    outline: 2px solid #0d008a;
    outline-offset: 1px;
}

.topic-filter-modal__menu:active {
    color: white;
    background: darkgreen;
}

.topic-filter-modal__menu option {
    color: #111;
    background: #fff;
}

.topic-filter-preset-actions-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.topic-filter-preset-actions-overlay[hidden] {
    display: none !important;
}

.topic-filter-preset-actions-dialog {
    position: relative;
    background: var(--bg-page);
    border: 2px solid #333;
    border-radius: 8px;
    padding: 12px;
    width: min(420px, 94vw);
    text-align: left;
}

.topic-filter-preset-actions__x {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
}

.topic-filter-preset-actions__title {
    font-size: 1rem;
    margin-bottom: 8px;
    padding-right: 24px;
}

.topic-filter-preset-actions__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.topic-filter-preset-actions__row input {
    border: 1px solid #666;
    border-radius: 6px;
    padding: 5px 6px;
    text-align: left;
}

.topic-filter-preset-actions__selected {
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 0.88rem;
}

.topic-filter-preset-actions__buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.topic-filter-preset-actions__buttons-left,
.topic-filter-preset-actions__buttons-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.topic-filter-modal__btn {
    background: darkgreen;
    color: white;
    font-weight: bold;
    border: 1px solid black;
    border-radius: 6px;
    padding: 2px 8px;
}

.topic-filter-modal__btn:hover,
.topic-filter-modal__btn:focus {
    background-color: #0d008a;
}

@media screen and (max-width: 760px) {
    .topic-filter-modal__list {
        grid-template-columns: 1fr;
    }

    .topic-filter-modal__actions-right {
        width: 100%;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 1250px) {
    body { overflow-x: auto; }
}

.right-panel-inner {
    min-width: 260px;
}
.right-panel-summary {
    background: #f3f1d2;
    border: 1px solid #2f4f4f;
    padding: 10px 12px 10px 6px;
    color: #2f4f4f;
    font-size: 0.95em;
    margin-bottom: 10px;
}
.right-panel-summary__title {
    font-weight: bold;
    margin-bottom: 6px;
}
.right-panel-summary__row {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 4px;
    margin-bottom: 6px;
    align-items: baseline;
}
.right-panel-summary__label {
    font-weight: 400;
    text-align: left;
}
.right-panel-summary__values {
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
    font-size: 0.92em;
    line-height: 1.35;
}
.right-panel-summary__pair {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
}
.right-panel-summary__person {
    font-weight: 400;
}
.right-panel-summary__value {
    color: #000;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    text-align: right;
    width: 5.75ch; /* reduce leading pad while keeping alignment */
}

.right-panel-empty {
    background: #f9f7ea;
    border: 1px dashed #9aa68a;
    padding: 10px 12px;
    color: #2f4f4f;
    font-size: 0.95em;
}
.right-panel-empty__title {
    font-weight: bold;
    margin-bottom: 6px;
}
.right-panel-empty__body {
    margin-bottom: 8px;
    line-height: 1.35;
}
.right-panel-empty__hint {
    font-size: 0.9em;
    color: #465a53;
    line-height: 1.35;
}

.right-panel-help {
    position: relative;
    display: none;
    background: #fffef2;
    border: 2px solid #2f4f4f;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    padding: 10px 12px;
    z-index: 2;
    margin-bottom: 10px;
}

.right-panel-help.is-open {
    display: block;
}

.right-panel-help__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.right-panel-help__title {
    font-weight: bold;
    color: #2f4f4f;
}

.right-panel-help__jump {
    margin-left: auto;
    border: 1px solid #2f4f4f;
    background: #f9f7ea;
    color: #2f4f4f;
    font-size: 0.75em;
    padding: 2px 6px;
    border-radius: 4px;
}

.right-panel-help__jump:hover,
.right-panel-help__jump:focus-visible {
    background: #fff4c9;
}

.right-panel-help__pin {
    display: none;
    width: 28px;
    height: 28px;
    border: 1px solid #2f4f4f;
    background: #f3f1d2;
    border-radius: 4px;
    padding: 2px;
    cursor: pointer;
}

.right-panel-help.is-open .right-panel-help__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.right-panel-help.is-pinned .right-panel-help__pin {
    background: #d7ecd6;
}

.right-panel-help__pin img {
    width: 18px;
    height: 18px;
    display: block;
}

.right-panel-help__body {
    font-size: .85em;
    font-weight: normal;
    margin: 8px;
}

.right-panel-help__body p {
    margin: .45em 0;
}

.right-panel-help__body li + li {
    margin-top: .45em;
}

.right-panel-help__body .guide-sublist {
    list-style: disc outside;
    margin: .35em 0 .45em 1.2em;
    padding-left: .8em;
}

.hidden-data-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 10030;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.hidden-data-dialog {
    width: min(780px, 94vw);
    max-height: 80vh;
    overflow: auto;
    background: #fff;
    border: 2px solid #2f2f2f;
    border-radius: 10px;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
    padding: 14px 16px;
}

.hidden-data-dialog h3 {
    margin: 0 0 8px 0;
    font-size: 1rem;
}

.hidden-data-dialog p {
    margin: 0 0 8px 0;
    font-size: 0.92rem;
}

.hidden-data-dialog__list {
    margin: 0 0 10px 0;
    padding: 0 0 0 18px;
    max-height: 38vh;
    overflow: auto;
    font-size: 0.88rem;
}

.hidden-data-dialog__list li + li {
    margin-top: 4px;
}

.hidden-data-dialog__note {
    color: #444;
    font-style: italic;
}

.hidden-data-dialog__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.hidden-data-dialog__actions button,
.hidden-data-reminder__btn,
.hidden-data-reminder__toggle {
    background: darkgreen;
    color: #fff;
    border: 1px solid #1f1f1f;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
}

.hidden-data-dialog__actions button {
    padding: 5px 10px;
}

.hidden-data-reminder {
    font-size: 0.82rem;
}

.hidden-data-reminder--wide {
    position: absolute;
    top: 2px;
    left: 4px;
    right: auto;
    z-index: 140;
    background: #fff6d8;
    border: 1px solid #5d4d1b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    max-width: min(430px, calc(100% - 330px));
    text-align: left;
}

.hidden-data-reminder__text {
    color: #352c11;
    line-height: 1.2;
}

.hidden-data-reminder__btn {
    padding: 3px 8px;
    white-space: nowrap;
}

.hidden-data-reminder--narrow {
    position: fixed;
    right: 8px;
    top: 38px;
    z-index: 140;
    width: min(92vw, 360px);
    background: #fff6d8;
    border: 1px solid #5d4d1b;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.hidden-data-reminder__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 8px;
    background: #f7e4a6;
    color: #3a300f;
}

.hidden-data-reminder__toggle {
    padding: 2px 8px;
}

.hidden-data-reminder__body {
    padding: 8px;
    color: #3a300f;
}

.hidden-data-reminder__body p {
    margin: 0 0 8px 0;
    line-height: 1.25;
}

.hidden-data-reminder--narrow.is-collapsed .hidden-data-reminder__body {
    display: none;
}