/* ==========================================================================
   Find My Fit College: "lively" theme layer
   Loaded AFTER each page's own <style>, so it only restyles; no layout logic.
   No web fonts, no images, no network. All text colors meet WCAG AA.
   Motion only inside @media (prefers-reduced-motion: no-preference).
   Calm mode (counselor + parent pages): html.fmf-calm.
   ========================================================================== */
:root{
  --fmf-ink:#1b1f3b; --fmf-muted:#545b76; --fmf-bg:#f6f5ff; --fmf-line:#e4e1f7;
  --fmf-sun:#ffd23f; --fmf-sun-d:#c9a100;
  /* section accents: every one is >= 5:1 against white */
  --c-home:#4f46e5;  --c-home-t:#eef0ff;
  --c-act:#0369a1;   --c-act-t:#e0f2fe;
  --c-sat:#6d28d9;   --c-sat-t:#f1eaff;
  --c-money:#047857; --c-money-t:#dcfce7;
  --c-resume:#c2410c;--c-resume-t:#ffedd5;
  --c-check:#0f766e; --c-check-t:#ccfbf1;
  --c-schol:#b45309; --c-schol-t:#fef3c7;
  --c-foot:#7e22ce;  --c-foot-t:#f3e8ff;
  --c-email:#be185d; --c-email-t:#fce7f3;
  --c-calm:#334155;  --c-calm-t:#eef2f7;
  --acc:var(--c-home); --acc-t:var(--c-home-t); --acc-d:#3730a3;
  --hero:linear-gradient(120deg,#3730a3 0%,#5b21b6 45%,#be185d 100%);
  --fmf-head:ui-rounded,"SF Pro Rounded","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --fmf-radius:22px;
  --fmf-shadow:0 2px 0 var(--fmf-line),0 12px 32px rgba(79,70,229,.09);
  --fmf-shadow-hi:0 4px 0 var(--fmf-line),0 18px 40px rgba(79,70,229,.16);
}
html[data-section=act]      {--acc:var(--c-act);--acc-t:var(--c-act-t);--acc-d:#075985;--hero:linear-gradient(120deg,#075985,#0369a1 55%,#6d28d9)}
html[data-section=sat]      {--acc:var(--c-sat);--acc-t:var(--c-sat-t);--acc-d:#4c1d95;--hero:linear-gradient(120deg,#4c1d95,#6d28d9 55%,#be185d)}
html[data-section=money]    {--acc:var(--c-money);--acc-t:var(--c-money-t);--acc-d:#065f46;--hero:linear-gradient(120deg,#064e3b 0%,#047857 50%,#0f766e 100%)}
html[data-section=resume]   {--acc:var(--c-resume);--acc-t:var(--c-resume-t);--acc-d:#9a3412;--hero:linear-gradient(120deg,#7c2d12 0%,#c2410c 55%,#be185d 100%)}
html[data-section=checklist]{--acc:var(--c-check);--acc-t:var(--c-check-t);--acc-d:#115e59;--hero:linear-gradient(120deg,#134e4a 0%,#0f766e 50%,#4f46e5 100%)}
html[data-section=footprint]{--acc:var(--c-foot);--acc-t:var(--c-foot-t);--acc-d:#581c87;--hero:linear-gradient(120deg,#3b0764 0%,#7e22ce 55%,#be185d 100%)}
html[data-section=email]    {--acc:var(--c-email);--acc-t:var(--c-email-t);--acc-d:#9d174d;--hero:linear-gradient(120deg,#831843 0%,#be185d 50%,#6d28d9 100%)}
html.fmf-calm               {--acc:#4338ca;--acc-t:#eef0ff;--acc-d:#312e81;--hero:linear-gradient(120deg,#1e293b 0%,#312e81 100%)}

/* ---------- base ---------- */
html{background:var(--fmf-bg)}
body{background:var(--fmf-bg);
  background-image:radial-gradient(circle at 8% 12%,rgba(255,210,63,.10) 0 180px,transparent 181px),
                   radial-gradient(circle at 96% 40%,rgba(236,72,153,.06) 0 220px,transparent 221px),
                   radial-gradient(circle at 4% 78%,rgba(16,185,129,.06) 0 200px,transparent 201px);
  background-attachment:fixed}
html.fmf-calm body{background-image:none}
h1,h2,h3,.cta,.btn.primary,.tagline{font-family:var(--fmf-head)}
h2{letter-spacing:-.01em}
a{text-underline-offset:2px}
:focus-visible{outline:3px solid var(--fmf-sun);outline-offset:2px;border-radius:6px}
html.fmf-calm :focus-visible{outline-color:#4338ca}
::selection{background:#ffe680;color:#1b1f3b}

/* ---------- shared page header (money, resume, footprint, email, counselor, parent) ---------- */
header.top:not(.hero){position:relative;overflow:hidden;background:var(--hero);color:#fff;isolation:isolate}
header.top:not(.hero)::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 92% 18%,rgba(255,210,63,.55) 0 46px,transparent 47px),
    radial-gradient(circle at 84% 78%,rgba(255,255,255,.16) 0 90px,transparent 91px),
    radial-gradient(circle at 100% 100%,rgba(255,255,255,.10) 0 180px,transparent 181px),
    radial-gradient(circle at 70% 8%,rgba(255,255,255,.14) 0 10px,transparent 11px),
    radial-gradient(circle at 76% 40%,rgba(255,255,255,.22) 0 5px,transparent 6px);}
header.top:not(.hero)::after{content:"";display:block;height:26px;margin-top:-4px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V12C150 -4 300 -4 450 10S750 26 900 12 1100 0 1200 8V26Z' fill='%23f6f5ff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
html.fmf-calm header.top:not(.hero)::before{background:radial-gradient(circle at 100% 0,rgba(255,255,255,.08) 0 160px,transparent 161px)}
header.top:not(.hero) .in{padding-bottom:10px}
header.top:not(.hero) h1{font-size:clamp(1.8rem,6vw,2.6rem);letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.18);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
html.fmf-calm header.top:not(.hero) h1{font-size:clamp(1.5rem,5vw,1.9rem);text-shadow:none}
header.top:not(.hero) p{color:#f3f2ff;max-width:680px}
/* site links in the header become translucent pills */
header.top .links{gap:6px;margin:4px 0 6px}
header.top .links a{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff!important;text-decoration:none!important;font-size:.84rem;transition:background .15s,transform .15s}
header.top .links a:hover,header.top .links a:focus-visible{background:rgba(255,255,255,.28)}
header.top .links a[aria-current=page]{background:var(--fmf-sun);border-color:var(--fmf-sun);color:#1b1f3b!important}
header.top .links a:first-child{background:#fff;color:var(--acc-d)!important;border-color:#fff}

/* ---------- cards ---------- */
section.card,.card,.box{border-radius:var(--fmf-radius);box-shadow:var(--fmf-shadow);border-color:var(--fmf-line)}
main section.card,main>.card,.wrap>section.card{border-top:5px solid var(--acc)}
html.fmf-calm main section.card{border-top-width:3px}
section.card h2,.card>h2{color:var(--acc-d)}
html[data-section=home] section.card h2{color:#312e81}
details.topic{transition:box-shadow .2s,transform .2s}
details.topic>summary:hover{color:var(--acc-d)}
details.topic .tn{background:var(--acc-t);color:var(--acc-d);font-weight:900}
details.topic[open]{box-shadow:var(--fmf-shadow-hi)}

/* ---------- buttons ---------- */
.btn{transition:transform .12s,box-shadow .12s,background .12s,filter .12s}
.btn.primary{background:var(--acc);border-color:var(--acc);box-shadow:0 4px 0 var(--acc-d)}
.btn.primary:hover:not(:disabled){filter:brightness(1.07)}
.btn.primary:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--acc-d)}
.btn:not(.primary):not(:disabled):hover{border-color:var(--acc);color:var(--acc-d)}
.cta{transition:transform .12s,box-shadow .12s,filter .12s}
.cta:hover{filter:brightness(1.05)}
input[type=checkbox],input[type=radio]{accent-color:var(--acc)}

/* ---------- progress bars ---------- */
.qprog .trk,.progress,.bar{background:#ebeafd}
.qprog .trk i,.progress span,.bar i{background:linear-gradient(90deg,#10b981,#22d3ee 60%,#6366f1)!important;background-size:200% 100%!important}
.qprog .qpct{color:#047857}

/* ---------- pills on home nav + other site navs, color coded by destination ---------- */
nav#nav{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px)}
nav#nav button,nav#nav a.navlink,.sitenav a{--pc:var(--c-home);--pt:var(--c-home-t);background:var(--pt)!important;color:var(--pc)!important;border:2px solid transparent!important;font-weight:800!important;box-shadow:none!important;transition:transform .15s,box-shadow .15s}
nav#nav button:hover,nav#nav a.navlink:hover,.sitenav a:hover{transform:translateY(-2px);box-shadow:0 4px 0 color-mix(in srgb,var(--pc) 35%,transparent)!important}
nav#nav button.on,.sitenav a[aria-current=page]{background:var(--pc)!important;color:#fff!important;box-shadow:0 3px 0 rgba(0,0,0,.25)!important}
[data-tab=profile]{--pc:var(--c-act);--pt:var(--c-act-t)}
[data-tab=matches]{--pc:var(--c-email);--pt:var(--c-email-t)}
[data-tab=list]{--pc:var(--c-sat);--pt:var(--c-sat-t)}
nav#nav [data-tab=money]{--pc:var(--c-schol);--pt:var(--c-schol-t)}
[data-tab=about],[data-tab=account]{--pc:var(--c-calm);--pt:var(--c-calm-t)}
nav#nav a[href*="act/"],.sitenav a[href*="act/"]{--pc:var(--c-act);--pt:var(--c-act-t)}
nav#nav a[href*="sat/"],.sitenav a[href*="sat/"]{--pc:var(--c-sat);--pt:var(--c-sat-t)}
nav#nav a[href*="checklist"],.sitenav a[href*="checklist"],.sitenav a[href="./"][aria-current]{--pc:var(--c-check);--pt:var(--c-check-t)}
nav#nav a[href*="resume"],.sitenav a[href*="resume"]{--pc:var(--c-resume);--pt:var(--c-resume-t)}
nav#nav a[href*="money"],.sitenav a[href*="money"]{--pc:var(--c-money);--pt:var(--c-money-t)}
nav#nav a[href*="footprint"],.sitenav a[href*="footprint"]{--pc:var(--c-foot);--pt:var(--c-foot-t)}
nav#nav a[href*="email"],.sitenav a[href*="email"]{--pc:var(--c-email);--pt:var(--c-email-t)}
nav#nav a[href*="about"],.sitenav a[href*="about"]{--pc:var(--c-calm);--pt:var(--c-calm-t)}
.sitenav a:first-child{--pc:#fff;--pt:var(--c-home)}
.sitenav a:first-child{color:#fff!important}

/* ---------- HOME hero ---------- */
html[data-section=home] .hero{background:var(--hero)}
html[data-section=home] .hero::after{background:
    radial-gradient(circle at 12% 110%,rgba(255,210,63,.30) 0 160px,transparent 161px),
    radial-gradient(circle at 104% -10%,rgba(255,255,255,.12) 0 260px,transparent 261px)}
html[data-section=home] .hero>img.hero-bg{display:none}
.hero h2.tagline{text-shadow:0 3px 0 rgba(0,0,0,.15)}
.hero h2.tagline em{background:linear-gradient(transparent 62%,rgba(255,210,63,.35) 62%);padding:0 4px;border-radius:4px}
.hero-in{position:relative}
.fmf-illo{display:none}
@media (min-width:900px){
  html[data-section=home] .hero-in{min-height:400px}
  html[data-section=home] .hero h2.tagline,html[data-section=home] .hero p.lead{max-width:540px}
  html[data-section=home] .ctas{max-width:600px}
  .fmf-illo{display:block;position:absolute;right:8px;top:64px;width:310px;height:auto;pointer-events:none}
}
.chips-free span{background:rgba(255,255,255,.18)}

/* home feature cards: lift + color stripe + icon bubble */
.feat a{position:relative;transition:transform .18s,box-shadow .18s;border:0;box-shadow:var(--fmf-shadow)}
.feat a::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--fc,var(--c-home));z-index:1}
.feat a:nth-child(1){--fc:var(--c-email)}.feat a:nth-child(2){--fc:var(--c-act)}.feat a:nth-child(3){--fc:var(--c-sat)}.feat a:nth-child(4){--fc:var(--c-schol)}
.feat a:hover,.feat a:focus-visible{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--fmf-shadow-hi)}
.feat a:nth-child(even):hover{transform:translateY(-5px) rotate(.4deg)}
.feat .fb b{color:var(--fc)}
.feat img{transition:transform .4s}.feat a:hover img{transform:scale(1.04)}

/* scholarship tab banner + results */
.banner{box-shadow:var(--fmf-shadow)}
.banner::after{background:linear-gradient(180deg,rgba(120,53,15,.05) 15%,rgba(120,53,15,.9) 100%)}
.school{border-radius:16px;transition:box-shadow .15s,transform .15s;background:#fff}
.school:hover{box-shadow:var(--fmf-shadow)}
.majors li{border-radius:18px;border-left:5px solid var(--c-sat)}
.majors li:nth-child(3n+2){border-left-color:var(--c-email)}.majors li:nth-child(3n){border-left-color:var(--c-check)}
.item{transition:transform .1s,background .1s,border-color .1s}
.item:hover{border-color:#c7c2f5}
.item.on{background:#eef0ff}
.code{background:linear-gradient(90deg,#4f46e5,#be185d);-webkit-background-clip:text;background-clip:text;color:transparent!important;font-size:2.6rem}

/* ---------- CHECKLIST & simple pages (no header bar) ---------- */
.fmf-pagehead{position:relative;overflow:hidden;isolation:isolate;background:var(--hero);color:#fff;border-radius:26px;padding:22px 22px 20px;margin:6px 0 14px;box-shadow:var(--fmf-shadow)}
.fmf-pagehead::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(circle at 97% 6%,rgba(255,210,63,.85) 0 26px,transparent 27px),
  radial-gradient(circle at 86% 110%,rgba(255,255,255,.14) 0 110px,transparent 111px),
  radial-gradient(circle at 78% 30%,rgba(255,255,255,.3) 0 5px,transparent 6px)}
.fmf-pagehead h1{color:#fff!important;margin-top:0;padding-right:56px}
.fmf-pagehead .lead{color:#f3f2ff!important;margin-bottom:0;max-width:600px}
h2 .hi{background:var(--fmf-sun)}
html[data-section=checklist] h2,html[data-section=checklist] h3{color:#134e4a}
.picker button{transition:transform .15s}
.picker button:hover{transform:translateY(-2px)}
.picker button[aria-selected=true]{background:var(--acc)!important;border-color:var(--acc)!important;box-shadow:0 3px 0 var(--acc-d)!important}
.task{transition:background .2s;border-radius:12px;padding-left:6px;padding-right:6px}
.task.done{background:linear-gradient(90deg,#ecfdf5,transparent)}
.use{transition:transform .15s}.use:hover{transform:translateY(-1px)}

/* ---------- footprint / email TOC chips ---------- */
nav.toc a{border-radius:999px;transition:transform .15s,background .15s}
nav.toc a:hover{transform:translateY(-2px)}

/* ---------- footer ---------- */
footer{position:relative}
footer a{font-weight:600}

/* ---------- confetti ---------- */
.fmf-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.fmf-confetti i{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;animation:fmf-fall 2s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes fmf-fall{to{transform:translate(var(--dx),105vh) rotate(var(--rot));opacity:.9}}

/* ---------- motion (only when allowed, never on calm pages) ---------- */
@media (prefers-reduced-motion: no-preference){
  html:not(.fmf-calm) .hero-in>*,html:not(.fmf-calm) header.top:not(.hero) .in>*,.fmf-pagehead>*{animation:fmf-rise .55s cubic-bezier(.2,.8,.2,1) both}
  html:not(.fmf-calm) .hero-in>*:nth-child(2),header.top:not(.hero) .in>*:nth-child(2){animation-delay:.05s}
  html:not(.fmf-calm) .hero-in>*:nth-child(3),header.top:not(.hero) .in>*:nth-child(3){animation-delay:.1s}
  html:not(.fmf-calm) .hero-in>*:nth-child(4),header.top:not(.hero) .in>*:nth-child(4){animation-delay:.15s}
  html:not(.fmf-calm) .hero-in>*:nth-child(5){animation-delay:.2s}
  html:not(.fmf-calm) .hero-in>*:nth-child(6){animation-delay:.25s}
  html:not(.fmf-calm) .hero-in>.fmf-illo{animation:fmf-pop .7s .2s cubic-bezier(.2,1.4,.4,1) both}
  .feat a{animation:fmf-rise .5s cubic-bezier(.2,.8,.2,1) both}
  .feat a:nth-child(2){animation-delay:.08s}.feat a:nth-child(3){animation-delay:.16s}.feat a:nth-child(4){animation-delay:.24s}
  .fmf-illo .fl1{animation:fmf-float 6s ease-in-out infinite}
  .fmf-illo .fl2{animation:fmf-float 7s ease-in-out -2s infinite}
  .fmf-illo .tw{animation:fmf-twinkle 3s ease-in-out infinite}
  .fmf-illo .tw:nth-of-type(2n){animation-delay:-1.5s}
  .qprog .trk i,.progress span{transition:width .45s cubic-bezier(.2,.8,.2,1)}
  html.fmf-calm *{animation:none!important}
}
@keyframes fmf-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fmf-pop{from{opacity:0;transform:scale(.85) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes fmf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes fmf-twinkle{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){
  .feat a:hover,.feat a:focus-visible,.feat a:nth-child(even):hover,nav#nav button:hover,nav#nav a.navlink:hover,.sitenav a:hover,.picker button:hover,nav.toc a:hover{transform:none}
  .feat a:hover img{transform:none}
  .fmf-confetti{display:none}
}

/* ---------- print: theme stays out of the way ---------- */
@media print{
  body{background:#fff!important;background-image:none!important}
  header.top::after,header.top::before,.fmf-pagehead::before,.fmf-illo,.fmf-confetti{display:none!important}
  .fmf-pagehead{background:none!important;color:#000!important;box-shadow:none!important;padding:0!important}
  .fmf-pagehead h1,.fmf-pagehead .lead{color:#000!important}
  section.card,.card,.box{box-shadow:none!important}
  .code{color:#000!important;background:none!important}
}

/* ---------- home nav: wrap on desktop so every button fits (no sideways scroll) ---------- */
@media (min-width:761px){
  nav#nav{flex-wrap:wrap!important;overflow:visible!important;justify-content:center;row-gap:8px;padding:10px 16px}
  nav#nav a.navlink:first-of-type{margin-left:12px;position:relative}
  nav#nav a.navlink:first-of-type::before{content:"";position:absolute;left:-11px;top:20%;bottom:20%;width:2px;background:var(--fmf-line);border-radius:2px}
}
@media (max-width:760px){
  nav#nav{scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav#nav>*{scroll-snap-align:start}
}