/* Page hero panel: every page except home, school and committee gets the same teal panel the committee page has.
   public/polish.js wraps eyebrow + h1 + lede in .pgpanel and sizes it to the header's content width. */
.pgpanel{background:var(--navy);color:#fff;border-radius:28px;padding:44px clamp(24px,4vw,56px) 40px;margin:0 0 28px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box}
.pgpanel>.eyebrow,.pgpanel>.tag{color:rgba(255,255,255,.72)!important}
.pgpanel>h1{color:#fff!important;margin:0!important;max-width:18ch}
.pgpanel>h1 .mark{background:#FDB366!important;color:#111318!important;padding:0 .14em;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.pgpanel>h1{font-size:clamp(34px,4.4vw,56px)!important;line-height:1.02!important}
.pgpanel>h1+p,.pgpanel>h1+span.credit,.pgpanel>p,.pgpanel>.lede{color:rgba(255,255,255,.88)!important;max-width:60ch!important;margin:0!important}
.pgpanel a:not(.cta){color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.pgpanel .ii{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.pgsec{padding-top:32px!important}
@media(max-width:640px){.pgpanel{border-radius:20px;padding:28px 22px 26px;margin-bottom:20px}.pgpanel>h1{max-width:none}.pgsec{padding-top:18px!important}}
/* about, ask and the GPA calculator were narrower than the header; line them up with it */
.wrap.narrow.pghero{max-width:1200px}
.wrap.narrow.pghero>p,.wrap.narrow.pghero>.credit,.wrap.narrow.pghero>ul{max-width:70ch}
.pgpanel>span.credit{font-size:18px!important;line-height:1.5}

/* School pages: the hero is the same rounded box as every other page, in the school's own colour; the section
   rail becomes the horizontal jump bar so content lines up with the header at every width. */
.hero-ph,.stubhero{width:calc(100% - 40px)!important;max-width:1160px!important;margin:32px auto 0!important;border-radius:28px!important;background:var(--school)}
.hero-ph{height:clamp(280px,40vh,400px)}
.stubhero{padding-block:44px 40px!important}
body.schoolpg #app .stubhero .wrap{max-width:none!important;margin:0!important;padding-inline:clamp(24px,4vw,56px)}
.stubhero .h1{font-size:clamp(34px,4.4vw,56px);line-height:1.02}
.hero-ph img{opacity:.55;mix-blend-mode:luminosity}
.hero-ph::after{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.35)),linear-gradient(0deg,var(--school),transparent 70%);opacity:.8}
.hero-ph .t{bottom:0;padding:0 0 34px}
body.schoolpg #app .hero-ph .t .wrap{max-width:none!important;margin:0!important;padding-inline:clamp(24px,4vw,56px)}
.hero-ph .t .h1{font-size:clamp(34px,4.4vw,56px);line-height:1.02}
@media(max-width:640px){.hero-ph,.stubhero{border-radius:20px!important;margin-top:18px!important}.hero-ph{height:260px}.hero-ph .t{padding-bottom:22px}}
@media(min-width:1100px){
  body.schoolpg #app .wrap:not(nav.jump .wrap):not(.oddsbar>.wrap){max-width:1200px!important;margin-left:auto!important;margin-right:auto!important}
  body.schoolpg nav.jump{position:sticky!important;left:auto!important;width:auto!important;background:#fff!important;border-bottom:1px solid var(--line)!important;opacity:1!important;pointer-events:auto!important}
  body.schoolpg nav.jump .wrap{display:flex!important;flex-direction:row!important;gap:6px!important;overflow-x:auto!important;padding:8px 20px!important;max-width:1200px!important;margin:0 auto!important}
  body.schoolpg nav.jump a{justify-content:center!important;border-radius:999px!important;padding:6px 12px!important;min-height:34px!important}
}
body.schoolpg #app .oddsbar>.wrap{max-width:1160px!important;margin-left:auto!important;margin-right:auto!important;width:calc(100% - 40px);box-sizing:border-box}

/* body polish: one look for form blocks, active states and spacing under the hero panel */
.finq{background:var(--soft);border:1px solid var(--line);border-radius:20px;padding:18px 20px;max-width:none}
.rvopt[aria-selected=true]{background:var(--navy)!important;border-color:var(--navy)!important}
.pgsec+section,.pgsec~section:first-of-type{padding-top:8px}
.cmphero.pgsec{padding-bottom:0!important}
.pghero>.crow2.hd,.pghero>.tblwrap{margin-top:4px}
.cmphero+section{margin-top:-18px}
/* Following button on a school hero: white pill with dark text so it reads on any school colour */
.hero-ph .fbtn[aria-pressed="true"],.stubhero .fbtn[aria-pressed="true"]{background:#fff!important;border-color:#fff!important;color:#111318!important}

/* odds + cost cards (v14) */
.oddsbar .rtiles{gap:16px}
.oddsbar .rtile{background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal,#0e4b5a);border-radius:16px;padding:20px 22px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 18px -12px rgba(16,24,40,.18)}
.oddsbar .rtile:nth-child(2){border-top-color:#8fb3bb}
.oddsbar .rtile .onum{font-size:64px;line-height:1;letter-spacing:-.03em}
.oddsbar .rtile .onum small{font-size:26px;margin-left:2px}
.oddsbar .rtile .credit{display:block;margin-top:8px}
.oddsbar .pchips{gap:10px}
.oddsbar .pchip{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;box-shadow:0 1px 2px rgba(16,24,40,.04);position:relative;padding-left:20px}
.oddsbar .pchip:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:var(--teal,#0e4b5a)}
.oddsbar .pchip b{font-size:14px}
.cc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 28px -16px rgba(16,24,40,.22)}
.cc-in{padding:26px 28px;display:flex;flex-direction:column;gap:20px}
.cc-out{padding:26px 30px;background:linear-gradient(180deg,#eef5f6,#e6f0f2);border-left:1px solid var(--line)}
.cc-out .big{display:block;font-size:54px;line-height:1.05;letter-spacing:-.03em;color:var(--teal,#0e4b5a);margin:6px 0 4px}
.cc input[type=range]{accent-color:var(--teal,#0e4b5a);width:100%;height:6px}
.cc select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit}
.cc-chk{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--soft,#f6f4f0)}
.cc-chk input{accent-color:var(--teal,#0e4b5a);width:18px;height:18px}
.cc-how{font-size:14px;line-height:1.5;margin:10px 0 0}
.cc-val{margin:14px 0 0;padding:10px 14px;background:#fff;border:1px solid #cfe0e3;border-radius:12px;font-size:14px;line-height:1.45}
@media(max-width:760px){.cc{grid-template-columns:1fr}.cc-out{border-left:0;border-top:1px solid var(--line)}.oddsbar .rtile .onum{font-size:52px}}
.cc{padding:0!important}
.oddsbar .rtile .onum.all{color:var(--ink,#101418)}

/* header: signed in = logo, Menu, name. My list lives in the name menu. */
#navme{display:none!important}
.pfmenu{border-radius:14px!important;padding:8px!important;min-width:200px!important;box-shadow:0 16px 40px rgba(17,19,24,.16)!important}
.pfmenu>span{padding:8px 12px 10px!important;font-weight:700;color:var(--ink,#111318)!important;font-size:13.5px!important;border-bottom:1px solid var(--line);margin-bottom:6px}
.pfmenu a,.pfmenu button{display:flex!important;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:9px 12px!important;border-radius:9px;font:inherit;font-size:15px;font-weight:600;color:var(--ink,#111318);text-decoration:none;text-align:left}
.pfmenu a:hover,.pfmenu button:hover{background:var(--soft,#f6f4f0);text-decoration:none}
.pfmenu a span{font-size:12.5px;font-weight:700;background:var(--navy);color:#fff;border-radius:999px;padding:1px 8px}

/* no "Get my odds" button in the header, on any page; calmer panel titles */
.hdr .cta{display:none!important}
.pgpanel{padding:36px clamp(24px,4vw,56px) 32px;gap:12px}
.pgpanel>h1{font-size:clamp(30px,3.7vw,46px)!important;max-width:24ch!important;line-height:1.08!important}
.pgpanel>h1+p,.pgpanel>p,.pgpanel>.lede,.pgpanel>span.credit{font-size:17px!important;max-width:64ch!important}
.hdr .wrap>.nav{margin-right:auto}

/* deadlines page */
.dlopts{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;padding:14px 18px;background:var(--soft,#f6f4f0);border:1px solid var(--line);border-radius:14px}
.dlopts .remind{margin:0;font-size:15px;font-weight:600}
.dlopts .dlleg{margin-left:auto;font-size:13px}
.dllist{background:#fff;border:1px solid var(--line);border-radius:18px;padding:4px 22px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.dllist .dlrow:first-child{border-top:0}
.dlrow{padding:16px 0!important;grid-template-columns:96px minmax(0,1fr) auto!important}
.dld b{font-size:20px;font-family:var(--display);font-weight:900;font-stretch:88%}
.dlt{display:flex;flex-direction:row!important;align-items:center;gap:14px;flex-wrap:wrap}
.dlt>a{font-weight:700;font-size:18px;min-width:150px;text-decoration:none}
.dlt>a:hover{text-decoration:underline}
.dlsel{width:auto!important;min-width:260px;max-width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:14.5px}
.dlcal{background:var(--navy);color:#fff!important;border-color:var(--navy)!important}
@media(max-width:640px){.dlopts .dlleg{margin-left:0}.dllist{padding:2px 14px}.dlt>a{min-width:0;width:100%}.dlsel{min-width:0;width:100%}}

/* strategy page */
.stgrid{gap:28px}
.stlist{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.strow{padding:12px 16px!important}
.stname a{font-weight:700;font-size:17px;text-decoration:none}
.stcol>.eyebrow{display:block;margin-bottom:6px}
.stcol .stlim{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:10px}
.stcol .chk{padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-top:6px;font-weight:600}
.stplans{gap:18px!important}
.stplan{border-radius:18px!important;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 22px -14px rgba(16,24,40,.2)}
.stplan.best{outline:0!important;border:2px solid var(--navy)!important}
.ststeps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.stnums b{font-family:var(--display);font-weight:900;font-stretch:88%;font-size:30px!important;line-height:1}
.stnums span{font-size:12.5px!important}
.stph .credit{font-size:14px}

/* cost page */
.crowbox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:4px 22px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.crowbox .crow2{padding:16px 0}
.crowbox .crow2:not(:last-child){border-bottom:1px solid var(--line)}
.crowbox .crow2.hd{padding:14px 0 10px}
.crow2 .cn{font-weight:700;font-size:18px;text-decoration:none}
.crow2 b{font-size:20px}
.stnote{font-size:15px;color:var(--ink-2)}
.finq{background:#fff!important;border-radius:18px!important;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.costneed{background:transparent!important;border:0!important;padding:0!important;font-size:14.5px;color:var(--ink-2)}
/* ask page */
.askwrap{max-width:860px;margin-inline:auto}
.askstarters{display:flex;flex-wrap:wrap;gap:10px}
.askchip{font:inherit;font-weight:600;font-size:15px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer}
.askchip:hover{border-color:var(--navy);background:var(--soft,#f6f4f0)}
.askform{background:#fff;border:1.5px solid var(--navy);border-radius:20px;padding:14px 16px;box-shadow:0 8px 24px -16px rgba(16,24,40,.3)}
.askform textarea{width:100%;border:0;outline:0;resize:none;font:inherit;font-size:17px;background:none}
.costneed{display:block;margin:2px 0 14px!important;position:static!important}
.crowbox{margin-top:6px}
html,body{overflow-x:clip}

/* sparkle: quiet motion and a little depth */
.pgpanel,.ixpanel{position:relative;overflow:hidden;isolation:isolate}
.pgpanel::before,.ixpanel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 90% at 100% 0%,rgba(253,179,102,.20),transparent 60%),radial-gradient(50% 70% at 0% 100%,rgba(255,255,255,.07),transparent 70%)}
.pgpanel::after,.ixpanel::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.10);border-radius:20px;pointer-events:none;z-index:-1}
.pgpanel>.eyebrow:before,.ixpanel .eyebrow:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#FDB366;margin-right:10px;vertical-align:1px}
@keyframes mk{from{background-size:0 100%}to{background-size:100% 100%}}
.pgpanel>h1 .mark,.ixpanel .h1 .mark{background-image:linear-gradient(#FDB366,#FDB366)!important;background-color:transparent!important;background-repeat:no-repeat;background-size:100% 100%;animation:mk .7s .25s cubic-bezier(.2,.7,.2,1) both}
.pfrv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.pfrv.pfrv-in{opacity:1;transform:none}
.card,.rtile,.pchip,.stplan,.crowbox,.dllist,.finq,.cc{transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.rtile:hover,.stplan:hover,.card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(16,24,40,.28)}
.pchip:hover{border-color:#b9c9cc}
.crowbox .crow2:not(.hd):hover,.dlrow:hover{background:linear-gradient(90deg,rgba(14,74,87,.04),transparent)}
.cta{position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease}
.cta:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(14,74,87,.55)}
.cta:active{transform:translateY(0)}
.cta::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
.cta:hover::after{left:130%}
.ixr:hover .ixn{color:var(--accent)}
.ixr{transition:padding-left .2s ease}.ixr:hover{padding-left:6px}
@media (prefers-reduced-motion:reduce){.pfrv{opacity:1;transform:none;transition:none}.pgpanel h1 .mark,.ixpanel .h1 .mark{animation:none}.cta::after{display:none}}

/* header + menu: compact popover on desktop, one tidy row on phones */
.hdr .xp{position:relative}
.xpp{left:-18px!important;right:auto!important;top:calc(100% + 14px)!important;width:max-content;max-width:calc(100vw - 24px);padding:22px 28px!important;grid-template-columns:repeat(2,minmax(170px,1fr))!important;gap:20px 40px!important;border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 50px -12px rgba(17,19,24,.22)!important}
@media(max-width:700px){
  .hdr .wrap{flex-wrap:nowrap!important;gap:10px!important}
  .hdr .nav{order:0!important;width:auto!important;overflow:visible!important;flex:0 0 auto;margin-right:auto}
  .hdr .xp{position:static}
  .xpp{left:12px!important;right:12px!important;top:100%!important;width:auto;max-width:none;margin-top:8px;padding:16px 18px!important;gap:12px 20px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hdr .logo .beta,.hdr .beta,.hdr [class*=beta]{display:none}
  #pfsin{margin-left:0!important}
}
/* home: search suggestions and arrows that never wrap alone */
.ixsug{display:flex;flex-wrap:wrap;gap:8px}
.ixsug button{font:inherit;font-weight:600;font-size:15px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.ixsug button:hover{background:rgba(255,255,255,.2)}
.ixh .nw{white-space:nowrap}

/* layout fixes from a phone (390px) and desktop (1440px) pass */
/* wide tables scroll inside their card instead of stretching the page */
#app section>.wrap{min-width:0}
/* school pages: section tabs stick right under the header (an old side-rail rule left them at 96px, with a gap) */
@media (min-width:1100px){body.schoolpg nav.jump{top:65px!important}}
/* chance me: field labels line up at the top; the GPA hint sits under its box */
.mefields:has(#mgpa){align-items:start}
.mefields:has(#mgpa)>label:has(#mgpa){display:flex;flex-direction:column}
.mefields:has(#mgpa)>label:has(#mgpa)>.credit{order:2;margin-top:4px}
@media (min-width:701px){.mefields:has(#mgpa)>label:has(#mgpa)>.credit{white-space:nowrap}}
/* compare: the column heads sit inside the side-scroller, so the 64px sticky offset only made a gap */
.cmpscroll .chead{top:0}
@media (max-width:700px){
  .cmpscroll[style*="--n:2"] .cmpin{width:auto}
  .cmpscroll[style*="--n:2"] :is(.chead,.cvals){grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones: Feedback is a small round button like the AI one, and the page ends above both */
@media (max-width:760px){
  #fbbtn{width:40px!important;height:40px!important;padding:0!important;justify-content:center;border-radius:50%}
  #fbbtn::after{content:none!important}
  #fbbtn::before{font-size:16px!important}
  body{padding-bottom:64px}
}
/* phones: Sign in centred on the header row */
@media (max-width:440px){#pfsin{top:50%!important;transform:translateY(-50%)}}