/* ==========================================================================
   Fed_TIS on screen — the tax lines behind the three totals.

   Used in two places on this page: under the Tax Summary result, and under
   the Tax Estimate as the profit it was built on. One stylesheet because it
   is one table making the same claim in both.

   The layout goal is a return, not a spreadsheet: the line number narrow and
   left, the description taking whatever is left, and the amounts in one
   right-aligned column with the decimal points under each other, so the
   totals can be checked by eye down the column.
   ========================================================================== */

/* The block is the bar plus the frame. The bar sits outside the scrolling
   frame so it stays put while the columns scroll under it. */
.summary-table-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.25rem 0;
}

.summary-table-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.summary-table-caption {
    flex: 1 1 12rem;
    font-size: 0.82rem;
    color: rgba(242, 242, 242, 0.6);
}

.summary-table-wrap {
    overflow-x: auto;
    margin: 1.25rem 0;
    border: 1px solid rgba(206, 186, 76, 0.18);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
}

/* Inside a block the gap does the spacing. */
.summary-table-block .summary-table-wrap { margin: 0; }

.summary-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: #e8e8e8;
}

/* Up to nine columns of money. Below this it scrolls sideways inside its own
   frame rather than squeezing the figures into two lines each. */
.summary-table--months { min-width: 46rem; }

.summary-table th,
.summary-table td {
    padding: 0.45rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    vertical-align: top;
}

.summary-table thead th {
    position: sticky;
    top: 0;
    background: rgba(13, 40, 73, 0.97);
    color: rgb(206, 186, 76);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(206, 186, 76, 0.35);
    white-space: nowrap;
}

/* Column roles. Width lives on the header; the cells inherit the column.
   Only the tax-line layout pins them: it has one money column and wants the
   description to take everything left over. The month layout has up to eight
   and has to let them share what there is. */
.summary-table--lines th.summary-table-line { width: 6.5em; }
.summary-table--lines th.summary-table-count { width: 4.5em; }
.summary-table--lines th.summary-table-amount { width: 9.5em; }
.summary-table--months th.summary-table-label { width: 12em; }

.summary-table .summary-table-line {
    color: #9fb0c4;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.summary-table .summary-table-label { text-align: left; }
.summary-table .summary-table-count {
    text-align: right;
    color: #8ba7c9;
    font-variant-numeric: tabular-nums;
}
.summary-table .summary-table-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.summary-table .loss { color: #ff8080; }

/* Section headers — INCOME, DEDUCTIONS, and the excluded tail. */
.summary-table-section th {
    padding-top: 1rem;
    color: rgb(206, 186, 76);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid rgba(206, 186, 76, 0.25);
}
.summary-table tbody tr:first-child th { padding-top: 0.55rem; }

/* Returns, NSFs and cost rows sit under the line they reduce, indented so
   the eye reads them as belonging to it rather than as another line. */
.summary-table-offset .summary-table-label {
    padding-left: 1.9rem;
    color: #b6c2d0;
    font-style: italic;
}

.summary-table-total td {
    font-weight: 700;
    border-top: 1px solid rgba(206, 186, 76, 0.3);
    border-bottom: none;
}
.summary-table-total.is-net td {
    color: rgb(206, 186, 76);
    font-size: 0.95rem;
    border-top: 2px solid rgba(206, 186, 76, 0.55);
    border-bottom: 2px solid rgba(206, 186, 76, 0.55);
}

/* ===== Opening a line ===================================================== */

.summary-table .is-expandable {
    cursor: pointer;
}
.summary-table .is-expandable:hover td,
.summary-table .is-expandable:focus-visible td {
    background: rgba(206, 186, 76, 0.09);
}
.summary-table .is-expandable:focus-visible {
    outline: 2px solid rgb(206, 186, 76);
    outline-offset: -2px;
}
.summary-table .is-expandable.is-open td {
    background: rgba(206, 186, 76, 0.06);
}

/* Drawn rather than a glyph, so it turns rather than swaps character. */
.summary-table-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.45rem;
    border-top: 0.3em solid transparent;
    border-bottom: 0.3em solid transparent;
    border-left: 0.42em solid rgb(206, 186, 76);
    vertical-align: 0.05em;
    transition: transform 0.15s ease;
}
.is-open > .summary-table-label > .summary-table-caret,
.is-open .summary-table-caret {
    transform: rotate(90deg);
}

.summary-table-detail > td {
    padding: 0;
    background: rgba(0, 0, 0, 0.22);
    border-bottom: 1px solid rgba(206, 186, 76, 0.2);
}

.summary-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.79rem;
    color: #d6dde5;
}
.summary-detail-table th,
.summary-detail-table td {
    padding: 0.3rem 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.summary-detail-table thead th {
    color: #8ba7c9;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.summary-detail-table tbody tr:last-child td { border-bottom: none; }

/* Indented under the line it belongs to, so a long list still reads as
   part of that line rather than as a table of its own. */
.summary-detail-date {
    width: 7em;
    padding-left: 2.6rem !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.summary-detail-payee { width: auto; }
.summary-detail-category {
    width: 14em;
    color: #9fb0c4;
}
.summary-detail-table .summary-detail-amount {
    width: 9em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.summary-detail-table .loss { color: #ff8080; }

.summary-detail-note {
    margin: 0;
    padding: 0.5rem 0.8rem 0.5rem 2.6rem;
    color: #ffb057;
    font-size: 0.76rem;
}

/* "net of $X refunded" under a deduction whose amount is already net. */
.summary-table-note {
    display: block;
    margin-top: 0.15rem;
    color: #8ba7c9;
    font-size: 0.74rem;
}

.summary-table-warning {
    margin: 0;
    padding: 0.7rem 0.9rem;
    border-top: 1px solid rgba(255, 176, 87, 0.35);
    background: rgba(255, 176, 87, 0.1);
    color: #ffb057;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* On the gold theme the page behind this is a bright animated gradient, and
   the first version painted gold text on a near-transparent card over it -
   a column of figures that could not be read at all.

   So the table keeps its dark self and sits on an opaque navy card, the way
   the buttons beside it do. Restyling a dense grid of numbers to gold-on-
   gold cannot be made to work; taking it off the gradient can. */
body.theme-gold .summary-table-wrap {
    background: #0D2849;
    border-color: rgba(13, 40, 73, 0.5);
    box-shadow: 0 2px 10px rgba(120, 95, 10, 0.35);
}
body.theme-gold .summary-table { color: #f2f2f2; }
body.theme-gold .summary-table thead th {
    background: #0D2849;
    color: rgb(206, 186, 76);
    border-bottom-color: rgba(206, 186, 76, 0.5);
}
body.theme-gold .summary-table .summary-table-line,
body.theme-gold .summary-table .summary-table-count,
body.theme-gold .summary-table-note { color: #a8bdd4; }
body.theme-gold .summary-table-section th { color: rgb(206, 186, 76); }
body.theme-gold .summary-table-total.is-net td { color: rgb(206, 186, 76); }
body.theme-gold .summary-table-detail > td { background: rgba(0, 0, 0, 0.28); }
body.theme-gold .summary-detail-table { color: #d6dde5; }

/* The caption is outside the navy card, so it reads against the gold. At
   0.75 alpha it came to 4.39:1 on the mid tone of the gradient — under the
   4.5 floor, on the one theme this whole block exists to fix. */
body.theme-gold .summary-table-caption { color: rgba(13, 40, 73, 0.9); }

@media (max-width: 700px) {
    /* The transaction count is the first thing that can go: it is context,
       not a figure anyone reconciles against. */
    .summary-table .summary-table-count { display: none; }
    .summary-table th,
    .summary-table td { padding: 0.4rem 0.55rem; }
    .summary-table { min-width: 24rem; }
}