/* Prism · Spectrum: interior page facets and polish. Tokens live in spectrum.css.
   See docs/prism-spectrum.md, "Interior pages: facets". */

.cq-entry,.cq-home-entry{max-width:var(--prism-width,1200px);margin:1.5rem auto 2.5rem;padding:1.4rem 1.8rem;border:1px solid var(--separator);border-radius:18px;background:var(--surface)}
.cq-entry h2,.cq-home-entry h2{margin:.3rem 0;font-size:1.45rem;letter-spacing:-.03em}
.cq-entry p,.cq-home-entry p{color:var(--text-secondary)}
.cq-home-entry{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin:3rem auto}
@media(max-width:740px){.cq-home-entry{display:block}}
@media(max-width:560px){.cq-entry,.cq-home-entry{margin-inline:1rem}}

/* Facet: a 44px optical glyph, a mono figure label and one 40px spectral hairline above each interior hero.
   Colour only ever sits next to its word, and thin strokes use the ink hues (>=4.5:1 on #f5f5f7). */
.sp-facet{display:flex;align-items:center;gap:.9rem;margin:0 0 1.25rem;color:#424247}
.sp-facet-glyph{flex:none;display:block;width:44px;height:44px;overflow:visible}
.sp-facet-meta{display:grid;gap:.55rem;min-width:0}
.sp-facet .sp-label{margin:0;color:var(--hue-ink,var(--text-secondary));white-space:nowrap}
.sp-facet .sp-lam{text-transform:none}
.sp-facet-rule{display:block;width:40px;height:2px;border-radius:1px;background:var(--sp-spectrum)}
.sp-facet-glyph .sp-ray{stroke:var(--hue-ink,currentColor)}
.sp-facet-glyph .sp-dot{fill:var(--hue-ink,currentColor);stroke:none}
.sp-facet-glyph .sp-ink{fill:currentColor;stroke:none}
.sp-facet-glyph .sp-faint{opacity:.5}
.sp-facet-glyph .sp-r-courses{stroke:var(--sp-courses-ink)}
.sp-facet-glyph .sp-r-places{stroke:var(--sp-places-ink)}
.sp-facet-glyph .sp-r-careers{stroke:var(--sp-careers-ink)}
.sp-facet-glyph .sp-r-money{stroke:var(--sp-money-ink)}
.leaderboard-intro .sp-facet{justify-content:center}
.leaderboard-intro .prism-page-links{justify-content:center}
.sp-facet-bar{box-sizing:border-box;max-width:1200px;margin:0 auto;padding:1.5rem 2rem 0}
.sp-facet-bar .sp-facet{margin:0}
main:has(>#plannerDirectory:not([hidden])) .sp-facet-bar{max-width:calc(var(--prism-width) + var(--prism-gutter)*2);padding-inline:var(--prism-gutter)}
.public-site .sp-facet-bar~:is(.public-section,.public-workspace){padding-top:1.5rem}
.money-hero .sp-facet{margin-bottom:1.5rem}

/* Cards hold outlined actions. The one filled primary belongs to the page, not to each card. */
.public-site :where(.explore-card,.course-result,.directory-card) .btn--primary{background:transparent;border-color:var(--separator-strong);color:var(--text)}
.public-site :where(.explore-card,.course-result,.directory-card) .btn--primary:hover{background:#eeeef2;border-color:var(--separator-strong)}


/* Money: close the gap between the hero and the scenario, and keep the first-year result in view while the long form scrolls. */
.public-site .money-hero{padding-top:4.5rem;padding-bottom:0}
.public-site .money-workspace{padding-top:2rem}
@media(min-width:1001px){
  .public-site .finance-summary{position:sticky;top:96px;align-self:start;max-height:calc(100dvh - 112px);overflow-y:auto;scrollbar-width:thin}
}

@media(max-width:700px){.sp-facet-bar{padding:1.25rem 1.25rem 0}}
@media(forced-colors:active){
  .sp-facet-glyph{forced-color-adjust:none;color:CanvasText}
  .sp-facet-glyph :is(.sp-ray,.sp-r-courses,.sp-r-places,.sp-r-careers,.sp-r-money){stroke:LinkText}
  .sp-facet-glyph .sp-dot{fill:LinkText}
  .sp-facet-glyph [stroke^="url"]{stroke:LinkText}
  .sp-facet-glyph [fill^="url"]{fill:Canvas}
  .sp-facet .sp-label{color:CanvasText}
  .sp-facet-rule{background:CanvasText;forced-color-adjust:none}
  .public-site :where(.explore-card,.course-result,.directory-card) .btn--primary{border:1px solid ButtonText;color:ButtonText}
}

/* ── Phase 2 · discovery ── */
/* Instrument pills: a count, a date or a source badge is a small reading in a mono hairline pill. */
.public-site :is(.explore-group-head>span,.leaderboard-badge,.course-badge){display:inline-flex;align-items:center;min-height:0;padding:.38rem .7rem;border:1px solid var(--sp-glass-line);border-radius:999px;background:#fff;box-shadow:inset 0 1px 0 #fff;color:#424247;font:500 .68rem/1.2 var(--sp-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Explore: the starting point is a lit panel. Panels that clip their content keep the edge inside the border. */
.public-site :is(.refraction,.leaderboard-panel).sp-panel::before{top:0}
.public-site .refraction.sp-panel{border-radius:24px}
/* Start tabs: quiet glass, and the chosen one is a white glass pill with a spectral bottom hairline. */
.public-site .refraction-starts button{position:relative;border:1px solid var(--sp-glass-line);background:rgba(255,255,255,.55);color:#424247}
.public-site .refraction-starts button[aria-pressed=true]{background:var(--sp-glass);border-color:var(--sp-glass-line);box-shadow:var(--sp-glass-shadow),0 1px 3px rgba(29,29,31,.08);color:#1d1d1f;font-weight:600}
.public-site .refraction-starts button[aria-pressed=true]::after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--sp-spectrum);pointer-events:none}
@media(hover:hover) and (pointer:fine){.public-site .refraction-starts button:not([aria-pressed=true]):hover{border-color:rgba(29,29,31,.28);background:#fff}}
/* Trail: breadcrumbs are readings, so they set in mono. */
.public-site .refraction-trail{padding-block:8px}
.public-site .refraction-trail button{min-height:44px;font:400 .72rem/1.4 var(--sp-mono);letter-spacing:.02em}
.public-site .refraction-trail button[aria-current]{font-weight:600}
.public-site .refraction-trail>span{font-family:var(--sp-mono)}
/* The light source: one neutral beam that splits into the four directions (courses, places, careers, money). Decorative. */
.public-site .refraction-light{width:120px;height:24px;margin-bottom:24px;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' fill='none' stroke-linecap='round'%3E%3Cpath d='M1 12H46' stroke='%23424247' stroke-width='2'/%3E%3Ccircle cx='46' cy='12' r='2' fill='%23424247'/%3E%3Cpath d='M46 12C60 12 72 3 119 3' stroke='%23ff6b4a' stroke-width='1.8'/%3E%3Cpath d='M46 12C60 12 74 8.5 119 9' stroke='%23ffb340' stroke-width='1.8'/%3E%3Cpath d='M46 12C60 12 74 15.5 119 15' stroke='%233ccf7e' stroke-width='1.8'/%3E%3Cpath d='M46 12C60 12 72 21 119 21' stroke='%239a86ff' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat left center/100% 100%}
.public-site .refraction-origin::after{display:none}
/* Branches: the arbitrary blue, violet and ochre rules are gone, because colour now carries meaning. A hue tick marks only rows that map to a direction. */
.public-site .refraction-branch,.public-site .refraction-branch[data-branch-tone]{border-color:rgba(29,29,31,.14)}
.public-site .refraction-branch li[data-hue]>button{position:relative;padding-left:20px}
.public-site .refraction-branch li[data-hue]>button::before{content:'';position:absolute;left:4px;top:50%;width:3px;height:16px;margin-top:-8px;border-radius:1px;background:var(--hue-ink)}

/* Courses: records, one action row, and instrument readouts. */
.public-site .course-explorer.sp-panel{border-radius:24px}
.public-site .course-result.sp-record{display:flex;flex-wrap:wrap;align-items:center;gap:14px 12px;margin:0 0 16px;padding:26px 28px 24px;border-radius:18px}
.public-site .course-result.sp-record>*{min-width:0;margin:0}
.public-site .course-result.sp-record>:is(.course-result-head,details,.explore-small){flex:1 1 100%}
/* The late-mounted connections block lends its children to the card's own row, so Save, Compare and the question sit together and wrap on small screens. */
.public-site .course-result .course-connections{display:contents}
.public-site .course-result .course-connections>.explore-actions{display:contents}
.public-site .course-result .course-connections>:is(details,.explore-small){flex:1 1 100%;margin:0}
.public-site .course-result.sp-record>.btn,.public-site .course-result .course-connections>.explore-actions>.btn{min-height:44px;padding:9px 14px;font-size:12px}
.public-site .course-result .uni-text-button{min-height:44px;font-size:12px}
@media(max-width:700px){.public-site .course-result.sp-record{padding:22px 18px 20px}}
.public-site .course-metrics:not(.course-metrics--compact) .course-metric{padding:18px;border:1px solid var(--sp-glass-line);border-radius:14px;background:linear-gradient(165deg,#f4f5f9,#f9fafc);box-shadow:inset 0 1px 0 #fff}
.public-site .course-metrics:not(.course-metrics--compact) .course-metric h4{margin:0 0 14px;color:#424247;font:500 .68rem/1.5 var(--sp-mono);letter-spacing:.14em;text-transform:uppercase}
.public-site .course-cohort strong{font-weight:600;font-variant-numeric:tabular-nums}
.public-site .course-metrics:not(.course-metrics--compact) .course-cohort span{color:#424247;font:500 .7rem/1.5 var(--sp-mono);letter-spacing:.02em}
.public-site .course-source{font:500 .68rem/1.6 var(--sp-mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* Careers: subject chips are quiet glass, and the chosen subject takes the spectral selection. */
.public-site .career-subject-select{border:1px solid var(--sp-glass-line);border-radius:999px;background:rgba(255,255,255,.55);color:#424247;font-weight:500}
.public-site .career-subject-select[aria-pressed=true]{position:relative;border-color:var(--sp-glass-line);background:var(--sp-glass);box-shadow:var(--sp-glass-shadow),0 1px 3px rgba(29,29,31,.08);color:#1d1d1f;font-weight:600}
.public-site .career-subject-select[aria-pressed=true]::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--sp-spectrum);pointer-events:none}
.public-site [data-career-card]>small{font:500 .68rem/1.6 var(--sp-mono);letter-spacing:.02em}
.public-site [data-career-card]>h3{display:flex;align-items:center;gap:.5rem}
.public-site [data-career-card]>h3::before{content:'';flex:none;width:3px;height:12px;border-radius:1px;background:var(--sp-careers-ink)}

/* University: the overview is a stack of places records with a real gap between them. */
.public-site .university-overview{gap:20px;margin-bottom:20px}
.public-site [data-provider-courses]{margin-top:28px}

/* Leaderboard: the table is a lit panel, rows are places. */
.public-site .leaderboard-status{border-color:var(--sp-glass-line);background:linear-gradient(180deg,#f4f5f9,#f9fafc);box-shadow:inset 0 1px 0 #fff}
.public-site .leaderboard-rank{font:500 .95rem/1 var(--sp-mono);font-variant-numeric:tabular-nums;color:#626269}
.public-site .leaderboard-row[data-leading] .leaderboard-rank{color:#1d1d1f;font-weight:700}
.public-site .leaderboard-logo{position:relative;overflow:hidden;border:1px solid var(--sp-glass-line);background:linear-gradient(150deg,#fff,#eef0f5);box-shadow:inset 0 1px 0 #fff;color:#424247;font:600 1rem/1 var(--sp-mono);letter-spacing:.06em}
.public-site .leaderboard-logo::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--sp-places),var(--sp-places-ink))}
.public-site .leaderboard-logo--dark{border-color:rgba(255,255,255,.12);background:linear-gradient(150deg,#2d3a56,#202a40);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.public-site .leaderboard-score strong,.public-site .leaderboard-score small{font-variant-numeric:tabular-nums}
/* Spectrometer track: 10% ticks stand proud of a 4px track, an amber-to-ink fill and a 2px end cap. */
.public-site .leaderboard-bar{position:relative;height:4px;margin-top:12px;overflow:visible;border-radius:2px;background:#e6e7ed}
.public-site .leaderboard-bar::before{content:'';position:absolute;left:0;right:0;top:-3px;bottom:-3px;background:repeating-linear-gradient(90deg,rgba(29,29,31,.26) 0 1px,transparent 1px 10%);pointer-events:none}
.public-site .leaderboard-bar i{position:relative;z-index:1;border-radius:2px;background:linear-gradient(90deg,var(--sp-places),var(--sp-places-ink))}
.public-site .leaderboard-bar i::after{content:'';position:absolute;right:0;top:-3px;bottom:-3px;width:2px;border-radius:1px;background:var(--sp-places-ink)}

/* 404: a beam passes a prism and misses it, so nothing refracts and the screen stays empty. */
.public-site:has(.sp-offaxis-main){display:flex;flex-direction:column}
.public-site:has(.sp-offaxis-main)>.prism-shell-header{align-self:stretch;margin-inline:0}
.public-site .sp-offaxis-main{flex:1 0 auto;width:100%}
.public-site .sp-offaxis-main .hero-actions{justify-content:flex-start}
.sp-offaxis{display:grid;gap:.7rem;justify-items:start;margin:0 0 1.75rem;color:#424247}
.sp-offaxis .sp-facet-meta{gap:.55rem}
.sp-offaxis .sp-label{margin:0;color:var(--text-secondary);white-space:nowrap}
.sp-offaxis-art{display:block;width:280px;max-width:100%;height:auto;overflow:visible}
.sp-offaxis-art path{fill:none}
.sp-oa-glow{stroke:rgba(29,29,31,.09);stroke-width:8}
.sp-oa-beam{stroke:#1d1d1f;stroke-width:1.6}
.sp-oa-miss{stroke:rgba(29,29,31,.4);stroke-width:1.4;stroke-dasharray:2 5}
.sp-offaxis-art .sp-oa-prism{fill:rgba(255,255,255,.75);stroke:rgba(29,29,31,.55);stroke-width:1.3}
.sp-oa-edge{stroke:#1d1d1f;stroke-width:1.7}
.sp-oa-screen{stroke:rgba(29,29,31,.14);stroke-width:4}
.sp-oa-landing{stroke:rgba(29,29,31,.4);stroke-width:1.2;stroke-dasharray:2 3}
.sp-oa-source{fill:#1d1d1f}

/* Privacy: the heading takes the shared display tracking. */
.public-site .privacy-content h1{letter-spacing:var(--sp-track-display)}

/* Search dialog: a result row lifts as quiet glass on hover and focus. The focus ring stays blue. */
.public-site .prism-search-result:hover{background:linear-gradient(165deg,#f4f6fa,#fff 70%);box-shadow:inset 0 0 0 1px var(--sp-glass-line),0 1px 2px rgba(29,29,31,.05);outline:0}
.public-site .prism-search-result:focus-visible{background:linear-gradient(165deg,#f4f6fa,#fff 70%);box-shadow:inset 0 0 0 1px var(--sp-glass-line),0 1px 2px rgba(29,29,31,.05);outline:2px solid #0066cc;outline-offset:-2px}

@media(forced-colors:active){
  .public-site .refraction-starts button[aria-pressed=true]::after,.public-site .career-subject-select[aria-pressed=true]::after{background:CanvasText;forced-color-adjust:none}
  .public-site .refraction-light{width:48px;height:14px;margin-top:10px;background:none;border-bottom:2px solid CanvasText}
  .public-site .refraction-branch li[data-hue]>button::before{background:CanvasText;forced-color-adjust:none}
  .public-site .course-result :is(.btn,.uni-text-button){border-color:ButtonText}
  .public-site .leaderboard-logo::after,.public-site .leaderboard-bar i,.public-site .leaderboard-bar i::after{forced-color-adjust:none;background:CanvasText}
  .public-site .leaderboard-bar{background:Canvas;border:1px solid CanvasText}
  .public-site .leaderboard-bar::before{forced-color-adjust:none;background:repeating-linear-gradient(90deg,CanvasText 0 1px,transparent 1px 10%)}
  .public-site [data-career-card]>h3::before{background:CanvasText;forced-color-adjust:none}
  .sp-offaxis-art{forced-color-adjust:none}
  .sp-offaxis-art :is(.sp-oa-beam,.sp-oa-miss,.sp-oa-edge,.sp-oa-landing){stroke:CanvasText}
  .sp-offaxis-art .sp-oa-prism{fill:Canvas;stroke:CanvasText}
  .sp-offaxis-art .sp-oa-source{fill:CanvasText}
  .sp-offaxis-art :is(.sp-oa-glow,.sp-oa-screen){display:none}
  .sp-offaxis .sp-label{color:CanvasText}
  .public-site .prism-search-result:hover{outline:1px solid Highlight}
  .public-site .prism-search-result:focus-visible{outline:2px solid Highlight}
}

/* Prism · Spectrum phase 2: Money, home calculator, Compare and My Plan.
   Merged into spectrum-pages.css at the end of phase 2. See docs/prism-spectrum.md.
   Loads last, but money.css and compare.css load after it on their own pages, so every rule here is
   prefixed with .public-site to outrank them. Phase 1 Money rules (hero gap, sticky summary) stay in
   spectrum-pages.css. */

/* ── Finance: Money page, home calculator and the My Plan budget share these components ── */

/* Section headings: the number is an instrument readout, with a money-ink tick before it. */
.public-site .finance-form legend{font:600 .78rem/1.4 var(--sp-mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--text)}
.public-site .finance-form legend::before{content:'';display:inline-block;width:3px;height:12px;margin-right:.55rem;vertical-align:-1px;border-radius:1px;background:var(--sp-money-ink)}
.public-site .finance-form .sp-step-name{font:600 .8125rem/1.4 var(--prism-sans);letter-spacing:0}

/* First-year summary: a glass record in the money hue. */
.public-site .finance-summary>.uni-eyebrow:first-child{display:inline-flex;align-items:center;gap:.5rem;font:500 .68rem/1.4 var(--sp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.public-site .finance-summary>.uni-eyebrow:first-child::before{content:'';flex:none;width:3px;height:12px;border-radius:1px;background:var(--hue-ink)}
.public-site .finance-summary .uni-cost-lines dd{font-variant-numeric:tabular-nums;text-align:right}

/* Spending against funding: a measured band. A 6px track, ticks every 10%, one shared scale. */
.public-site .finance-compare{display:grid;gap:.9rem;margin:1.25rem 0}
.public-site .finance-compare>div{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.15rem .75rem;padding-bottom:1.15rem}
.public-site .finance-compare span{font:500 .8125rem/1.4 var(--prism-sans);color:#424247}
.public-site .finance-compare b{font:600 .875rem/1.4 var(--prism-sans);font-variant-numeric:tabular-nums;color:var(--text)}
.public-site .finance-compare>div::before{content:'';position:absolute;left:0;right:0;bottom:8px;height:6px;border-radius:3px;background:#e8e8ef}
.public-site .finance-compare>div::after{content:'';position:absolute;left:0;right:0;bottom:0;height:5px;border-right:1px solid #8a8a94;background:repeating-linear-gradient(90deg,#8a8a94 0 1px,transparent 1px 10%)}
.public-site .finance-compare i{position:absolute;left:0;bottom:8px;height:6px;max-width:100%;border-radius:3px}
.public-site .finance-compare [data-series=spending] i{background:var(--sp-money-ink)}
.public-site .finance-compare [data-series=funding] i{background:repeating-linear-gradient(135deg,var(--sp-money-ink) 0 2px,transparent 2px 5px),rgba(154,134,255,.3);box-shadow:inset 0 0 0 1px var(--sp-money-ink)}

/* Remaining gap: glass with a money-ink top edge. The words carry the state, so both states look alike. */
.public-site :is(.finance-verdict,.finance-verdict--gap){position:relative;margin-top:1.5rem;padding:1.35rem 1.25rem 1.2rem;background:var(--sp-glass);border:1px solid var(--sp-glass-line);border-radius:14px;box-shadow:var(--sp-glass-shadow)}
.public-site .finance-verdict::before{content:'';position:absolute;left:18px;right:18px;top:-1px;height:2px;border-radius:0 0 2px 2px;background:var(--sp-money-ink)}
.public-site .finance-verdict>span{display:block;font:600 .875rem/1.4 var(--prism-sans);color:#424247}
.public-site .finance-verdict>strong{display:block;margin:.3rem 0 .35rem;font:600 clamp(1.9rem,3vw,2.3rem)/1.1 var(--prism-sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.public-site .finance-verdict>p{margin:0;font-size:.875rem;line-height:1.55;color:#424247}

/* KPI tiles: instrument readouts. */
.public-site .finance-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.public-site .finance-kpis>div{display:grid;align-content:space-between;gap:.5rem;padding:.9rem 1rem;background:var(--sp-glass);border:1px solid var(--sp-glass-line);border-radius:12px;box-shadow:var(--sp-glass-shadow)}
.public-site .finance-kpis .sp-label{display:block;margin:0;font-size:.64rem;letter-spacing:.12em;color:var(--text-secondary)}
.public-site .finance-kpis strong{display:block;margin:0;font:600 1.15rem/1.25 var(--prism-sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* Breakdown groups also appear on the home calculator, where money.css does not load. */
.public-site .finance-breakdown{margin:1.25rem 0;padding:1.1rem;border:1px solid var(--sp-glass-line);border-radius:14px;background:rgba(29,29,31,.025)}
.public-site .finance-breakdown details{margin-top:1rem}

/* Scenario chips: glass pills. Applied chips take spectral selection. */
.public-site .money-scenarios{gap:.6rem}
.public-site .money-scenarios .btn{position:relative;border-color:var(--sp-glass-line);border-radius:999px;background:var(--sp-glass);box-shadow:var(--sp-glass-shadow);color:#2b2b30}
.public-site .money-scenarios .btn[aria-pressed=true]{border-color:rgba(29,29,31,.2);background:#fff;color:#1d1d1f;font-weight:600;box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(29,29,31,.1)}
.public-site .money-scenarios .btn[aria-pressed=true]::after{content:'';position:absolute;left:16px;right:16px;bottom:-1px;height:2px;border-radius:2px;background:var(--sp-spectrum);pointer-events:none}

/* Named versions and comparison panels. */
.public-site .money-version-count{align-self:flex-start;width:fit-content;padding:.2rem .65rem;border:1px solid var(--sp-glass-line);border-radius:999px;background:var(--sp-glass);font-size:.75rem;line-height:1.5;color:#424247;white-space:nowrap}
.public-site .money-version-head .uni-eyebrow::before{content:'';display:inline-block;width:18px;height:2px;margin-right:.6rem;vertical-align:middle;border-radius:1px;background:var(--sp-spectrum)}
.public-site .money-compare-scroll thead th{background:var(--sp-glass)}
.public-site .money-compare-scroll td{font-variant-numeric:tabular-nums}
.public-site .money-save{border-radius:20px}

@media(max-width:1000px){
  .public-site .finance-summary{position:relative;top:auto;max-height:none}
}
@media(max-width:480px){
  .public-site .finance-kpis{grid-template-columns:1fr}
}

/* ── Compare ── */

/* Level tabs: a segmented glass track. The selected tab is a white pill with a spectral bottom hairline. */
.public-site .compare-modes{display:flex;flex-wrap:wrap;gap:.25rem;padding:.3rem;border:1px solid var(--sp-glass-line);border-radius:16px;background:rgba(29,29,31,.045)}
.public-site .compare-modes .btn{position:relative;min-height:44px;border:1px solid transparent;border-radius:12px;background:transparent;color:#424247;font-size:13px}
.public-site .compare-modes .btn[aria-pressed=true]{border-color:var(--sp-glass-line);background:#fff;color:#1d1d1f;font-weight:600;box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(29,29,31,.1)}
.public-site .compare-modes .btn[aria-pressed=true]::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--sp-spectrum);pointer-events:none}

/* Empty state: glass, with two spectra side by side above the heading. */
.public-site .compare-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 1.5rem;border-radius:20px}
.public-site .compare-empty .sp-empty-glyph{width:56px;height:56px;margin-bottom:1.1rem;color:#424247}
.public-site .compare-empty h2{margin:0 0 .6rem}
.public-site .compare-empty p{margin:0 0 1.5rem}

/* Column headers are glass records: places for universities, courses for courses, money for versions. */
.public-site .compare-matrix thead th.compare-col{padding:14px;background:#f6f6f9}
.public-site .compare-head{padding:1.15rem 1.1rem 1rem;border-radius:16px}
.public-site .compare-head .compare-choice-kind{display:flex;align-items:center;gap:.5rem;font:500 .66rem/1.4 var(--sp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.public-site .compare-head .compare-choice-kind::before{content:'';flex:none;width:3px;height:12px;border-radius:1px;background:var(--hue-ink)}

/* Rows that differ carry a 2px spectral tick at the start of each cell, level with its first line. */
.public-site .compare-matrix tbody tr[data-differs]>td{position:relative}
.public-site .compare-matrix tbody tr[data-differs]>td::before{content:'';position:absolute;left:9px;top:26px;height:16px;width:2px;border-radius:2px;background:var(--sp-spectrum-y);pointer-events:none}

@media(max-width:650px){
  .public-site .compare-modes{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .public-site .compare-modes .btn{padding:10px}
  .public-site .compare-matrix thead th.compare-col{padding:10px}
}

/* ── My Plan ── */

/* Segmented navigation: the sliding indicator is a white glass pill with a spectral bottom hairline. */
.public-site .uni-nav{align-items:flex-start}
.public-site .uni-nav-indicator{background:var(--sp-glass);background-color:#fff;border:1px solid var(--sp-glass-line);box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(29,29,31,.1)}
.public-site .uni-nav-indicator::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--sp-spectrum)}
.public-site.public-planner .uni-nav .btn:not([aria-current=page]){border-color:transparent;color:#424247}
.public-site.public-planner .uni-nav .btn[aria-current=page]{border-color:transparent;color:#1d1d1f;font-weight:600}
.public-site.public-planner .uni-nav .btn[aria-current=page]:not(.btn--primary){color:#1d1d1f}
.public-site .uni-nav details .btn[aria-current=page]{position:relative;border-color:var(--sp-glass-line);background:#fff;box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(29,29,31,.1)}
.public-site .uni-nav details .btn[aria-current=page]::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;background:var(--sp-spectrum)}
@media(max-width:700px){
  /* The nav scrolls sideways here: keep "More planning tools" on one line so it does not stretch the tabs. */
  .public-site .uni-nav .uni-more-tools{flex:none;border-top:0;padding-top:0}
  .public-site .uni-nav .uni-more-tools summary{display:flex;align-items:center;min-height:44px;white-space:nowrap}
}

/* UCAS choices: an instrument readout. The denominator is mono. */
.public-site .uni-plan-intro{margin-bottom:1rem}
.public-site .uni-plan-count{padding:1.1rem 1.4rem;border:1px solid var(--sp-glass-line);border-radius:14px;background:var(--sp-glass);box-shadow:var(--sp-glass-shadow)}
.public-site .uni-plan-count strong{font-variant-numeric:tabular-nums}
.public-site .uni-plan-count strong .sp-mono,.public-site :is(.uni-stats,.decision-stat) strong :is(i,.sp-mono){font:500 1.05rem/1 var(--sp-mono);letter-spacing:.02em;color:var(--text-secondary)}
.public-site .uni-plan-count .sp-label{margin-block:.35rem .5rem;color:var(--text-secondary)}
.public-site .uni-stats{margin-bottom:1rem}
.public-site .uni-stats>div{background:var(--sp-glass);border-color:var(--sp-glass-line);box-shadow:var(--sp-glass-shadow)}
.public-site .uni-stats>div>span{min-width:0;font:500 .66rem/1.4 var(--sp-mono);letter-spacing:.12em;text-transform:uppercase}
@media(max-width:480px){.public-site .uni-stats>div>span{letter-spacing:.06em}}

/* Next steps: mono figures in glass rings. */
.public-site .uni-action-number{width:28px;height:28px;border:1px solid rgba(29,29,31,.18);background:var(--sp-glass);box-shadow:inset 0 1px 0 #fff;color:#1d1d1f;font:600 .72rem/1 var(--sp-mono);font-variant-numeric:tabular-nums}

/* Choice records: places hue. Readings are mono hairline pills. */
.public-site .uni-card{padding:1.4rem}
.public-site .uni-card .uni-plan-stage{padding:.2rem .6rem;border:1px solid var(--sp-glass-line);border-radius:999px;background:var(--sp-glass);font:500 .68rem/1.4 var(--sp-mono);letter-spacing:.04em;color:#424247}
.public-site .uni-plan-checks span,.public-site .uni-card-meta>span{font:500 .7rem/1.4 var(--sp-mono);letter-spacing:.02em}
.public-site .uni-plan-checks span{padding:.15rem .6rem;border:1px solid var(--sp-glass-line);border-radius:999px;background:var(--sp-glass)}

/* The empty choices card: glass, with four rays converging through a lens. */
.public-site .sp-focus-empty{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:2rem 1.5rem;text-align:center}
.public-site .sp-focus-empty .sp-empty-glyph{width:56px;height:56px;color:#424247}
.public-site .sp-focus-empty p{margin:0}
.public-site .uni-plan-choices>.sp-focus-empty{grid-column:1/-1}

/* The remaining planner cards (Applications, Money, Research, Preferences…) take the same lit glass panel, so the workspace reads as one instrument. */
.public-planner .uni-content .card:not(.sp-panel):not(.sp-record){position:relative;background:var(--sp-glass);border-color:var(--sp-glass-line);box-shadow:var(--sp-glass-shadow)}
.public-planner .uni-content .card:not(.sp-panel):not(.sp-record)::before{content:'';position:absolute;left:24px;right:24px;top:-1px;height:2px;border-radius:0 0 2px 2px;background:var(--sp-spectrum);opacity:0;transition:opacity 240ms ease;pointer-events:none}
.public-planner .uni-content .card:not(.sp-panel):not(.sp-record):focus-within::before{opacity:.9}

/* ── Preferences ── */
@media(prefers-reduced-motion:reduce){.public-planner .uni-content .card:not(.sp-panel):not(.sp-record)::before{transition:none}}
@media(prefers-contrast:more){
  .public-site :is(.finance-kpis>div,.finance-verdict,.money-version-count,.uni-plan-count,.uni-action-number){border-color:#767680}
  .public-site .finance-compare>div::before{background:#c9c9d3}
}
@media(forced-colors:active){
  .public-planner .uni-content .card:not(.sp-panel):not(.sp-record)::before{background:CanvasText;forced-color-adjust:none}
  .public-site :is(.money-scenarios .btn,.compare-modes .btn){border:1px solid ButtonText;background:ButtonFace;color:ButtonText;box-shadow:none}
  .public-site :is(.money-scenarios .btn,.compare-modes .btn)[aria-pressed=true]{background:Canvas;color:CanvasText;border:3px solid Highlight;text-decoration:underline;text-underline-offset:3px}
  .public-site :is(.money-scenarios .btn,.compare-modes .btn)[aria-pressed=true]::after,.public-site .uni-nav-indicator::after,.public-site .uni-nav details .btn[aria-current=page]::after,.public-site .compare-matrix tbody tr[data-differs]>td::before{background:CanvasText;forced-color-adjust:none}
  .public-site .uni-nav-indicator{border:2px solid Highlight;background:Canvas;box-shadow:none}
  .public-site .uni-nav .btn[aria-current=page]{color:CanvasText;text-decoration:underline;text-underline-offset:3px}
  .public-site .uni-nav details .btn[aria-current=page]{border:2px solid Highlight;background:Canvas}
  .public-site .finance-verdict::before,.public-site .finance-form legend::before,.public-site .finance-summary>.uni-eyebrow:first-child::before,.public-site .compare-head .compare-choice-kind::before,.public-site .money-version-head .uni-eyebrow::before{background:CanvasText;forced-color-adjust:none}
  .public-site .finance-compare>div::before{background:Canvas;border:1px solid CanvasText;forced-color-adjust:none}
  .public-site .finance-compare>div::after{background:repeating-linear-gradient(90deg,CanvasText 0 1px,transparent 1px 10%);border-right-color:CanvasText;forced-color-adjust:none}
  .public-site .finance-compare [data-series=spending] i{background:CanvasText;forced-color-adjust:none}
  .public-site .finance-compare [data-series=funding] i{background:repeating-linear-gradient(135deg,CanvasText 0 2px,Canvas 2px 5px);outline:1px solid CanvasText;forced-color-adjust:none}
  .public-site :is(.finance-kpis>div,.finance-verdict,.money-version-count,.uni-plan-count,.uni-action-number,.compare-head){border:1px solid CanvasText;background:Canvas;box-shadow:none}
}