/* State Estate Tax calculator (Pages/StateEstateTax). The planner layout uses the Comprehensive three-panel classes in
   stylesv53.css and the card, tile and callout classes of RothConversion.css; the classic layout mirrors the other
   calculators' form and summary table. Tax colors: home state blue, other states amber, federal red. */

.state-estate-tax-page {
    --set-ink: #181c32;
    --set-muted: #5c6d82;
    --set-line: #e4e8f0;
    --set-state: #2a78d6;
    --set-other: #eda100;
    --set-federal: #b42318;
    --set-good: #11753a;
}

.main-layout-comprehensive > .comprehensive-sidebar-host--scenarios.set-options-host {
    --scenarios-page-max-width: 300px;
}

.workspaceView .workspace-tab-pane-scroll.set-pane {
    align-items: stretch;
    position: relative;
    padding: 0;
}

.set-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #181c32;
    margin: 1rem 0 0.5rem;
}

/* ---------------------------------------------------------------- Inputs */

/* The inputs scroll inside their panel. The Comprehensive planner's rule for this is tied to its own #assumptions id,
   so without this the panel was cut off at the bottom of the window with no way to reach the lower sections. */
.assumptionsPage .assumptions.set-inputs {
    flex: 1 1 0%;
    min-height: 0;
    overflow: auto;
    width: 100%;
    position: relative;
    z-index: 2;
    background-color: #f4f6fa;
    padding: 0.4rem 0.25rem 1rem;
    border-radius: 0 0 12px 12px;
    box-sizing: border-box;
}

.set-inputs .set-total-row td {
    font-weight: 600;
    background: #f7f9fc;
}

.set-inputs .set-property-head th,
.set-classic-form .set-property-head th {
    background: #eef4fb;
    font-weight: 600;
}

.set-icon-btn {
    border: none;
    background: transparent;
    color: #5c6d82;
    padding: 0 0.25rem;
    line-height: 1;
}

.set-icon-btn:hover {
    color: #b42318;
}

/* ---------------------------------------------------------------- What each step saves (horizontal bars) */

.set-ladder {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.set-ladder-row {
    display: grid;
    grid-template-columns: minmax(150px, 210px) 1fr minmax(96px, 120px);
    gap: 0.6rem;
    align-items: center;
    font-size: 0.875rem;
}

.set-ladder-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #3d4a5c;
    font-weight: 600;
    line-height: 1.25;
}

.set-ladder-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 0.35rem;
    border-radius: 50%;
    vertical-align: 1px;
}

.set-ladder-bar {
    display: flex;
    align-items: center;
    min-height: 26px;
    background: #f4f6fa;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.set-bar-seg {
    display: block;
    height: 26px;
    min-width: 2px;
}

.set-ladder-total {
    padding-left: 0.45rem;
    font-weight: 700;
    color: #181c32;
    white-space: nowrap;
}

.set-ladder-saved {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.set-ladder-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: #5c6d82;
}

.set-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.3rem;
    border-radius: 2px;
    vertical-align: -1px;
}

/* ---------------------------------------------------------------- Planning options (right panel) */

.set-options {
    background: #f1f5f9;
    padding-bottom: 1rem;
}

.set-options-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.65rem 0.45rem;
    border-bottom: 1px solid #e4e8f0;
}

.set-options-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #181c32;
}

.set-options-planner {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #3d4a5c;
    cursor: pointer;
}

.set-option-card {
    margin: 6px 6px 0;
    padding: 0.55rem 0.65rem 0.6rem;
    background: #fff;
    border: 1px solid #dde3ec;
    border-left: 4px solid #c9d2df;
    border-radius: 8px;
}

.set-option-card--on {
    border-left-color: #2a78d6;
    background: #fbfdff;
}

.set-option-card--baseline {
    border-left-color: #8a93a3;
    background: #f8f9fb;
}

.set-option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.set-option-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #181c32;
    line-height: 1.25;
}

.set-option-head .form-control.set-option-switch,
.set-option-field--switch .form-control.set-option-switch {
    flex: 0 0 84px;
    width: 84px;
    min-height: 0;
    font-size: 0.72rem;
}

.set-option-head .form-control.set-option-switch span,
.set-option-field--switch .form-control.set-option-switch span {
    padding: 0.12rem 0.3rem;
}

/* A yes/no choice inside a card (Large Gift: give above the exemption, paying gift tax). */
.set-option-field--switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.set-option-field--switch label {
    margin-bottom: 0;
}

.set-option-value {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.15rem;
    color: #181c32;
}

.set-option-sub {
    font-size: 0.72rem;
    color: #6b7a8f;
}

.set-option-text {
    margin: 0.35rem 0 0.3rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #3d4a5c;
}

/* The amount entered could not be given in full (Large Gift): what was given and why. */
.set-option-limit {
    margin: 0.3rem 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #664d03;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    border-radius: 6px;
}

.set-option-field {
    margin-top: 0.4rem;
}

.set-option-field label {
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.72rem;
    color: #5c6d82;
}

.set-option-field .customized-input-number input {
    min-width: 0;
    font-size: 0.8rem;
}

.set-option-label {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: #5c6d82;
}

.set-option-select {
    width: 100%;
    font-size: 0.75rem;
    padding: 0.15rem 0.25rem;
    border: 1px solid #c9d2df;
    border-radius: 6px;
}

.set-option-saving {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #11753a;
}

.set-option-saving--potential {
    color: #1f7a8c;
    font-weight: 600;
}

.set-option-saving--neutral {
    color: #6b7a8f;
    font-weight: 600;
}

.set-option-saving--bad {
    color: #b42318;
}

.set-option-total {
    margin: 8px 6px 0;
    padding: 0.55rem 0.65rem;
    background: #fff;
    border: 1px solid #b7e4c7;
    border-radius: 8px;
}

.set-option-total-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #3d4a5c;
}

.set-option-total-row--saved {
    margin-top: 0.2rem;
    color: #11753a;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------- How the money moves */

.set-segmented {
    display: inline-flex;
    border: 1px solid #c9d2df;
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 auto;
}

.set-segmented button {
    border: none;
    background: #fff;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    color: #3d4a5c;
}

.set-segmented button.active {
    background: #2a78d6;
    color: #fff;
    font-weight: 600;
}

.set-flow-stage {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 0.9rem;
    align-items: start;
}

.set-flow-when {
    padding-top: 0.55rem;
    text-align: right;
}

.set-flow-when-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #181c32;
}

.set-flow-when-sub {
    font-size: 0.75rem;
    color: #6b7a8f;
}

.set-flow-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.set-flow-split {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 220px;
}

.set-flow-split > .set-flow-box {
    flex: 0 0 auto;
}

.set-flow-box {
    flex: 1 1 220px;
    min-width: 200px;
    padding: 0.55rem 0.75rem 0.6rem;
    border: 1px solid #dde3ec;
    border-top: 4px solid #8a93a3;
    border-radius: 8px;
    background: #fff;
}

.set-flow-box--estate { border-top-color: #2a78d6; }
.set-flow-box--outside { border-top-color: #1baf7a; background: #f6fcf8; }
.set-flow-box--trust { border-top-color: #4a3aa7; background: #f7f6fd; }
.set-flow-box--qtip { border-top-color: #eb6834; background: #fef8f5; }
.set-flow-box--spouse { border-top-color: #eb6834; }
.set-flow-box--tax { border-top-color: #b42318; background: #fdf7f6; }
.set-flow-box--family { border-top-color: #1baf7a; background: #f3fbf6; }

.set-flow-box-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #3d4a5c;
}

.set-flow-box-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #181c32;
    margin: 0.1rem 0 0.2rem;
}

.set-flow-box-note {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #5c6d82;
}

.set-flow-list {
    list-style: none;
    padding: 0;
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
}

.set-flow-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.08rem 0;
    border-bottom: 1px dotted #e4e8f0;
}

.set-flow-list li:last-child {
    border-bottom: none;
}

.set-flow-list li span:last-child {
    font-weight: 600;
    white-space: nowrap;
}

.set-flow-arrow {
    display: flex;
    align-items: center;
    color: #8a93a3;
    font-size: 1.2rem;
}

.set-flow-down {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 0.9rem;
    color: #8a93a3;
    font-size: 1.2rem;
    line-height: 1;
    margin: 0.35rem 0;
}

.set-flow-down > i {
    grid-column: 2;
    padding-left: 1.5rem;
}

.set-flow-taxline {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.45rem;
}

.set-tax-chip {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    border: 1px solid;
}

.set-tax-chip--state { color: #1d5fae; border-color: #b9d3f2; background: #f1f7fe; }
.set-tax-chip--other { color: #8a5a00; border-color: #f2d6a0; background: #fff8ea; }
.set-tax-chip--federal { color: #b42318; border-color: #f1c2bd; background: #fdf5f4; }

.set-flow-taxnote {
    font-size: 0.75rem;
    color: #5c6d82;
}

.set-flow-summary {
    flex: 0 1 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.85rem;
}

.set-flow-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

/* ---------------------------------------------------------------- Tables and lists */

.set-table-scroll {
    overflow-x: auto;
}

.set-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin-bottom: 0.6rem;
}

.set-table th,
.set-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #e4e8f0;
    vertical-align: top;
}

.set-table thead th {
    background: #f4f6fa;
    font-weight: 700;
    color: #3d4a5c;
    white-space: nowrap;
}

.set-table tfoot td {
    font-weight: 600;
    border-top: 2px solid #c9d2df;
}

.set-table--compact td,
.set-table--compact th {
    padding: 0.2rem 0.5rem;
}

/* Plan names and row labels wrap so every plan column fits without scrolling sideways. */
.set-table--details thead th {
    white-space: normal;
    vertical-align: bottom;
    line-height: 1.25;
}

.set-table--details td:first-child {
    min-width: 10rem;
    color: #3d4a5c;
}

.set-table--details td:not(:first-child) {
    white-space: nowrap;
}

.set-table-group td {
    padding-top: 0.7rem !important;
    font-weight: 700;
    color: #181c32;
    background: #f7f9fc;
}

.set-table-strong td {
    font-weight: 700;
}

.set-table--nonresident .set-row-main td {
    border-bottom: none;
    padding-bottom: 0.1rem;
}

.set-table--nonresident .set-row-note td {
    padding-top: 0;
    font-size: 0.75rem;
    color: #5c6d82;
}

.set-table-note {
    font-size: 0.72rem;
    color: #6b7a8f;
    margin-top: 0.15rem;
    max-width: 38rem;
}

.set-checklist {
    padding-left: 1.1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #3d4a5c;
}

.set-checklist li {
    margin-bottom: 0.35rem;
}

.set-disclaimer {
    font-size: 0.8rem;
    color: #5c6d82;
}

/* ---------------------------------------------------------------- Layout switch in the page toolbar */

.set-layout-switch {
    display: inline-flex;
    margin-left: 0.5rem;
    border: 1px solid #c9d2df;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.set-layout-switch button {
    border: none;
    background: transparent;
    padding: 0.2rem 0.65rem;
    font-size: 0.85rem;
    color: #3d4a5c;
}

.set-layout-switch button.active {
    background: #2a78d6;
    color: #fff;
}

/* ---------------------------------------------------------------- Classic layout */

.set-classic {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 7.2rem);
    font-size: 16px;
    line-height: 1.5;
}

.set-classic-side {
    flex: 0 0 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 6px 6px 0;
    margin: 10px 5px 10px 10px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 2px 16px #f4fafd;
    border-radius: 20px;
    background: #fff;
}

.set-mode-switch {
    display: flex;
    padding: 5px 7px;
    background-color: #f0f0f0;
    border-radius: 6px;
    margin: 4px;
}

.set-mode-switch input[type="radio"] {
    display: none;
}

.set-mode-switch label {
    display: flex;
    flex: 1;
    justify-content: center;
    cursor: pointer;
    color: #999;
    font-weight: 600;
    border-radius: 6px;
    padding: 2px 8px;
    transform: scale(0.9);
    transition: background-color 0.4s, transform 0.4s;
}

.set-mode-switch input[type="radio"]:checked + label {
    color: #fff;
    transform: scale(1);
    background: linear-gradient(99.02deg, rgb(41, 171, 226) -19.8%, rgb(0, 113, 188) 95.38%);
}

.set-classic-form {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 4px 60px;
    font-size: 14px;
    scrollbar-width: thin;
    scrollbar-color: #449fcf #ecf7fd;
}

.set-classic-section {
    margin: 0.7rem 0 0.2rem;
    padding: 0.3rem 0.5rem;
    background: #f4f4f4;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
}

.set-classic-hint {
    margin: 0.6rem 0.3rem;
    font-size: 0.8rem;
    color: #6b7a8f;
}

.set-classic-results {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 10px 10px 10px 5px;
    border: 1px solid #f4f4f4;
    border-radius: 20px;
    background: #fff;
}

.set-classic-results .tab-content,
.set-classic-results > div {
    min-height: 0;
}

.set-classic-pane {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    position: relative;
}

.set-classic-heading {
    font-size: 20px;
    font-weight: 500;
    margin: 0.3rem 0 0.4rem;
}

.set-summary-table-wrap {
    overflow-x: auto;
    border: 1px solid #e8f3f9;
    border-radius: 20px;
    margin-bottom: 0.8rem;
}

.set-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    text-align: center;
}

.set-summary-table th {
    padding: 0.45rem 0.5rem;
    font-weight: 600;
    background: #dbf4d8;
    border-bottom: 1px solid #fff;
}

.set-summary-table .set-th-inputs {
    background: #b7e6ff;
}

.set-summary-table .set-th-results {
    background: #dbf4d8;
}

.set-summary-table .set-th-highlight,
.set-summary-table .set-td-highlight {
    background: #ffff00;
}

.set-summary-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #eef0f4;
    white-space: nowrap;
}

.set-classic-explained {
    margin: 0.5rem 0 1rem;
    font-size: 0.9rem;
}

.set-classic-explained h4 {
    font-size: 1.15rem;
    margin: 0.6rem 0 0.3rem;
}

.set-classic-explained ul {
    margin-bottom: 0.3rem;
}

.set-classic-results .tab-control-header {
    display: flex;
    flex-wrap: wrap;
    padding: 6px 8px 0;
}

.set-classic-results .tab-control-header .tab-button {
    flex: 0 0 auto;
    padding: 10px 24px;
    margin: 4px 3px;
    font-size: 14px;
}

/* ---------------------------------------------------------------- Zoom (Fit All)

   The shared ZoomToolbar runs across the bottom of the results in both layouts, as in the Comprehensive planner. Each
   results tab keeps its content in a .set-zoom box that the toolbar measures and scales; the box carries the pane's
   padding, and when scaled it is lifted out of the flow (inline style from StateEstateTaxZoom), so the pane scrolls only
   as far as the scaled results reach. */

.set-pane > .set-zoom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    padding: 0 0.6rem 1.25rem;
}

.set-classic-pane > .set-zoom {
    box-sizing: border-box;
    padding: 0.5rem 0.75rem 2rem;
}

.workspaceView .set-workspace > .zoom-control-toolbar {
    position: static;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0.5rem;
    padding-right: 1rem;
    box-sizing: border-box;
    box-shadow: 0 -1px 0 #e4e8f0, 0 -4px 12px rgba(24, 28, 50, 0.04);
}

.set-classic-results > .zoom-control-toolbar {
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    padding: 5px 10px;
    background: #f5f5f5;
}

/* With both side panels open on a small screen the results can be narrower than the toolbar: let it wrap onto a
   second row, centred, rather than push Fit All out of sight. */
.set-workspace,
.set-classic-results {
    container-type: inline-size;
}

.set-workspace > .zoom-control-toolbar,
.set-classic-results > .zoom-control-toolbar {
    flex-wrap: wrap;
    row-gap: 6px;
}

.set-workspace > .zoom-control-toolbar .btn,
.set-classic-results > .zoom-control-toolbar .btn {
    white-space: nowrap;
}

@container (max-width: 560px) {
    .workspaceView .set-workspace > .zoom-control-toolbar,
    .set-classic-results > .zoom-control-toolbar {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}