/* =========================================================================
   Tax Estimate — the third tab on the TIS page.

   Borrows the forecast's blocks, cards and table so the two tabs read as
   one tool rather than two. Only what is genuinely new to this panel lives
   here: the input toggles, the comparison table's verdict columns, and the
   caveat list.

   Flexbox and relative units throughout, so the panel reflows on a laptop
   the same way the rest of the page does.
   ========================================================================= */

/* =========================================================================
   Carried over from a Tax Summary run — shown on both the forecast and the
   estimate tab, identically, because it is the same claim.
   ========================================================================= */

.tis-carried {
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
    border-radius: 8px;
    border-left: 3px solid rgb(206, 186, 76);
    background: rgba(13, 40, 73, 0.6);
}
.tis-carried-title {
    color: rgb(206, 186, 76);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.tis-carried-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
}
.tis-carried-figure {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.tis-carried-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9fb0c4;
}
.tis-carried-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: #e8e8e8;
    font-variant-numeric: tabular-nums;
}
.tis-carried-figure.is-net .tis-carried-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: rgb(206, 186, 76);
}
.tis-carried-value.loss { color: #ff8080; }
.tis-carried-note {
    margin-top: 0.75rem;
    color: #9fb0c4;
    font-size: 0.78rem;
    line-height: 1.5;
}

/* A dot on a tab that has something new behind it. Positioned rather than
   appended so it never reflows the label. */
.tis-tab { position: relative; }
.tis-tab.has-new::after {
    content: "";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: rgb(206, 186, 76);
}

/* =========================================================================
   The workbook upload
   ========================================================================= */

.estimate-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: rgba(206, 186, 76, 0.08);
    border: 1px solid rgba(206, 186, 76, 0.3);
    border-radius: 6px;
    font-size: 0.85rem;
    color: #e8e8e8;
}
.estimate-file .file-name { flex: 1 1 auto; }
.estimate-file .remove-btn {
    background: none;
    border: none;
    color: #9fb0c4;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.estimate-file .remove-btn:hover { color: #e06c6c; }

/* =========================================================================
   Quarters — the buttons borrow the sales tax period picker so the two
   pages behave the same way. Only the detail panel below them is new.
   ========================================================================= */

.estimate-quarter-detail {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 1.25rem;
    padding: 1.1rem 1.25rem;
    border-radius: 8px;
    border-left: 3px solid rgb(206, 186, 76);
    background: rgba(13, 40, 73, 0.6);
}
.estimate-quarter-detail:empty { display: none; }
.estimate-quarter-amount {
    font-size: 1.9rem;
    font-weight: 700;
    color: rgb(206, 186, 76);
    font-variant-numeric: tabular-nums;
}
.estimate-quarter-due {
    font-size: 0.95rem;
    color: #e8e8e8;
}
.estimate-quarter-covers {
    font-size: 0.82rem;
    color: #9fb0c4;
}

/* A deadline that has passed and one that is close read differently at a
   glance, on the button and on the panel both. */
.estimate-quarter-detail.is-soon { border-left-color: #f0b429; }
.estimate-quarter-detail.is-soon .estimate-quarter-due { color: #f0b429; }
.estimate-quarter-detail.is-past { border-left-color: #ff8080; }
.estimate-quarter-detail.is-past .estimate-quarter-due { color: #ff8080; }

#estimateQuarters .period-btn.is-past { opacity: 0.6; }
#estimateQuarters .period-btn.is-soon:not(.selected) {
    border-color: rgba(240, 180, 41, 0.7);
}

/* =========================================================================
   Focus mode — the setup folds away and the card goes wide for the tables.

   The width itself is body.tis-focus, defined once in forecast.css and
   shared. Only the fold belongs here, because only this panel knows which
   form is its own.
   ========================================================================= */

/* max-height rather than height: flexbox cannot interpolate an auto height,
   so the fold is animated on a bound the content never reaches. */
#estimateForm {
    overflow: hidden;
    max-height: 200rem;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.2s ease;
}

body.estimate-focus #estimateForm {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* A line of prose should not stretch to 95vw even when the card does. */
body.estimate-focus #panelEstimate > .section-header,
body.estimate-focus #estimateCarried {
    max-width: 50rem;
}

.estimate-results { margin-top: 1.5rem; }

.estimate-field-hint {
    margin-top: 0.35rem;
    color: #9fb0c4;
    font-size: 0.76rem;
    line-height: 1.45;
}

.estimate-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 0.6rem;
}

.estimate-check {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    color: #e8e8e8;
    cursor: pointer;
}
.estimate-check input {
    width: 1rem;
    height: 1rem;
    accent-color: rgb(206, 186, 76);
    cursor: pointer;
}
.estimate-check input:focus-visible {
    outline: 2px solid rgb(206, 186, 76);
    outline-offset: 2px;
}

/* The headline's second paragraph — the entity gap. Set apart from the
   total above it, because it is a different kind of claim: the first is
   arithmetic, this one is advice with conditions on it. */
.estimate-gap {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(206, 186, 76, 0.2);
    font-size: 0.92rem;
    color: #cfd8e3;
}
.estimate-gap strong { color: rgb(206, 186, 76); }

/* Figures line up on the decimal, so a column can be scanned rather than
   read. Tabular numerals keep the digits from shifting between rows. */
.forecast-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.estimate-why {
    color: #9fb0c4;
    font-size: 0.78rem;
    line-height: 1.45;
}

/* A deduction is not a tax. It reads as a credit line so nobody adds it
   into the column above by eye. */
.estimate-credit td { color: #7fd18a; }

.estimate-current {
    background: rgba(206, 186, 76, 0.1);
}
.estimate-current td:first-child { font-weight: 700; }

.estimate-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgb(206, 186, 76);
    color: #0D2849;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.estimate-better { color: #7fd18a; }
.estimate-worse { color: #ff8080; }

.estimate-caveats {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding-left: 1.1rem;
}
.estimate-caveats li {
    color: #cfd8e3;
    font-size: 0.84rem;
    line-height: 1.55;
}
.estimate-caveats li::marker { color: rgb(206, 186, 76); }

body.theme-gold .estimate-field-hint,
body.theme-gold .estimate-why {
    color: rgba(206, 186, 76, 0.75);
}
body.theme-gold .estimate-check,
body.theme-gold .estimate-gap,
body.theme-gold .estimate-caveats li {
    color: rgba(206, 186, 76, 0.9);
}
body.theme-gold .estimate-current {
    background: rgba(206, 186, 76, 0.18);
}

@media (max-width: 700px) {
    .estimate-toggles {
        flex-direction: column;
        gap: 0.8rem;
    }
    .estimate-quarter-amount { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    #estimateForm { transition: none; }
}