/* College Planning: guided Folio workflow and decision-first summary.

   The summary is four questions in the order an advisor asks them:
     opening   what must be saved by day one      verdict + espresso statement
     01 path   how the money gets there, then out  paper card, one chart
     02        which school fits                   the page's ONE band
     03        the working behind it               one fade, one ledger at a time
     04        what to do next                     canvas, one gold card
   Variation comes from grounds and devices, never from new registers. */

.folio .folio-route.folio-college {
    min-width: 0;
    color: var(--f-ink);
    background: var(--f-canvas);
}

/* ==========================================================================
   OPENING · verdict beside the cost-to-funding statement
   ========================================================================== */

.folio .folio-college-opening { padding-top: 6px; padding-bottom: 34px; }
/* The plan's editors, as one row of buttons. Each is plainly a button --
   bordered, raised, with an arrow that moves on hover -- and carries the value
   its editor holds, so the row doubles as a summary of what is assumed. */
.folio .folio-college-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.folio .folio-college-tools__label { margin: 0; color: var(--f-bronze); font: 500 9px/1.3 var(--f-font-mono); letter-spacing: .14em; text-transform: uppercase; }
.folio .folio-college-tools__row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.folio .folio-college-tool {
    position: relative;
    display: grid;
    gap: 3px;
    min-width: 0;
    max-width: 250px;
    padding: 9px 32px 10px 14px;
    border: 1px solid var(--f-line-strong);
    border-radius: 10px;
    background: var(--f-paper);
    color: var(--f-ink);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(51, 41, 29, .06);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.folio .folio-college-tool::after { content: "›"; position: absolute; top: 50%; right: 13px; color: var(--f-faint); font: 400 18px/1 var(--f-font-ui); transform: translateY(-55%); transition: color .15s ease, right .15s ease; }
.folio .folio-college-tool > strong { color: var(--f-ink); font: 600 13px/1.25 var(--f-font-ui); white-space: nowrap; }
.folio .folio-college-tool > small { overflow: hidden; color: var(--f-dim); font: 400 11px/1.3 var(--f-font-ui); text-overflow: ellipsis; white-space: nowrap; }
.folio .folio-college-tool:hover { border-color: var(--f-accent); background: var(--f-quiet); box-shadow: var(--f-shadow); transform: translateY(-1px); }
.folio .folio-college-tool:hover > strong { color: var(--f-accent); }
.folio .folio-college-tool:hover::after { right: 10px; color: var(--f-accent); }
.folio .folio-college-tool:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }

/* ==========================================================================
   01 · THE PATH
   ========================================================================== */

.folio .folio-college-section { min-width: 0; }
.folio .folio-college-section .folio-sec__title-row { align-items: flex-end; gap: 14px 24px; margin-bottom: 18px; flex-wrap: wrap; }
.folio .folio-college-section .folio-sec__title { font-family: var(--f-font-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; letter-spacing: -.015em; }
.folio .folio-college-path { padding-top: 4px; }

.folio .folio-college-section .folio-sec__title-row > .end .folio-choice-group { grid-auto-flow: column; align-items: center; gap: 10px; }
.folio .folio-college-section .folio-sec__title-row > .end .folio-choice { min-height: 30px; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
.folio .folio-college-contrib.is-busy { opacity: .55; pointer-events: none; }
.folio .folio-college-contrib__static { margin: 0; color: var(--f-muted); font: 500 12px/1.3 var(--f-font-ui); }

.folio .folio-college-chart {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--f-line);
    border-radius: var(--f-radius-lg);
    background: var(--f-paper);
    box-shadow: var(--f-shadow);
}
.folio .folio-college-chart__body { display: grid; grid-template-columns: minmax(0, 1fr) 276px; }
.folio .folio-college-chart__plot { min-width: 0; padding: 20px 10px 18px 16px; }
.folio .folio-college-chart-scroll { overflow-x: auto; overflow-y: hidden; }
.folio .folio-college-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.folio .folio-college-chart svg text { font-family: var(--f-font-mono); }
.folio .college-chart__grid { stroke: var(--f-line); stroke-width: 1; }
.folio .college-chart__axis { fill: var(--f-faint); font-size: 10.5px; }
.folio .college-chart__phase { fill: var(--f-bronze); font-size: 9.5px; letter-spacing: .16em; }
.folio .college-chart__divider { stroke: var(--f-line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.folio .college-chart__goal line { stroke: var(--f-gold); stroke-width: 1.5; stroke-dasharray: 7 5; }
.folio .college-chart__goal text { fill: var(--f-bronze); font-size: 10.5px; font-weight: 600; paint-order: stroke; stroke: var(--f-paper); stroke-width: 4px; }
.folio .college-chart__fund,
.folio .college-chart__paid { fill: var(--f-accent); }
.folio .college-chart__aid { fill: #a9c19c; }
.folio .college-chart__policy { fill: var(--f-gold-bright); }
.folio .college-chart__short { fill: url(#college-hatch-short); }
.folio .college-chart__outside { fill: url(#college-hatch-outside); }
.folio .college-chart__hatch-ground { fill: var(--f-red-soft); }
.folio .college-chart__hatch-line { stroke: var(--f-red); stroke-width: 2.2; opacity: .55; }
.folio .college-chart__hatch-quiet { fill: var(--f-t-grey); }
.folio .college-chart__hatch-quiet-line { stroke: var(--f-grey); stroke-width: 1.4; opacity: .7; }
.folio .college-chart__target { fill: none; stroke: var(--f-bronze); stroke-width: 1.25; stroke-dasharray: 4 3; }
.folio .college-chart__tick { stroke: var(--f-bronze); stroke-width: 2; }
.folio .college-chart__value { fill: var(--f-muted); font-size: 11px; font-weight: 600; }
.folio .college-chart__year { fill: var(--f-ink); font-size: 11px; }
.folio .college-chart__sub { fill: var(--f-faint); font-size: 9.5px; }
.folio .college-chart__hit { fill: transparent; transition: fill .15s ease; }
.folio .college-chart__bar { outline: none; transition: opacity .15s ease; }
.folio .folio-college-chart.has-focus .college-chart__bar:not(.is-active) { opacity: .36; }
.folio .college-chart__bar.is-active .college-chart__hit { fill: var(--f-canvas); }
.folio .college-chart__bar:focus-visible .college-chart__hit { stroke: var(--f-accent); stroke-width: 1.5; }

.folio .folio-college-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 10px 0 0 54px; padding: 0; list-style: none; color: var(--f-muted); font: 500 11px/1.3 var(--f-font-ui); }
.folio .folio-college-chart__legend i { display: inline-block; width: 12px; height: 12px; margin-right: 7px; border-radius: 3px; vertical-align: -2px; }
.folio .folio-college-chart__legend .is-fund i { background: var(--f-accent); }
.folio .folio-college-chart__legend .is-target i { border: 1.25px dashed var(--f-bronze); }
.folio .folio-college-chart__legend .is-short i { background: repeating-linear-gradient(45deg, rgba(165, 67, 49, .55) 0 2px, var(--f-red-soft) 2px 5px); }
.folio .folio-college-chart__legend .is-aid i { background: #a9c19c; }
.folio .folio-college-chart__legend .is-policy i { background: var(--f-gold-bright); }
.folio .folio-college-chart__legend .is-outside i { background: repeating-linear-gradient(-45deg, rgba(154, 144, 129, .7) 0 1.5px, var(--f-t-grey) 1.5px 4px); }

/* The readout replaces a tooltip: it opens on the day-one summary and follows
   the pointer or keyboard focus to one year, never covering a bar. */
.folio .folio-college-readout { display: grid; align-content: start; min-width: 0; padding: 24px 22px; border-left: 1px solid var(--f-line); }
.folio .folio-college-readout__item[hidden] { display: none; }
.folio .folio-college-readout__eyebrow { margin: 0 0 10px; color: var(--f-bronze); font: 500 9.5px/1.3 var(--f-font-mono); letter-spacing: .15em; text-transform: uppercase; }
.folio .folio-college-readout__figure { margin: 0; color: var(--f-ink); font: 400 clamp(28px, 2.6vw, 36px)/1 var(--f-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.folio .folio-college-readout__label { margin: 7px 0 0; color: var(--f-dim); font: 500 9.5px/1 var(--f-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio .folio-college-readout dl { margin: 18px 0 0; }
.folio .folio-college-readout dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid var(--f-line); }
.folio .folio-college-readout dt { color: var(--f-muted); font: 400 12px/1.3 var(--f-font-ui); }
.folio .folio-college-readout dd { margin: 0; color: var(--f-ink); font: 600 12.5px/1.3 var(--f-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.folio .folio-college-readout .is-neg dd { color: var(--f-red); }
.folio .folio-college-readout .is-pos dd { color: var(--f-green); }
.folio .folio-college-readout .is-strong dt { color: var(--f-ink); font-weight: 600; }
.folio .folio-college-readout__hint { margin: 16px 0 0; color: var(--f-faint); font: 400 11px/1.45 var(--f-font-ui); }

.folio .folio-college-chart__table { padding: 0 22px; border-top: 1px solid var(--f-line); }
.folio .folio-college-chart__table > summary { padding: 14px 0; color: var(--f-accent); font: 600 10px/1.3 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.folio .folio-college-chart__table-scroll { overflow-x: auto; }
.folio .folio-college-chart__table table { width: 100%; border-collapse: collapse; font: 400 12.5px/1.35 var(--f-font-ui); }
.folio .folio-college-chart__table :is(th, td) { padding: 9px 10px; border-bottom: 1px solid var(--f-line); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.folio .folio-college-chart__table :is(th:first-child, td:nth-child(2)) { text-align: left; }
.folio .folio-college-chart__table thead th { color: var(--f-dim); font: 500 9px/1 var(--f-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio .folio-college-chart__table > p { max-width: 90ch; margin: 12px 0 18px; color: var(--f-dim); font-size: 11.5px; line-height: 1.55; }

/* ==========================================================================
   02 · COMPARE SCHOOLS · on the band
   The matrix, schools down and consequences across. Two quiet links in the
   section's corner open the side editor: add a school, or edit any school's
   costs, residency and living arrangement.
   ========================================================================== */

.folio .folio-college-compare-section .folio-sec__title-row { margin-bottom: 8px; }
.folio .folio-college-compare__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.folio .folio-college-compare__finding { max-width: 78ch; margin: 0 0 20px; color: var(--f-muted); font: 400 14px/1.55 var(--f-font-ui); }
.folio .folio-college-compare__finding > span { color: var(--f-ink); font: 400 19px/1.35 var(--f-font-display); letter-spacing: -.01em; }
.folio .folio-college-compare-section .folio-matrix { box-shadow: var(--f-shadow); }

/* ==========================================================================
   03 · YEAR BY YEAR · on the fade
   ========================================================================== */

.folio .folio-college-years__panel[hidden] { display: none; }
.folio .folio-college-years__panel .folio-ledger { box-shadow: var(--f-shadow); }
.folio .folio-college-section .folio-ledger__table { width: 100%; }
.folio .folio-college .folio-ledger { min-width: 0; max-width: 100%; overflow-x: auto; }
.folio .folio-college-table-note { margin: 0; padding: 16px; color: var(--f-muted); font-size: 14px; line-height: 1.5; }

/* ==========================================================================
   04 · NEXT STEPS, RECORDS, FOOTER
   ========================================================================== */

.folio .folio-college-close { padding-bottom: 56px; }
.folio .folio-college-next__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 28px; align-items: start; }
.folio .folio-college-next__grid:not(:has(.folio-college-actions)) { grid-template-columns: minmax(0, 660px); }
/* D8 · the watermark numeral: this is step one of an order. */
.folio .folio-college-next__lead { position: relative; overflow: hidden; padding: 26px 28px 28px; border: 1px solid; border-radius: var(--f-radius-lg); }
.folio .folio-college-next__num { position: absolute; right: 16px; bottom: -22px; color: var(--f-gold); font: 400 112px/1 var(--f-font-display); opacity: .15; pointer-events: none; }
.folio .folio-college-next__lead > div { position: relative; }
.folio .folio-college-next__eyebrow { margin: 0 0 10px; color: var(--f-bronze); font: 500 9.5px/1.3 var(--f-font-mono); letter-spacing: .15em; text-transform: uppercase; }
.folio .folio-college-next__lead h3 { max-width: 26ch; margin: 0; color: var(--f-ink); font: 400 clamp(20px, 2vw, 25px)/1.22 var(--f-font-display); letter-spacing: -.012em; }
.folio .folio-college-next__lead p:not(.folio-college-next__eyebrow) { max-width: 52ch; margin: 10px 0 18px; color: var(--f-muted); font-size: 13px; line-height: 1.55; }
.folio .folio-college-actions { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--f-line); }
.folio .folio-college-actions li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-actions li > span { color: var(--f-accent); font: 600 10px/1 var(--f-font-mono); letter-spacing: .12em; }
.folio .folio-college-actions strong { font: 550 14px/1.35 var(--f-font-ui); }
.folio .folio-college-actions p { margin: 4px 0 0; color: var(--f-muted); font-size: 12px; line-height: 1.45; }

.folio .folio-college-records { display: grid; gap: 10px; margin-top: 10px; }
.folio .folio-college-record { min-width: 0; border: 1px solid var(--f-line); border-radius: var(--f-radius); background: var(--f-quiet); }
.folio .folio-college-record[open] { background: var(--f-paper); }
.folio .folio-college-record > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; cursor: pointer; list-style: none; }
.folio .folio-college-record > summary::-webkit-details-marker { display: none; }
.folio .folio-college-record > summary::after { content: "+"; color: var(--f-accent); font: 400 18px/1 var(--f-font-mono); }
.folio .folio-college-record[open] > summary::after { content: "−"; }
.folio .folio-college-record > summary strong { display: block; color: var(--f-ink); font: 600 13.5px/1.3 var(--f-font-ui); }
.folio .folio-college-record > summary small { display: block; margin-top: 3px; color: var(--f-dim); font-size: 11.5px; }
.folio .folio-college-record > summary:focus-visible { outline: 2px solid var(--f-accent); outline-offset: -2px; border-radius: var(--f-radius); }
.folio .folio-college-record__body { padding: 2px 18px 18px; }
.folio .folio-college-record__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }

.folio .folio-college-evidence__body { padding: 2px 18px 18px; }
.folio .folio-college-evidence__body > p { max-width: 75ch; margin-top: 0; color: var(--f-muted); line-height: 1.55; }
.folio .folio-college-evidence__body ul { margin: 18px 0; padding: 0; list-style: none; border-top: 1px solid var(--f-line); }
.folio .folio-college-evidence__body li { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-evidence__body li strong,
.folio .folio-college-evidence__body li span { display: block; }
.folio .folio-college-evidence__body li span { margin-top: 3px; color: var(--f-dim); font-size: 11px; }
.folio .folio-college-evidence__body dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0; }
.folio .folio-college-evidence__body dt { color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .folio-college-evidence__body dd { margin: 6px 0 0; font-size: 12px; }

.folio .folio-college-year { display: flex; align-items: center; gap: 7px; }
.folio .folio-college-year > span { color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio .folio-college-year .folio-input { width: 86px; min-height: 34px; padding-block: 6px; }
.folio .folio-college-transactions { margin-top: 20px; border-top: 1px solid var(--f-line); }
.folio .folio-college-transactions h3 { margin: 18px 0 4px; font: 500 14px/1.3 var(--f-font-ui); }
.folio .folio-college-transactions article { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-transactions strong,
.folio .folio-college-transactions span { display: block; }
.folio .folio-college-transactions span { margin-top: 4px; color: var(--f-dim); font-size: 11px; }
.folio .folio-college-transactions p { margin: 5px 0 0; color: var(--f-muted); font-size: 12px; }
.folio .folio-college-footer { display: flex; justify-content: space-between; gap: 22px; align-items: center; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--f-line); color: var(--f-dim); font-size: 11px; }
.folio .folio-college-footer p { margin: 0; }

/* ==========================================================================
   SHARED STATES · plan picker, notice, empty and error
   ========================================================================== */

.folio .folio-college-plan-picker { display: flex; align-items: center; gap: 9px; }
.folio .folio-college-plan-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 9px; }
.folio .folio-college-plan-picker > span { color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio .folio-college-plan-picker .folio-input { width: min(330px, 42vw); }

.folio .folio-college-state { padding: 28px 0; }
.folio .folio-college-state strong { display: block; font: 500 18px/1.3 var(--f-font-ui); }
.folio .folio-college-state p { color: var(--f-muted); }
.folio .folio-college-state.is-error { color: var(--f-red); }

.folio .folio-college-notice { position: sticky; top: 8px; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 11px 13px; border: 1px solid var(--f-line); border-left: 3px solid var(--f-accent); border-radius: 8px; background: var(--f-paper); box-shadow: var(--f-shadow); }
.folio .folio-college-notice.is-error { border-left-color: var(--f-red); color: var(--f-red); }
.folio .folio-college-notice.is-success { border-left-color: var(--f-green); color: var(--f-green); }
.folio .folio-college-notice button { border: 0; background: transparent; color: currentColor; font-size: 18px; cursor: pointer; }
.folio .folio-college-notice:not(.is-error) { overflow: hidden; }
.folio .folio-college-notice:not(.is-error)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    opacity: .28;
    transform-origin: left;
    animation: college-notice-countdown var(--college-notice-seconds, 4s) linear forwards;
}
.folio .folio-college-notice.is-leaving { opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }
@keyframes college-notice-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ==========================================================================
   GUIDED BUILDER, EDITOR PANEL AND STEP FORMS
   ========================================================================== */

.folio .folio-college .folio-step__dot { flex: 0 0 28px; width: 28px; height: 28px; aspect-ratio: 1; }
.folio :is(.folio-college, .folio-college-panel) input:is([type="checkbox"], [type="radio"]) { flex: 0 0 18px; width: 18px; height: 18px; min-width: 18px; margin: 2px 0; accent-color: var(--f-accent); }
.folio :is(.folio-college, .folio-college-panel) .folio-choice input[type="radio"] { position: absolute; width: 1px; height: 1px; min-width: 0; margin: 0; opacity: 0; }
.folio .folio-college-assumption-evidence { padding: 16px 0; border-top: 1px solid var(--f-line); }
.folio .folio-college-assumption-evidence summary { cursor: pointer; color: var(--f-accent); }
.folio .folio-college-assumption-evidence dl { margin: 16px 0 0; }
.folio .folio-college-assumption-evidence dl > div { padding: 12px 0; border-top: 1px solid var(--f-line); }
.folio .folio-college-assumption-evidence dt { font-size: 12px; color: var(--f-muted); }
.folio .folio-college-assumption-evidence dd { margin: 6px 0 0; font-size: 13px; }
.folio .folio-college-assumption-evidence dd span { display: block; margin: 4px 0; color: var(--f-muted); }

.folio .folio-college-panel { width: min(820px, 100vw); box-sizing: border-box; padding: 0; }
.folio .folio-college-panel .folio-panel__body { min-width: 0; overflow-x: hidden; }
.folio .folio-college-panel .folio-college-aid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.folio .folio-college-panel .folio-college-goal { grid-template-columns: 1fr; }
.folio .folio-college-panel .folio-college-target { grid-template-columns: 1fr; }
.folio .folio-college-panel .folio-college-account { grid-template-columns: 1fr; }
.folio .folio-college-panel .folio-editor__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.folio .folio-college-aid-group .advisor-empty-state { padding: 12px 0; min-height: 0; background: transparent; }

.folio .folio-college .folio-input {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--f-line-strong);
    border-radius: 8px;
    background: var(--f-paper);
    color: var(--f-ink);
    font: 400 13px/1.35 var(--f-font-ui);
}

.folio .folio-college textarea.folio-input { min-height: 88px; resize: vertical; }
.folio .folio-college .folio-input:focus { outline: 3px solid var(--f-accent-soft); border-color: var(--f-accent); }
.folio .folio-college .folio-input:disabled { background: var(--f-quiet); color: var(--f-dim); cursor: not-allowed; }
.folio .folio-college a { color: var(--f-accent); text-underline-offset: 2px; }

.folio .folio-college-start {
    display: grid;
    grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
    padding: clamp(24px, 4vw, 52px) 0;
}

.folio .folio-college-start__story h2 {
    margin: 8px 0 12px;
    max-width: 16ch;
    font: 500 clamp(26px, 3vw, 38px)/1.08 var(--f-font-display);
    letter-spacing: -.02em;
}

.folio .folio-college-start__story > p:not(.folio-eyebrow) { max-width: 58ch; color: var(--f-muted); line-height: 1.65; }
.folio .folio-college-start__story ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--f-line); }
.folio .folio-college-start__story li { display: flex; gap: 10px; align-items: baseline; padding: 13px 8px 13px 0; border-bottom: 1px solid var(--f-line); color: var(--f-muted); }
.folio .folio-college-start__story li span { color: var(--f-accent); font: 600 10px/1 var(--f-font-mono); }
.folio .folio-college-start__form { align-self: start; padding: 24px; border: 1px solid var(--f-line); border-top: 3px solid var(--f-accent); border-radius: var(--f-radius-lg); background: var(--f-paper); box-shadow: var(--f-shadow); }
.folio .folio-college-start__form h2 { margin: 7px 0 8px; font: 500 clamp(24px, 2.6vw, 34px)/1.1 var(--f-font-display); letter-spacing: -.015em; }
.folio .folio-college-start__lede { margin: 0 0 24px; color: var(--f-muted); line-height: 1.55; }
.folio .folio-college-start__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.folio .folio-college-start__result { display: flex; gap: 12px; margin: 18px 0 0; padding-top: 15px; border-top: 1px solid var(--f-line); }
.folio .folio-college-start__result strong { flex: 0 0 auto; color: var(--f-accent); font: 600 9px/1.5 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .folio-college-start__result span { color: var(--f-muted); font-size: 12px; line-height: 1.45; }

.folio .folio-college-advanced > summary,
.folio .folio-college-cost-choice details > summary,
.folio .folio-college-account details > summary,
.folio .folio-college-aid-row details > summary {
    padding: 14px 0;
    color: var(--f-accent);
    font: 600 10px/1.3 var(--f-font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.folio .folio-college-builder { min-width: 0; padding-top: 12px; padding-bottom: 40px; }
.folio .folio-college-wizard { display: grid; grid-template-columns: 210px minmax(0, 1fr); grid-template-rows: auto auto; margin-top: 10px; overflow: visible; }
.folio .folio-college-wizard > .folio-wizard__head { grid-column: 1; grid-row: 1; border-right: 1px solid var(--f-line); border-bottom: 0; border-radius: var(--f-radius-lg) 0 0 0; }
.folio .folio-college-wizard > .folio-wizard__body { grid-column: 2; grid-row: 1; min-width: 0; padding: 14px 18px; }
.folio .folio-college-wizard > .folio-wizard__foot { grid-column: 1 / -1; grid-row: 2; border-radius: 0 0 var(--f-radius-lg) var(--f-radius-lg); }
.folio .folio-college-step-editor { border: 0; box-shadow: none; }
.folio .folio-college-step-editor > .folio-editor__head { padding-inline: 4px; }
.folio .folio-college-step-editor > .folio-editor__body { padding: 12px 4px 2px; }
.folio .folio-college-step-editor > .folio-editor__foot { display: none; }
.folio .folio-college-wizard-foot { display: flex; align-items: center; width: 100%; gap: 12px; }
.folio .folio-college-wizard-foot > :last-child { margin-left: auto; }
.folio .folio-college-save-state { color: var(--f-dim); font: 600 10px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .folio-college-save-state[data-state="dirty"] { color: var(--f-bronze); }
.folio .folio-college-save-state[data-state="saved"] { color: var(--f-green); }
.folio .folio-college-save-state[data-state="error"],
.folio .folio-college-save-state[data-state="denied"],
.folio .folio-college-save-state[data-state="stale"] { color: var(--f-red); }

.folio .folio-college-student-context { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-student-context span,
.folio .folio-college-student-context small { color: var(--f-dim); font: 600 9px/1.3 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .folio-college-student-context strong { font: 500 14px/1.3 var(--f-font-ui); }
.folio .folio-college-student-context small { margin-left: auto; }
.folio .folio-college-form { max-width: 880px; }
.folio .folio-college-academic-year .advisor-select-trigger { font-variant-numeric: tabular-nums; }

.folio .folio-college-search { display: grid; grid-template-columns: minmax(220px, 1fr) 88px auto auto; gap: 10px; align-items: end; padding-bottom: 17px; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-search label > span,
.folio .folio-college-manual label > span { display: block; margin-bottom: 6px; color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .folio-college-manual { display: grid; grid-template-columns: minmax(180px, 1fr) 150px 90px auto; gap: 10px; align-items: end; padding: 14px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-search-results { max-height: 320px; overflow-y: auto; margin: 14px 0; border-top: 1px solid var(--f-line); }
.folio .folio-college-search-results article { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-search-results strong,
.folio .folio-college-search-results span,
.folio .folio-college-search-results small { display: block; }
.folio .folio-college-search-results span { margin-top: 3px; color: var(--f-muted); font-size: 12px; }
.folio .folio-college-search-results small { margin-top: 3px; color: var(--f-dim); font-size: 11px; }
.folio .folio-college-search-results article > div:last-child { display: flex; align-items: center; gap: 12px; }

.folio .folio-college-school-list { border-top: 1px solid var(--f-line); }
.folio .folio-college-school { display: grid; grid-template-columns: 140px minmax(190px, 1fr) minmax(150px, auto) auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-school__primary { display: flex; gap: 7px; align-items: center; color: var(--f-accent); font: 600 10px/1.3 var(--f-font-mono); text-transform: uppercase; }
.folio .folio-college-school > div > strong,
.folio .folio-college-school > div > span,
.folio .folio-college-school > div > small { display: block; }
.folio .folio-college-school > div > span { margin-top: 3px; color: var(--f-muted); font-size: 12px; }
.folio .folio-college-school > div > small { margin-top: 3px; color: var(--f-dim); font-size: 10px; }
.folio .folio-college-school__coverage { display: flex; flex-wrap: wrap; gap: 5px; }
.folio .folio-college-school__coverage span { padding: 4px 7px; border-radius: 999px; background: var(--f-quiet); color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); }
.folio .folio-college-school__coverage .is-known { background: var(--f-green-soft); color: var(--f-green); }
.folio .folio-college-school__coverage .is-missing { background: var(--f-red-soft); color: var(--f-red); }

.folio .folio-college-school-progress { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 18px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-school-progress > span { color: var(--f-accent); font: 600 10px/1 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .folio-college-school-progress > strong { font: 500 18px/1.3 var(--f-font-ui); }
.folio .folio-college-school-progress > small { color: var(--f-dim); }
/* The editor opened from the summary switches schools in place, so a second
   school's costs are one click away instead of unreachable behind the first. */
.folio .folio-college-school-switch { display: grid; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-school-switch .folio-choice-group__options { flex-wrap: wrap; }
.folio .folio-college-school-switch > small { color: var(--f-dim); font-size: 11.5px; }
.folio .folio-college-cost-form > .folio-editor__fields { margin: 18px 0; }
.folio .folio-college-cost-choices { border-top: 1px solid var(--f-line); }
.folio .folio-college-cost-choice { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(260px, 1.3fr); gap: 16px 24px; padding: 18px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-cost-choice.is-note > p { margin: 0; align-self: center; color: var(--f-muted); font-size: 12.5px; line-height: 1.5; }
.folio .folio-college-cost-choice header span,
.folio .folio-college-cost-choice header strong { display: block; }
.folio .folio-college-cost-choice header span { color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; }
.folio .folio-college-cost-choice header strong { margin-top: 6px; font-size: 13px; }
.folio .folio-college-cost-choice details { grid-column: 1 / -1; }
.folio .folio-college-source-options { border-top: 1px solid var(--f-line); }
.folio .folio-college-source-options article { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-source-options strong,
.folio .folio-college-source-options span,
.folio .folio-college-source-options small { display: block; }
.folio .folio-college-source-options span { margin-top: 3px; font-size: 12px; }
.folio .folio-college-source-options small { margin-top: 3px; color: var(--f-dim); font-size: 10px; }
.folio .folio-college-manual-cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 16px; padding: 16px; border-left: 3px solid var(--f-gold); background: var(--f-quiet); }
.folio .folio-college-manual-cost > p { grid-column: 1 / -1; margin: 0; color: var(--f-muted); font-size: 12px; }
.folio .folio-college-manual-cost label > span,
.folio .folio-college-account__amounts label > span,
.folio .folio-college-account details label > span { display: block; margin-bottom: 5px; color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .folio-college-advanced { margin-top: 16px; border-top: 1px solid var(--f-line); }
.folio .folio-college-manual-cost label > span em { margin-left: 4px; color: var(--f-muted); font-style: normal; font-weight: 400; letter-spacing: .04em; text-transform: none; }
.folio .folio-college-advanced fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 16px 0 0; padding: 14px; border: 1px solid var(--f-line); }
.folio .folio-college-advanced fieldset small { color: var(--f-muted); font-size: 12px; }
.folio .folio-college-advanced legend { color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); text-transform: uppercase; }

.folio .folio-college-target { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .65fr); gap: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-target h3 { margin: 6px 0; font: 500 22px/1.2 var(--f-font-display); }
.folio .folio-college-target p:not(.folio-eyebrow) { color: var(--f-muted); }
.folio .folio-college-target > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.folio .folio-college-npc { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-npc > span { color: var(--f-dim); font: 600 9px/1.5 var(--f-font-mono); text-transform: uppercase; }
.folio .folio-college-aid-group { padding-top: 20px; }
.folio .folio-college-aid-group > header { display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.folio .folio-college-aid-group h3 { margin: 0; font: 500 16px/1.3 var(--f-font-ui); }
.folio .folio-college-aid-group header p { margin: 4px 0 0; color: var(--f-muted); font-size: 12px; }
.folio .folio-college-aid-group > div { margin-top: 12px; border-top: 1px solid var(--f-line); }
.folio .folio-college-aid-row { display: grid; grid-template-columns: 1.2fr 1.4fr 100px 110px 110px; gap: 9px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-aid-field > span { display: block; margin-bottom: 5px; color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .folio-college-aid-field > .folio-input { width: 100%; }
.folio .folio-college-aid-row details { grid-column: 1 / -2; }
.folio .folio-college-aid-row details[open] { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 9px; }
.folio .folio-college-aid-row details summary { grid-column: 1 / -1; }

.folio .folio-college-account-list { border-top: 1px solid var(--f-line); }
.folio .folio-college-account { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, .8fr); gap: 16px 24px; padding: 17px 0; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-account__select { display: flex; gap: 10px; align-items: flex-start; }
.folio .folio-college-account__select strong,
.folio .folio-college-account__select small { display: block; }
.folio .folio-college-account__select small { margin-top: 4px; color: var(--f-muted); }
.folio .folio-college-account__amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.folio .folio-college-account__amounts label > small { display: block; margin-top: 5px; color: var(--f-dim); font: 400 11px/1.35 var(--f-font-ui); font-variant-numeric: tabular-nums; }
.folio .folio-college-account__shared { grid-column: 1 / -1; margin: 0; padding: 9px 12px; border-radius: 7px; background: var(--f-quiet); color: var(--f-muted); font-size: 12px; line-height: 1.45; }
.folio .folio-college-account details { grid-column: 1 / -1; }
.folio .folio-college-account details > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.folio .folio-college-account details > p { color: var(--f-muted); font-size: 11px; }

.folio .folio-college-review-form > section { padding-bottom: 24px; border-bottom: 1px solid var(--f-line); }
.folio .folio-college-review-form > section + section { padding-top: 24px; }
.folio .folio-college-review-form h3 { margin: 6px 0 16px; font: 500 22px/1.2 var(--f-font-display); }
.folio .folio-college-primary-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.folio .folio-college-primary-choices label { display: flex; gap: 9px; padding: 13px; border: 1px solid var(--f-line); border-radius: 8px; }
.folio .folio-college-primary-choices strong,
.folio .folio-college-primary-choices small { display: block; }
.folio .folio-college-primary-choices small { margin-top: 4px; color: var(--f-muted); }
.folio .folio-college-contrib-field { margin-top: 18px; }
.folio .folio-college-confirm { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 14px; border-left: 3px solid var(--f-accent); background: var(--f-green-soft); }
.folio .folio-college-confirm strong,
.folio .folio-college-confirm small { display: block; }
.folio .folio-college-confirm small { margin-top: 4px; color: var(--f-muted); }
.folio .folio-college-percent { position: relative; }
.folio .folio-college-percent .folio-input { padding-right: 30px; }
.folio .folio-college-percent span { position: absolute; right: 11px; top: 12px; color: var(--f-dim); }

.folio .folio-college-contribution-editor { display: grid; gap: 16px; }
.folio .folio-college-modal .folio-modal__foot .spacer { flex: 1; }


/* ==========================================================================
   STUDENTS, SHARED ACCOUNTS AND POLICIES
   ========================================================================== */

/* One tab per student with an active plan. */
.folio .folio-college-students { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--f-line); border-radius: 10px; background: var(--f-inset); }
.folio .folio-college-student { min-height: 30px; padding: 5px 14px; border: 0; border-radius: 7px; background: transparent; color: var(--f-muted); font: 550 12.5px/1 var(--f-font-ui); cursor: pointer; }
.folio .folio-college-student:hover { color: var(--f-ink); }
.folio .folio-college-student.is-current { background: var(--f-paper); color: var(--f-ink); box-shadow: 0 1px 5px rgba(51, 41, 29, .1); }
.folio .folio-college-student:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; }

.folio .folio-college-funding { display: grid; gap: 26px; }
.folio .folio-college-funding__group > header h3 { margin: 4px 0 6px; font: 500 20px/1.2 var(--f-font-display); }
.folio .folio-college-funding__group > header p:not(.folio-eyebrow) { max-width: 70ch; margin: 0 0 12px; color: var(--f-muted); font-size: 12.5px; line-height: 1.5; }
.folio .folio-college-panel .folio-college-account { grid-template-columns: 1fr; }
.folio .folio-college-policy-list { border-top: 1px solid var(--f-line); }
.folio .folio-college-policy__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.folio .folio-college-policy__facts dt { color: var(--f-dim); font: 600 9px/1 var(--f-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.folio .folio-college-policy__facts dd { margin: 5px 0 0; font: 550 13px/1.3 var(--f-font-ui); font-variant-numeric: tabular-nums; }
.folio .folio-college-policy__facts dd small { color: var(--f-dim); font-weight: 400; }

/* The reconciliation: two bars per account in each student's colour. */
.folio .folio-college-shares { padding-top: 10px; }
.folio .folio-college-shares__finding { max-width: 78ch; margin: 0 0 18px; color: var(--f-muted); font: 400 14px/1.55 var(--f-font-ui); }
.folio .folio-college-shares__finding > span { color: var(--f-ink); font: 400 19px/1.35 var(--f-font-display); letter-spacing: -.01em; }
.folio .folio-college-shares__list { display: grid; gap: 12px; }
.folio .folio-college-shares__row { padding: 18px 20px; border: 1px solid var(--f-line); border-radius: var(--f-radius-lg); background: var(--f-paper); box-shadow: var(--f-shadow); }
.folio .folio-college-shares__row > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.folio .folio-college-shares__row > header strong { display: block; font: 400 18px/1.2 var(--f-font-display); }
.folio .folio-college-shares__row > header small { display: block; margin-top: 4px; color: var(--f-dim); font-size: 12px; }
.folio .folio-college-shares__bars { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px 16px; align-items: start; }
.folio .folio-college-shares__bars > p { margin: 3px 0 0; color: var(--f-dim); font: 500 9px/1.2 var(--f-font-mono); letter-spacing: .13em; text-transform: uppercase; }
.folio .folio-college-shares__bars > p.folio-college-shares__none { margin: 0; color: var(--f-faint); font: 400 12px/1.4 var(--f-font-ui); letter-spacing: 0; text-transform: none; }
.folio .folio-college-share-bar__track { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: var(--f-inset); }
.folio .folio-college-share-bar__track i { display: block; height: 100%; background: var(--college-tone); }
.folio .folio-college-share-bar__track i + i { box-shadow: inset 2px 0 0 var(--f-paper); }
.folio .folio-college-share-bar__track i.is-free { background: repeating-linear-gradient(45deg, rgba(154, 144, 129, .45) 0 2px, var(--f-t-grey) 2px 5px); }
.folio .folio-college-share-bar__labels { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 7px; color: var(--f-muted); font: 400 11.5px/1.4 var(--f-font-ui); font-variant-numeric: tabular-nums; }
.folio .folio-college-share-bar__labels span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--college-tone); vertical-align: 0; }
.folio .folio-college-share-bar__labels span.is-free::before { background: var(--f-grey); }
.folio .folio-college-share-bar__labels b { color: var(--f-ink); font-weight: 600; }
.folio :is(.folio-college-share-bar__track i, .folio-college-share-bar__labels span).is-tone-0 { --college-tone: var(--f-accent); }
.folio :is(.folio-college-share-bar__track i, .folio-college-share-bar__labels span).is-tone-1 { --college-tone: var(--f-gold); }
.folio :is(.folio-college-share-bar__track i, .folio-college-share-bar__labels span).is-tone-2 { --college-tone: var(--f-clay); }
.folio :is(.folio-college-share-bar__track i, .folio-college-share-bar__labels span).is-tone-3 { --college-tone: var(--f-sage); }
.folio :is(.folio-college-share-bar__track i, .folio-college-share-bar__labels span).is-tone-4 { --college-tone: var(--f-teal); }

/* The split editor. */
.folio .folio-college-split { display: grid; gap: 18px; }
.folio .folio-college-split__table { width: 100%; border-collapse: collapse; font: 400 13px/1.35 var(--f-font-ui); }
.folio .folio-college-split__table :is(th, td) { padding: 10px 8px; border-bottom: 1px solid var(--f-line); text-align: left; vertical-align: top; }
.folio .folio-college-split__table thead th { color: var(--f-dim); font: 500 9px/1.2 var(--f-font-mono); letter-spacing: .12em; text-transform: uppercase; }
.folio .folio-college-split__table tbody th { padding-top: 19px; font: 600 13.5px/1.3 var(--f-font-ui); }
.folio .folio-college-split__table td small { display: block; margin-top: 5px; color: var(--f-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.folio .folio-college-split__table tfoot :is(th, td) { border-bottom: 0; color: var(--f-muted); font: 500 12px/1.35 var(--f-font-ui); font-variant-numeric: tabular-nums; }
.folio .folio-college-split.is-over .folio-college-split__table tfoot :is(th, td) { color: var(--f-red); }
.folio .folio-college-split__error { margin: 0; color: var(--f-red); font-size: 12.5px; }

/* ==========================================================================
   ASSUMPTIONS · profiles in the editor, tiles on the page
   ========================================================================== */

.folio .folio-college-profile__intro { max-width: 72ch; margin: -6px 0 16px; color: var(--f-muted); font-size: 12.5px; line-height: 1.5; }
.folio .folio-college-profiles { display: grid; gap: 12px; }
.folio .folio-college-profile { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--f-line); border-radius: var(--f-radius); background: var(--f-paper); }
.folio .folio-college-profile__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.folio .folio-college-profile__label { font: 600 13.5px/1.3 var(--f-font-ui); }
.folio .folio-college-profile__head .folio-college-percent { width: 112px; }
.folio .folio-college-profile .folio-choice-group__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.folio .folio-college-profile .folio-choice-group__options { flex-wrap: wrap; }
.folio .folio-college-profile .folio-choice { min-height: 30px; padding: 6px 11px; font-size: 12px; }
.folio .folio-college-profile__why { padding: 10px 12px; border-radius: 7px; background: var(--f-quiet); }
.folio .folio-college-profile__why[hidden] { display: none; }
.folio .folio-college-profile__why p { margin: 0; color: var(--f-muted); font-size: 12px; line-height: 1.5; }
.folio .folio-college-profile__why p + p { margin-top: 4px; }
.folio .folio-college-profile__why strong { color: var(--f-ink); font-weight: 600; }
.folio .folio-college-profile__risk { color: var(--f-bronze) !important; }
.folio .folio-college-profile__sources { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.folio .folio-college-tag { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid var(--f-line-strong); border-radius: 999px; background: var(--f-paper); color: var(--f-dim); font: 600 8.5px/1.2 var(--f-font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.folio .folio-college-tag.is-plan { border-color: var(--f-accent); background: var(--f-accent-soft); color: var(--f-accent); }
.folio .folio-college-assume { margin-top: 18px; }
.folio .folio-college-assume > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.folio .folio-college-assume__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--f-line); border-radius: var(--f-radius-lg); background: var(--f-line); }
.folio .folio-college-assume__tile { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 16px 18px 17px; background: var(--f-paper); }
.folio .folio-college-assume__tile.is-returns { background: var(--f-t-sage); }
.folio .folio-college-assume__name { margin: 0; color: var(--f-dim); font: 500 9px/1.3 var(--f-font-mono); letter-spacing: .13em; text-transform: uppercase; }
.folio .folio-college-assume__rate { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--f-ink); font: 400 28px/1 var(--f-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.folio .folio-college-assume__scale { position: relative; height: 26px; margin: 6px 4px 2px; }
.folio .folio-college-assume__track { position: absolute; top: 6px; right: 0; left: 0; height: 2px; border-radius: 2px; background: var(--f-line-strong); }
.folio .folio-college-assume__scale i { position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px; border: 1.5px solid var(--f-paper); border-radius: 50%; background: var(--f-line-strong); }
.folio .folio-college-assume__scale i.is-on { top: 1px; width: 12px; height: 12px; margin-left: -6px; background: var(--f-ink); box-shadow: 0 0 0 2px var(--f-paper); }
.folio .folio-college-assume__scale small { position: absolute; top: 14px; color: var(--f-faint); font: 500 9.5px/1 var(--f-font-mono); }
.folio .folio-college-assume__scale small.is-low { left: 0; }
.folio .folio-college-assume__scale small.is-high { right: 0; }
.folio .folio-college-assume__why { margin: 0; color: var(--f-muted); font: 400 11.5px/1.4 var(--f-font-ui); }
.folio .folio-college-assume__risk { color: var(--f-bronze); font: 500 11px/1.35 var(--f-font-ui); }

/* ==========================================================================
   RANGE · the simulation, as a fan and a three-profile strip
   ========================================================================== */

.folio .folio-college-range {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.5fr) minmax(260px, 1fr);
    gap: 0;
    margin-top: 18px;
    overflow: hidden;
    border-radius: var(--f-radius-lg);
    background: var(--f-forest);
    color: var(--f-on-dark);
    box-shadow: 0 1px 2px rgba(20, 28, 22, .2), 0 22px 44px rgba(20, 28, 22, .14);
}
.folio .folio-college-range > div { min-width: 0; padding: 22px 22px 20px; }
.folio .folio-college-range > div + div { border-left: 1px solid rgba(240, 232, 216, .12); }
.folio .folio-college-range .folio-eyebrow { color: #8fc4a4; }
.folio .folio-college-range__figure { margin: 10px 0 0; color: var(--f-on-dark); font: 400 clamp(44px, 5vw, 60px)/.95 var(--f-font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.folio .folio-college-range__label { margin: 8px 0 0; color: var(--f-on-dark); font: 500 13px/1.4 var(--f-font-ui); }
.folio .folio-college-range__sub { margin: 10px 0 0; color: var(--f-on-dark-dim); font-size: 12.5px; line-height: 1.5; }
.folio .folio-college-range__method { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(240, 232, 216, .12); color: rgba(240, 232, 216, .5); font-size: 11px; line-height: 1.5; }
.folio .folio-college-range__fan { display: block; width: 100%; height: auto; }
.folio .folio-college-range .college-chart__grid { stroke: rgba(240, 232, 216, .1); }
.folio .folio-college-range .college-chart__axis,
.folio .folio-college-range .college-chart__year { fill: rgba(240, 232, 216, .5); font: 10.5px var(--f-font-mono); }
.folio .college-range__outer { fill: rgba(95, 176, 143, .22); }
.folio .college-range__inner { fill: rgba(95, 176, 143, .42); }
.folio .college-range__median { fill: none; stroke: #9fd1b0; stroke-width: 2; }
.folio .college-range__target { stroke: var(--f-gold-bright); stroke-width: 1.5; stroke-dasharray: 6 5; }
.folio .college-range__target-label { fill: var(--f-gold-bright); font: 600 10.5px var(--f-font-mono); }
.folio .college-range__end { fill: rgba(240, 232, 216, .7); font: 600 10.5px var(--f-font-mono); }
.folio .folio-college-range__key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--f-on-dark-dim); font-size: 11px; }
.folio .folio-college-range__key i { display: inline-block; width: 12px; height: 8px; margin-right: 6px; border-radius: 2px; vertical-align: 0; }
.folio .folio-college-range__key .is-outer i { background: rgba(95, 176, 143, .3); }
.folio .folio-college-range__key .is-inner i { background: rgba(95, 176, 143, .6); }
.folio .folio-college-range__key .is-median i { height: 2px; background: #9fd1b0; vertical-align: 3px; }
.folio .folio-college-range__compare-title { margin: 0 0 12px; color: #8fc4a4; font: 500 9.5px/1.3 var(--f-font-mono); letter-spacing: .14em; text-transform: uppercase; }
.folio .folio-college-range__compare ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.folio .folio-college-range__compare li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 8px 10px; border-radius: 8px; }
.folio .folio-college-range__compare li.is-current { background: rgba(240, 232, 216, .08); box-shadow: inset 0 0 0 1px rgba(240, 232, 216, .14); }
.folio .folio-college-range__name { grid-column: 1; }
.folio .folio-college-range__name b { display: block; color: var(--f-on-dark); font: 600 12.5px/1.2 var(--f-font-ui); }
.folio .folio-college-range__name small { display: block; margin-top: 2px; color: rgba(240, 232, 216, .5); font-size: 10.5px; }
.folio .folio-college-range__odds { grid-column: 2; grid-row: 1 / span 2; color: var(--f-on-dark); font: 400 22px/1 var(--f-font-display); font-variant-numeric: tabular-nums; }
.folio .folio-college-range__track { position: relative; grid-column: 1; height: 10px; border-radius: 999px; background: rgba(240, 232, 216, .08); }
.folio .folio-college-range__span { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: rgba(95, 176, 143, .55); }
.folio .folio-college-range__mid { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #e6ece8; }
.folio .folio-college-range__goal { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--f-gold-bright); }
.folio .folio-college-range__compare-foot { margin: 12px 0 0; color: rgba(240, 232, 216, .45); font-size: 10.5px; line-height: 1.45; }
.folio .folio-college-range .folio-college-table-note { color: var(--f-on-dark-dim); }

/* ==========================================================================
   RESPONSIVE · checked at 1440, 1080, 860 and 620
   ========================================================================== */

@media (max-width: 1120px) {
    .folio .folio-college-range { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .folio .folio-college-range__plot { grid-column: 1 / -1; grid-row: 2; border-left: 0 !important; border-top: 1px solid rgba(240, 232, 216, .12); }
    .folio .folio-college-assume__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .folio .folio-college-chart__body { grid-template-columns: minmax(0, 1fr); }
    .folio .folio-college-readout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 4px 28px; border-top: 1px solid var(--f-line); border-left: 0; }
    .folio .folio-college-readout__item:not([hidden]) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 0 28px; align-items: start; grid-column: 1 / -1; }
    .folio .folio-college-readout__item > dl { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
    .folio .folio-college-next__grid { grid-template-columns: minmax(0, 1fr); }
    .folio .folio-college-evidence__body dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .folio .folio-college-wizard { grid-template-columns: 184px minmax(0, 1fr); }
    .folio .folio-college-school { grid-template-columns: 130px minmax(180px, 1fr) auto; }
    .folio .folio-college-school > .advisor-button { grid-column: 3; }
    .folio .folio-college-school__coverage { grid-column: 2; }
    .folio .folio-college-aid-row { grid-template-columns: 1fr 1.2fr 92px 105px; }
    .folio .folio-college-aid-field--status { grid-column: 1; }
    .folio .folio-college-target > div:last-child { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
}

@media (max-width: 860px) {
    .folio .folio-college-account__amounts { grid-template-columns: 1fr 1fr; }
    .folio .folio-college-shares__bars { grid-template-columns: 1fr; gap: 6px; }
    .folio .folio-college-section .folio-sec__title-row > .end { margin-left: 0; }
    .folio .folio-college-start { grid-template-columns: 1fr; }
    .folio .folio-college-start__form { width: 100%; }
    .folio .folio-college-wizard { display: block; }
    .folio .folio-college-wizard > .folio-wizard__head { border-right: 0; border-bottom: 1px solid var(--f-line); border-radius: var(--f-radius-lg) var(--f-radius-lg) 0 0; }
    .folio .folio-college-wizard .folio-wizard__steps { flex-direction: row; overflow-x: auto; gap: 18px; }
    .folio .folio-college-wizard .folio-step { flex: 0 0 150px; }
    .folio .folio-college-wizard .folio-step::before { display: none; }
    .folio .folio-college-search { grid-template-columns: minmax(180px, 1fr) 80px auto; }
    .folio .folio-college-search > :last-child { grid-column: 1 / -1; justify-self: start; }
    .folio .folio-college-school { grid-template-columns: 120px minmax(0, 1fr) auto; }
    .folio .folio-college-cost-choice { grid-template-columns: 1fr; }
    .folio .folio-college-cost-choice details { grid-column: 1; }
    .folio .folio-college-target { grid-template-columns: 1fr; }
    .folio .folio-college-aid-row { grid-template-columns: 1fr 1fr; }
    .folio .folio-college-aid-row details { grid-column: 1 / -1; }
    .folio .folio-college-account { grid-template-columns: 1fr; }
    .folio .folio-college-account details { grid-column: 1; }
}

@media (max-width: 620px) {
    .folio .folio-college-range { grid-template-columns: 1fr; }
    .folio .folio-college-range > div + div { border-left: 0; border-top: 1px solid rgba(240, 232, 216, .12); }
    .folio .folio-college-assume__grid { grid-template-columns: 1fr; }
    .folio .folio-college-policy__facts { grid-template-columns: 1fr 1fr; }
    .folio .folio-college-students { flex-wrap: wrap; }
    .folio .folio-college-tools__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .folio .folio-college-tool { max-width: none; }
    .folio .folio-college-chart__plot { padding: 16px 6px 14px 8px; }
    .folio .folio-college-chart__legend { margin-left: 8px; }
    .folio .folio-college-readout,
    .folio .folio-college-readout__item:not([hidden]) { display: block; }
    .folio .folio-college-readout__item > dl { margin-top: 16px; }
    .folio .folio-college-section .folio-sec__title-row > .end .folio-choice-group { grid-auto-flow: row; }
    .folio .folio-college-compare__finding > span { font-size: 17px; }
    .folio .folio-college-evidence__body dl { grid-template-columns: 1fr 1fr; }
    .folio .folio-college-start__story ol { grid-template-columns: 1fr; }
    .folio .folio-college-plan-controls { align-items: stretch; flex-direction: column; }
    .folio .folio-college-plan-picker { align-items: stretch; flex-direction: column; }
    .folio .folio-college-plan-picker .folio-input { width: 100%; }
    .folio .folio-college-actions li { grid-template-columns: 32px minmax(0, 1fr); }
    .folio .folio-college-actions li .advisor-button { grid-column: 2; justify-self: start; }
    .folio .folio-college-evidence__body li,
    .folio .folio-college-transactions article,
    .folio .folio-college-footer { align-items: flex-start; flex-direction: column; }
    .folio .folio-college-wizard > .folio-wizard__body { padding: 12px; }
    .folio .folio-college-wizard__foot { padding-inline: 12px; }
    .folio .folio-college-save-state { display: none; }
    .folio .folio-college-student-context small { flex-basis: 100%; margin-left: 0; }
    .folio .folio-college-search,
    .folio .folio-college-manual { grid-template-columns: 1fr; }
    .folio .folio-college-search > :last-child { grid-column: auto; }
    .folio .folio-college-search-results article { align-items: flex-start; flex-direction: column; }
    .folio .folio-college-search-results article > div:last-child { align-items: flex-start; flex-direction: column; }
    .folio .folio-college-school { grid-template-columns: 1fr auto; }
    .folio .folio-college-school__primary { grid-column: 1; }
    .folio .folio-college-school > div:nth-of-type(1) { grid-column: 1 / -1; }
    .folio .folio-college-school__coverage { grid-column: 1; }
    .folio .folio-college-school-progress { grid-template-columns: 1fr; }
    .folio .folio-college-panel .folio-editor__fields { grid-template-columns: 1fr; }
    .folio .folio-college-manual-cost,
    .folio .folio-college-target > div:last-child,
    .folio .folio-college-aid-row,
    .folio .folio-college-account__amounts,
    .folio .folio-college-account details > div { grid-template-columns: 1fr; }
    .folio .folio-college-aid-row details[open] { grid-template-columns: 1fr; }
    .folio .folio-college-aid-row details summary { grid-column: 1; }
}

@media (max-height: 760px) {
    .folio .folio-route.folio-college { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .folio .folio-college-builder { padding-bottom: 24px; }
    .folio .folio-college-wizard > .folio-wizard__body { max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .folio .folio-college * { scroll-behavior: auto !important; transition: none !important; }
    .folio .folio-college-notice::after { animation: none !important; }
}