/* Gap-free page layout for Reports, Budgets and Investments (prefix ci-). Loaded after the area sheets so it wins ties.

   Two patterns, both made from the area cards (ReportSectionCard, InvestmentSectionCard: section.rc-card > header,
   optional explainer, .rc-card-body):

   - A row (.ci-row) puts cards side by side at one height. Every card in the row stretches to the tallest, its body
     grows to fill, and a card whose only content is an empty line centres it. Spans reuse .rp-col-N / .iv-col-N, so
     they fold to full width where the area grids already fold (below 1200px, halves below 992px).

   - A board (.ci-board) is two stacks of cards, main (.ci-main) and rail (.ci-rail), that always end together: the
     last card of each stack grows, so whichever stack is shorter stretches its last card to meet the other and the
     board has no hole under either column. The rail keeps a readable width (a third, or 5/12 for .ci-board-wide) and
     stops growing on very wide screens so the main column's charts get the room. Below 1200px the board folds to one
     column and the cards take the reading order given by .ci-o-1 ... .ci-o-9 (each takeaway right after the chart it
     explains), not main-then-rail.

   Cards never get a fixed height, so a chart keeps the height it draws at; the room a stretched card gains sits at the
   foot of its body. Lists (what stands out, accounts, deposits) are the cards that sit last in a stack, so the room
   they gain reads as the end of a list, not a hole in the page. */

.ci-row,
.ci-board {
    --ci-gap: 1rem;
    display: grid;
    gap: var(--ci-gap);
    align-items: stretch;
    min-width: 0;
}

.ci-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ci-row > * { min-width: 0; }

.ci-board { grid-template-columns: minmax(0, 1fr); }
.ci-main,
.ci-rail { display: flex; flex-direction: column; gap: var(--ci-gap); min-width: 0; }
.ci-main > *,
.ci-rail > * { min-width: 0; }

/* A column wrapper inside a row (two cards stacked in one span) behaves like a stack: its last card grows. */
.ci-row > .rp-col,
.ci-row > .iv-col,
.ci-row > .ci-col { display: flex; flex-direction: column; gap: var(--ci-gap); min-width: 0; }
.ci-row > .ci-col > :last-child,
.ci-row > .rp-col > :last-child,
.ci-row > .iv-col > :last-child { flex: 1 1 auto; }

/* Cards in a row or a stack: header, explainer and body in a column, the body taking the room the card gains. */
.ci-row > section.rc-card:has(> .rc-card-body),
.ci-row > .ci-col > section.rc-card:has(> .rc-card-body),
.ci-row > .rp-col > section.rc-card:has(> .rc-card-body),
.ci-row > .iv-col > section.rc-card:has(> .rc-card-body),
.ci-main > section.rc-card:has(> .rc-card-body),
.ci-rail > section.rc-card:has(> .rc-card-body) {
    display: flex;
    flex-direction: column;
}

.ci-row section.rc-card > .rc-card-body,
.ci-main > section.rc-card > .rc-card-body,
.ci-rail > section.rc-card > .rc-card-body { flex: 1 1 auto; min-height: 0; }

/* A card whose body is only an empty line ("Nothing renews in the next 90 days") centres it in the room. */
.ci-row section.rc-card > .rc-card-body:has(> .rp-empty-line:only-child),
.ci-main > section.rc-card > .rc-card-body:has(> .rp-empty-line:only-child),
.ci-rail > section.rc-card > .rc-card-body:has(> .rp-empty-line:only-child) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* A chart or ring that should sit in the middle of a stretched card (BodyCssClass="ci-center"). */
.rc-card-body.ci-center { display: flex; flex-direction: column; justify-content: center; }

/* A footnote under a list drops to the foot of a stretched card, so the room sits between the list and its note. */
.ci-row section.rc-card > .rc-card-body > .rp-footnote:last-child,
.ci-main > section.rc-card > .rc-card-body > .rp-footnote:last-child,
.ci-rail > section.rc-card > .rc-card-body > .rp-footnote:last-child { margin-top: auto; padding-top: 10px; }

.ci-row section.rc-card > .rc-card-body:has(> .rp-footnote:last-child),
.ci-main > section.rc-card > .rc-card-body:has(> .rp-footnote:last-child),
.ci-rail > section.rc-card > .rc-card-body:has(> .rp-footnote:last-child) { display: flex; flex-direction: column; }

@media (min-width: 1200px) {
    .ci-board { grid-template-columns: minmax(0, 1fr) clamp(300px, 33.333%, 720px); }
    .ci-board.ci-board-wide { grid-template-columns: minmax(0, 1fr) clamp(360px, 41.666%, 900px); }
    .ci-board.ci-board-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ci-main > :last-child,
    .ci-rail > :last-child,
    .ci-main > .ci-grow,
    .ci-rail > .ci-grow { flex: 1 1 auto; }
}

/* A board whose main stack holds a written briefing: the briefing runs long, so instead of stretching the rail's last
   card to meet it the rail rides along beside it (sticky under the app header). It never runs past the window: a rail
   taller than the screen scrolls on its own, so every card in it stays in reach while the briefing is read. */
@media (min-width: 1200px) {
    .ci-board:has(> .ci-main .rp-ai-briefing) > .ci-rail {
        position: sticky;
        top: 76px;
        align-self: start;
        max-height: calc(100vh - 92px);
        margin: -4px -6px -12px;
        padding: 4px 6px 12px;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    .ci-board:has(> .ci-main .rp-ai-briefing) > .ci-rail > :last-child { flex: 0 0 auto; }
}

/* One column: the stacks dissolve and every card takes its reading-order slot. */
@media (max-width: 1199.98px) {
    .ci-board > .ci-main,
    .ci-board > .ci-rail { display: contents; }
    .ci-board .ci-o-1 { order: 1; }
    .ci-board .ci-o-2 { order: 2; }
    .ci-board .ci-o-3 { order: 3; }
    .ci-board .ci-o-4 { order: 4; }
    .ci-board .ci-o-5 { order: 5; }
    .ci-board .ci-o-6 { order: 6; }
    .ci-board .ci-o-7 { order: 7; }
    .ci-board .ci-o-8 { order: 8; }
    .ci-board .ci-o-9 { order: 9; }
}

/* Halves stay side by side on a tablet; a lone odd card at the end takes the whole row instead of leaving a hole. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .ci-row.ci-row-pairs > .rp-col-4,
    .ci-row.ci-row-pairs > .iv-col-4 { grid-column: span 6; }
    .ci-row.ci-row-pairs > .rp-col-4:last-child:nth-child(odd),
    .ci-row.ci-row-pairs > .iv-col-4:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .ci-row,
    .ci-board { --ci-gap: .75rem; }
}

/* Investments pages breathe a little more on wide screens, matching the overview. */
@media (min-width: 1400px) {
    .iv-page .ci-row,
    .iv-page .ci-board { --ci-gap: 1.25rem; }
}

/* ------------------------------------------------------------------ Tiles that fill their row
   Highlights, ways to save and overlapping services wrap as flexible tiles: a short last row grows to the edge instead
   of leaving empty columns on a wide screen. */
.rp-highlights:not(.is-list),
.rp-opps,
.rp-overlaps { display: flex; flex-wrap: wrap; }
.rp-highlights:not(.is-list) > * { flex: 1 1 260px; }
.rp-opps > * { flex: 1 1 320px; }
.rp-overlaps > * { flex: 1 1 240px; }

/* The cash calendar: months share the card's width with no empty tracks to the right. The card measures itself, so
   four months sit in one row when they fit and two by two when they don't (never three and a lone one); an odd last
   month takes the row. The days are wide, not tall, so a month in a wide card stays a compact strip. */
.rc-card-body:has(> .rp-cal-grid) { container-type: inline-size; }
.rp-cal-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@container (max-width: 961.98px) {
    .rp-cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-cal-grid > .rp-cal:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container (max-width: 475.98px) {
    .rp-cal-grid { grid-template-columns: minmax(0, 1fr); }
}
.rp-cal-day { aspect-ratio: auto; height: clamp(26px, 2.2vw, 36px); }
.rp-cal-legend .rp-cal-day { height: 14px; }

/* Investments card collections (account cards, health checks, checkup to-dos): the cards widen to share the row
   instead of leaving empty columns to the right when there are only a few. */
.ivh-accounts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.ivo-health-checks:not(.ivk-checks) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.ivk-tasks:not(.is-compact) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* Securities: the chart column and the quote rail end together (the last card of each stack grows). */
@media (min-width: 1200px) {
    .ivs-layout { align-items: stretch; }
}

/* ------------------------------------------------------------------ Stands out + briefing at the foot of a report
   Side by side at one height while the briefing is a pitch; once a briefing is written it takes the full width (and
   the takeaways above it spread into tiles), so a long briefing never leaves a hole beside it. */
.ci-duo:has(.rp-ai-briefing) > * { grid-column: 1 / -1; }
.ci-duo:has(.rp-ai-briefing) .rp-highlights.is-list { display: flex; flex-wrap: wrap; }
.ci-duo:has(.rp-ai-briefing) .rp-highlights.is-list > * { flex: 1 1 300px; }

/* ------------------------------------------------------------------ AI cards that fill their room
   A briefing card stretched beside a taller card centres its pitch and carries a soft glow, so the room reads as the
   card's own space. */
.rp-ai-card > .rc-card-body:has(> .rp-ai-start),
.rp-ai-card > .rc-card-body:has(> .rp-upsell) { display: flex; flex-direction: column; justify-content: center; }
.rp-ai-card > .rc-card-body > .rp-ai-start { position: relative; }
/* The card fills the height its row gives it, so an unwritten briefing sits centred in that room, not at the top. */
.rp-ai-card { display: flex; flex-direction: column; }
.rp-ai-card > .rc-card-body { flex: 1 1 auto; }
.ci-row > .rp-ai-card,
.ci-main > .rp-ai-card,
.ci-rail > .rp-ai-card,
.ci-col > .rp-ai-card,
.rp-col > .rp-ai-card,
.rp-intel-brief > .rp-ai-card {
    background-image: radial-gradient(120% 70% at 100% 100%, color-mix(in srgb, var(--rp-accent, #7C6AF2) 9%, transparent) 0%, transparent 60%);
}

/* The full-width briefing: the pitch runs across with the button at its end; a written briefing reads in two columns
   on a wide screen (what it found on the left, what to do and what to watch on the right). */
.rp-ai-card.is-wide .rp-ai-pitch { font-size: 14px; }
.rp-ai-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-ai-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

@media (min-width: 2200px) {
    .ci-main > .rp-ai-card .rp-ai-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 6px 20px; }
    .ci-main > .rp-ai-card .rp-ai-body > :only-child { grid-column: 1 / -1; }
}

@media (min-width: 1400px) {
    .rp-ai-card.is-wide .rp-ai-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 6px 20px; }
    .rp-ai-card.is-wide .rp-ai-body > :only-child { grid-column: 1 / -1; }
    .rp-ai-card.is-wide .rp-ai-summary { max-width: 110ch; }
}

/* ------------------------------------------------------------------ Ask this report, given the room
   Beside the Intelligence rail the Ask card stretches: suggestions at the top, the conversation in the middle, the
   question box at the foot, like a chat panel. */
.rp-ask-empty { display: none; }
.rc-card-body:has(> .rp-ask.is-roomy) { display: flex; flex-direction: column; }
.rp-ask.is-roomy { flex: 1 1 auto; min-height: 320px; }
.rp-ask.is-roomy .rp-ask-turns { flex: 1 1 auto; max-height: 640px; }
.rp-ask.is-roomy .rp-ask-form { margin-top: auto; }
.rp-ask.is-roomy .rp-ask-empty {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 160px;
    padding: 18px;
    border: 1px dashed color-mix(in srgb, var(--rp-accent, #7C6AF2) 30%, transparent);
    border-radius: 16px;
    background: radial-gradient(90% 80% at 50% 0%, color-mix(in srgb, var(--rp-accent, #7C6AF2) 8%, transparent) 0%, transparent 70%);
    text-align: center;
}
.rp-ask-empty-orb { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rp-ai-grad); color: #FFFFFF; font-size: 16px; }
.rp-ask-empty strong { font-family: var(--tx-font); font-size: 15px; color: var(--rp-text); }
.rp-ask-empty > span:not(.rp-ask-empty-orb) { max-width: 46ch; font-size: 12.5px; line-height: 1.5; color: var(--rp-muted); }

/* Intelligence: every report's briefing card fills its half, the "Open the report" link at its foot. */
.rp-intel-brief > .rp-ai-card { display: flex; flex: 1 1 auto; flex-direction: column; }
.rp-intel-brief > .rp-ai-card > .rc-card-body { flex: 1 1 auto; }

/* ------------------------------------------------------------------ Print: each stack prints whole, main then rail */
@media print {
    body.rp-printing .ci-row,
    body.rp-printing .ci-board,
    body.rp-printing .ci-main,
    body.rp-printing .ci-rail { display: block; }
    body.rp-printing .ci-row > *,
    body.rp-printing .ci-main > *,
    body.rp-printing .ci-rail > * { margin-bottom: 12px; }
}