/* Ready Report: its own page, a Summary sub-view (readyreport, 2026-10-24; was a popup).
   js/app/readyreport/readyReportView.js renders it into #summary-report-wrap. Colours from css/master-colors.css
   only. Text sizes come from the t- classes on the elements (css/styles2.css), so the rules here set layout, weight
   and colour; the family is inherited (css/fonts.css). The cards are this page's own (.rrp-card), never
   .summary-card: accounts-tool.css styles that class globally (a left edge, a white background). */

.rrp {
    container: rrp / inline-size;
}

/* header: the title on the left, the amounts for everything on the page on the right */
.rrp-head {
    align-items: flex-end;
}

.rrp-head-text {
    flex: 1 1 420px;
    max-width: 820px;
}

.rrp-dollars {
    flex: none;
}

/* the plan everything on the page is made from */
.rrp-plan {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 14px 20px;
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
}

.rrp-plan-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--color-brand-light-rgb), .7);
    color: var(--ui-text-linkText);
}

.rrp-plan-icon svg {
    width: 22px;
    height: 22px;
}

.rrp-plan-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rrp-plan-name {
    color: var(--ui-text-primaryText);
    overflow-wrap: anywhere;
}

/* the plan menu (the house dropdown), and what it is doing */
.rrp-plan-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: 2px 0;
}

.rrp-plan-row .icon-dropdown-wrapper {
    min-width: 260px;
}

.rrp-plan-status.is-error {
    color: var(--color-semantic-danger);
}

/* while a plan opens, the menu waits */
.rrp-plan.is-busy .icon-dropdown-wrapper,
.rrp-plan.is-busy .rrp-plan-select {
    pointer-events: none;
    opacity: .55;
}

/* the report on the left; spreadsheets and saved reports beside it, under it when the page is narrow */
.rrp-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 20px;
    align-items: start;
}

.rrp-main,
.rrp-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

@container rrp (max-width: 900px) {
    .rrp-cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* cards: the Summary card look */
.rrp-card {
    background: var(--ui-backgrounds-cardBg);
    border: 1px solid var(--ui-borders-borderDefault);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(var(--color-gray-900-rgb), 0.05),
                0 4px 14px rgba(var(--color-gray-900-rgb), 0.04);
    overflow: hidden;
}

.rrp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 20px;
    background: rgba(var(--color-gray-100-rgb), 0.55);
    border-bottom: 1px solid var(--ui-borders-borderDefault);
}

.rrp-card-title {
    margin: 0;
}

.rrp-card-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px 20px;
}

/* the report card's steps, a rule between them */
.rrp-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rrp-block + .rrp-block {
    padding-top: 14px;
    border-top: 1px solid var(--ui-borders-borderLight);
}

.rrp-step-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rrp-hint {
    margin: 0;
}

.rrp-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--ui-text-linkText);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rrp-link:hover {
    text-decoration-thickness: 2px;
}

/* presets: five tiles in a row, three and two when the card is narrow */
.rrp-report .rrp-card-body {
    container: rrpreport / inline-size;
}

.rr-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

@container rrpreport (max-width: 600px) {
    .rr-presets {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container rrpreport (max-width: 380px) {
    .rr-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.rr-preset {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--ui-borders-borderDefault);
    background: var(--ui-backgrounds-cardBg);
    color: var(--ui-text-primaryText);
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.rr-preset:hover:not(:disabled) {
    border-color: var(--color-blue-6);
}

.rr-preset.is-selected {
    border-color: var(--color-blue-6);
    box-shadow: 0 0 0 2px rgba(var(--color-blue-6-rgb), .25);
    background: rgba(var(--color-brand-light-rgb), .6);
}

.rr-preset:disabled {
    cursor: not-allowed;
    opacity: .65;
}

.rr-preset-title {
    font-weight: 700;
    line-height: 1.25;
}

.rr-preset-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 6px;
    margin-top: auto;
    padding-top: 3px;
    color: var(--ui-text-mutedText);
}

.rr-preset-count {
    white-space: nowrap;
}

/* what the report holds, and the full list of sections behind Customize sections */
.rrp-includes {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.rrp-includes-text {
    flex: 1 1 320px;
}

.rr-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2px 14px;
    padding: 6px;
    border-radius: 10px;
    background: rgba(var(--color-gray-100-rgb), 0.55);
}

.rr-pages[hidden] {
    display: none;
}

.rr-page {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}

.rr-page:hover {
    background: rgba(var(--color-brand-light-rgb), .5);
}

.rr-page input {
    margin-top: 3px;
    flex: none;
}

.rr-page.is-locked {
    cursor: not-allowed;
    opacity: .7;
}

.rr-page-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.rr-page-title {
    font-weight: 600;
    color: var(--ui-text-primaryText);
}

.rr-lock {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: var(--text-2xs, 11px);
    font-weight: 700;
    background: var(--ui-text-linkText);
    color: var(--ui-backgrounds-cardBg);
    white-space: nowrap;
}

/* compare with saved plans: one chip a plan, the house selected pair when chosen */
.rrp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.rrp-chip {
    max-width: 100%;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--ui-borders-borderDefault);
    background: var(--ui-backgrounds-cardBg);
    color: var(--ui-text-secondaryText);
    font-size: var(--text-small, 14px);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.rrp-chip:hover:not(:disabled) {
    border-color: var(--ui-text-linkText);
    color: var(--ui-text-primaryText);
}

.rrp-chip.is-selected {
    border-color: var(--ui-text-linkText);
    background: var(--ui-text-linkText);
    color: var(--ui-backgrounds-cardBg);
}

.rrp-chip.is-selected::before {
    content: '\2713';
    margin-right: 6px;
}

.rrp-chip:disabled {
    cursor: not-allowed;
}

.rrp-chip:disabled:not(.is-selected) {
    opacity: .5;
}

/* keep a copy and a note */
.rr-option {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--ui-text-primaryText);
}

.rr-keep {
    cursor: pointer;
}

.rr-note-input {
    width: 100%;
    max-width: 560px;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--ui-borders-borderDefault);
    background: var(--ui-backgrounds-cardBg);
    color: var(--ui-text-primaryText);
    font-size: var(--text-small, 14px);
}

/* the button and what it is doing */
.rrp-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.rr-status {
    color: var(--ui-text-secondaryText);
}

.rrp-actions .rr-status {
    flex: 1 1 220px;
}

/* an empty status line (nothing made yet) takes no room in a card: it cancels the gap above it, and stays in
   the page so a screen reader hears it when it speaks */
.rrp-card-body > .rr-status:empty {
    margin-top: -14px;
}

.rr-status.is-error {
    color: var(--color-semantic-danger);
}

.rr-upgrade {
    margin: 0;
    color: var(--ui-text-secondaryText);
}

.rr-upgrade a {
    color: var(--ui-text-linkText);
    font-weight: 600;
}

/* spreadsheets */
.rrp-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rrp-stack .masterbtn {
    width: 100%;
}

@container rrp (max-width: 900px) {
    .rrp-stack {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .rrp-stack .masterbtn {
        width: auto;
    }
}

.rrp-across {
    gap: 8px;
    color: var(--ui-text-secondaryText);
    cursor: pointer;
}

/* saved reports: stacked in the side column, a row each when the page is one column wide */
.rr-saved-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rr-saved-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--ui-borders-borderLight);
}

.rr-saved-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rr-saved-title {
    font-weight: 600;
    color: var(--ui-text-primaryText);
}

.rr-saved-facts,
.rr-saved-note {
    overflow-wrap: anywhere;
}

.rr-saved-note {
    font-style: italic;
}

.rr-saved-list > .rrp-link {
    align-self: flex-start;
}

.rr-saved-actions {
    display: flex;
    gap: 6px;
    flex: none;
}

@container rrp (max-width: 900px) and (min-width: 560px) {
    .rr-saved-row {
        flex-direction: row;
        align-items: center;
    }
    .rr-saved-info {
        flex: 1;
    }
}