/* Open Potential shared visual system — public, family, learner and administration */
:root{
  --op-navy:#081a38;
  --op-navy-2:#102d59;
  --op-blue:#2859e8;
  --op-purple:#6f2cff;
  --op-teal:#72ded4;
  --op-ink:#102342;
  --op-muted:#617087;
  --op-canvas:#f3f6fb;
  --op-paper:#fffefa;
  --op-white:#fff;
  --op-line:#d8e1ee;
  --op-soft-blue:#edf3ff;
  --op-soft-purple:#f1edff;
  --op-soft-green:#edf5ed;
  --op-radius-sm:12px;
  --op-radius:20px;
  --op-radius-lg:30px;
  --op-shadow:0 18px 50px rgba(8,26,56,.09);
  --op-shadow-hover:0 22px 60px rgba(8,26,56,.14);
  --op-page:min(1440px,calc(100% - 48px));
  --op-content:min(1180px,calc(100% - 48px));
}

html{scroll-behavior:smooth;background:var(--op-canvas)}
body{background:var(--op-canvas);color:var(--op-ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
body:not(.admin-modern-page) .shell{width:var(--op-page);max-width:1440px;margin-inline:auto;padding:42px 0 88px}

/* One navigation shell */
.topbar{
  position:relative;z-index:100;height:84px;padding:0 max(32px,6vw);
  border:0;background:var(--op-navy);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.1)
}
.brand-logo{display:block;width:auto;max-width:245px;height:52px;object-fit:contain}
.topbar nav{gap:8px}
.topbar nav>a,.topbar nav>details>summary,.learner-more-menu summary{
  min-height:44px;display:flex;align-items:center;padding:10px 13px;border-radius:10px;
  color:#e8eef9!important;font-size:13px;font-weight:750;text-decoration:none;transition:background .18s,color .18s
}
.topbar nav>a:hover,.topbar nav>details>summary:hover,.learner-more-menu summary:hover{background:rgba(255,255,255,.1);color:#fff!important}
.topbar .nav-button{margin-left:5px;padding-inline:20px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:var(--op-purple)!important;color:#fff!important}
.trust-menu>div{border:1px solid rgba(255,255,255,.14)!important;border-radius:16px!important;background:#0b2043!important;box-shadow:0 22px 60px rgba(2,11,29,.42)!important}
.trust-menu>div a{color:#eef4ff!important;border-radius:9px}
.trust-menu>div a:hover{background:rgba(255,255,255,.1)!important}

/* Every public route uses one identical navigation treatment. */
.public-site-topbar{border:0!important;background:var(--op-navy)!important;color:#fff!important;box-shadow:0 1px 0 rgba(255,255,255,.1)!important}
@media(min-width:701px){
  .public-site-topbar{position:relative!important;z-index:100!important;display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;height:84px!important;padding:0 max(32px,6vw)!important}
  .public-site-topbar .brand-logo{width:auto!important;max-width:245px!important;height:52px!important;object-fit:contain!important}
  .public-site-topbar>nav{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important}
  .public-site-topbar>nav>a,.public-site-topbar>nav>details>summary{min-height:44px!important;display:flex!important;align-items:center!important;padding:10px 13px!important;border-radius:10px!important;color:#e8eef9!important;font-size:13px!important;font-weight:750!important;text-decoration:none!important}
  .public-site-topbar>nav>.nav-button{margin-left:5px!important;padding-inline:20px!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:999px!important;background:var(--op-purple)!important;color:#fff!important}
}

/* Predictable page rhythm */
.shell>section+section,.shell>section+aside,.shell>aside+section{margin-top:28px}
.eyebrow{margin:0 0 12px;color:#536884;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
h1,h2,h3{color:var(--op-ink)}
h1{font-size:clamp(46px,6vw,82px);line-height:.98;letter-spacing:-.045em}
h2{font-size:clamp(28px,3.2vw,44px);line-height:1.08;letter-spacing:-.025em}
h3{font-size:clamp(19px,2vw,25px);line-height:1.2}
.lead{max-width:760px;color:var(--op-muted);font-size:clamp(17px,1.7vw,21px);line-height:1.6}
.muted,small{color:var(--op-muted)}

.page-heading,.directory-heading,.section-heading,.admin-section-title,.workbook-heading{
  gap:22px;padding-bottom:20px;border-bottom:1px solid var(--op-line)
}
.page-heading{margin-bottom:28px}
.page-heading h1{font-size:clamp(42px,5vw,68px)}

/* Shared surfaces */
.panel,.quality-section,.growth-section,.family-directory,.lesson-library,.coding-workspace,.art-workspace,.project-shelf{
  border:1px solid var(--op-line)!important;border-radius:var(--op-radius)!important;
  background:var(--op-paper)!important;box-shadow:var(--op-shadow)!important
}
.panel{padding:clamp(20px,2.3vw,32px)}
.panel:hover{border-color:#c9d5e8}
.empty-state{border:1px dashed #c8d4e5;border-radius:18px;background:#f8faff}

/* Shared controls */
label{gap:8px;color:#183052;font-size:13px;font-weight:800}
input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea{
  min-height:48px;border:1px solid #c6d2e3!important;border-radius:var(--op-radius-sm)!important;
  background:#fff!important;color:var(--op-ink)!important;padding:13px 15px!important;
  font:500 15px/1.45 Arial,Helvetica,sans-serif!important;box-shadow:0 1px 0 rgba(8,26,56,.02)
}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(40,89,232,.16)!important;border-color:#759bf5!important}
input[type=checkbox],input[type=radio]{accent-color:var(--op-purple)}

.primary,.quiet,.outline-button,.row-action,.danger-button,button{
  min-height:46px;border-radius:12px;font-family:Arial,Helvetica,sans-serif;font-weight:850;
  transition:transform .16s,box-shadow .16s,background .16s
}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:linear-gradient(135deg,var(--op-purple),#5421d1)!important;color:#fff!important;box-shadow:0 10px 25px rgba(111,44,255,.18)}
.primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(111,44,255,.25)}
.outline-button,.row-action{display:inline-flex;align-items:center;justify-content:center;border:1px solid #b8c6da!important;background:#fff!important;color:#2859d9!important}
.outline-button:hover,.row-action:hover{border-color:#7598e7!important;background:var(--op-soft-blue)!important}
.quiet{background:var(--op-soft-purple)!important;color:#4d25b8!important}
button:disabled{cursor:not-allowed;opacity:.58;transform:none!important}

.flash{width:var(--op-content);max-width:1180px;margin:18px auto 0;border:1px solid #bad7c3;border-radius:14px;background:#edf8f0;color:#255b37;box-shadow:0 10px 30px rgba(8,26,56,.06)}
.flash.error{border-color:#edc3bf;background:#fff2f0;color:#913a32}

/* Heroes share silhouette, contrast and spacing */
:is(.immersive-hero,.baseline-hero,.learner-starting-hero,.quality-hero,.growth-hero,.proof-dashboard-hero,.teacher-workspace-hero,.creative-hero,.live-teaching-hero,.profile-hero,.lesson-studio-hero){
  overflow:hidden;border-radius:var(--op-radius-lg)!important;box-shadow:0 24px 65px rgba(8,26,56,.15)
}
:is(.baseline-hero,.learner-starting-hero,.quality-hero,.growth-hero,.proof-dashboard-hero,.teacher-workspace-hero,.creative-hero,.live-teaching-hero,.profile-hero){
  background:radial-gradient(circle at 84% 12%,rgba(111,44,255,.42),transparent 31%),linear-gradient(128deg,var(--op-navy),var(--op-navy-2) 70%,#173f72)!important
}
:is(.baseline-hero,.learner-starting-hero,.quality-hero,.growth-hero,.proof-dashboard-hero,.teacher-workspace-hero,.creative-hero,.live-teaching-hero,.profile-hero) :is(h1,h2,h3){color:#fff!important}
:is(.baseline-hero,.learner-starting-hero,.quality-hero,.growth-hero,.proof-dashboard-hero,.teacher-workspace-hero,.creative-hero,.live-teaching-hero,.profile-hero) .eyebrow{color:var(--op-teal)!important}
.immersive-hero{min-height:560px;background:var(--op-navy)}
.immersive-hero>img{filter:saturate(.92) contrast(1.03)}
.immersive-overlay{background:linear-gradient(90deg,rgba(4,16,38,.94) 0%,rgba(4,16,38,.75) 42%,rgba(4,16,38,.2) 75%,rgba(4,16,38,.08) 100%)!important}
.immersive-copy{max-width:820px}
.immersive-copy .lead{color:#ecf3ff!important}
.immersive-facts{border:1px solid rgba(255,255,255,.17)!important;background:rgba(5,21,47,.88)!important;backdrop-filter:blur(16px)}
.baseline-page .baseline-hero>.outline-button{
  border-color:rgba(255,255,255,.62)!important;background:rgba(255,255,255,.1)!important;
  color:#fff!important;box-shadow:none!important;backdrop-filter:blur(10px)
}
.baseline-page .baseline-hero>.outline-button:hover{background:#fff!important;color:var(--op-navy)!important}
.baseline-math-answer-list{display:grid;gap:12px}
.baseline-math-help{margin:0 0 4px;color:#425579;font-size:14px;font-weight:750}
.baseline-math-answer-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,230px);gap:18px;align-items:center;
  padding:14px 16px;border:1px solid #d7dff0;border-radius:14px;background:#fff;color:var(--op-ink)
}
.baseline-math-answer-row>span{font-size:18px;font-weight:750;line-height:1.45}
.baseline-math-answer-row>input{margin:0!important;text-align:center;font-size:17px!important;font-weight:800!important}

/* Public pages */
.public-cinematic-page{background:#eef3fa}
.public-cinematic-page .shell{padding-top:24px}
.public-cinematic-page .public-promise,.public-cinematic-page .pricing-introduction{
  width:100%;margin:28px 0;padding:clamp(48px,7vw,92px);border:1px solid var(--op-line);
  border-radius:var(--op-radius-lg);background:#fff;box-shadow:var(--op-shadow)
}
.home-values,.public-steps,.pricing-tier-grid{gap:18px}
.home-values>article,.public-steps>article,.pricing-tier-card{
  border:1px solid var(--op-line)!important;border-radius:var(--op-radius)!important;background:#fff!important;box-shadow:var(--op-shadow)!important
}
.home-values>article,.public-steps>article{padding:clamp(24px,3vw,40px)}
.home-values>article:hover,.pricing-tier-card:hover{transform:translateY(-3px);box-shadow:var(--op-shadow-hover)!important}
.public-policy{max-width:1000px;padding:clamp(28px,5vw,68px);border:1px solid var(--op-line);border-radius:var(--op-radius-lg);background:#fff;box-shadow:var(--op-shadow)}
.public-policy>section{padding:30px 0;border-color:var(--op-line)}
.public-policy>section p{color:var(--op-muted);font-family:Arial,Helvetica,sans-serif;line-height:1.75}

/* Account and sign-in pages */
.login{min-height:calc(100vh - 230px);gap:clamp(32px,7vw,100px)}
.login .login-card{border-radius:26px!important;background:#fff!important}
.login-card h1{font-size:clamp(38px,4.8vw,62px)}

/* Parent and learner portals */
.parent-modern-page,.learner-modern-page{background:#edf2f9!important}
.parent-modern-page main.shell,.learner-modern-page main.shell{width:var(--op-page)!important;max-width:1440px!important;margin-inline:auto!important;padding:24px 0 80px!important}
.parent-modern-page :is(.completed-work-review,.learning-plan-section,.weekly-review-section,.passport-suggestions,.parent-insights,.mastery-family-overview,.learner-admin-grid),
.learner-modern-page :is(.completed-library,.today-panel,.explore-panel,.learner-weekly-review){
  border:1px solid var(--op-line)!important;border-radius:var(--op-radius)!important;background:#fff!important;box-shadow:var(--op-shadow)!important
}
.portal-quick-nav{border:1px solid var(--op-line)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 10px 30px rgba(8,26,56,.07)}
.portal-quick-nav a{border-radius:10px!important;color:#52647f!important}
.portal-quick-nav a.active,.portal-quick-nav a:hover{background:var(--op-soft-blue)!important;color:#234fb9!important}
.learner-list article,.learning-card,.completed-lesson-grid>a,.insight-list article{border-color:var(--op-line)!important;background:#f8faff!important}

/* Administration and operational pages */
.admin-modern-page .topbar{box-shadow:none}
.admin-app-main{background:#f3f6fb!important}
.admin-app-sidebar{background:linear-gradient(180deg,#071a38,#0c274f)!important}
.admin-app-sidebar nav a{border-radius:10px!important}
.admin-app-sidebar nav a.active,.admin-app-sidebar nav a:hover{background:rgba(255,255,255,.1)!important}
.admin-dashboard-head{padding-bottom:28px;border-bottom:1px solid var(--op-line)}
.admin-dashboard-head h1{font-size:clamp(38px,4vw,58px)}
.admin-section-block,.admin-modern-page .metric-grid article{border:1px solid var(--op-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--op-shadow)!important}
.quality-hero,.quality-section{width:var(--op-content)!important;max-width:1180px;margin-inline:auto!important}
.lesson-studio-hero{padding:clamp(28px,4vw,50px);background:#fff;box-shadow:var(--op-shadow)}
.lesson-studio-hero h1{font-size:clamp(40px,5vw,66px)}
table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid var(--op-line);border-radius:16px;background:#fff}
th{background:#edf3fb;color:#344b6d;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
th,td{padding:14px 16px;border-bottom:1px solid var(--op-line);text-align:left}
tr:last-child td{border-bottom:0}

footer{min-height:86px;padding:26px max(24px,6vw);background:var(--op-navy)!important;color:#dce7f8!important}
footer nav{flex-wrap:wrap;justify-content:center}
footer a{color:#dce7f8!important}

@media(max-width:900px){
  :root{--op-page:min(1440px,calc(100% - 28px));--op-content:min(1180px,calc(100% - 28px))}
  .topbar{height:74px;padding-inline:18px}.brand-logo{max-width:205px;height:46px}
  body:not(.admin-modern-page) .shell{padding-top:24px}
  .immersive-hero{min-height:520px}
  .parent-modern-page main.shell,.learner-modern-page main.shell{padding-top:14px!important}
}

@media(max-width:700px){
  :root{--op-page:calc(100% - 24px);--op-content:calc(100% - 24px);--op-radius-lg:22px}
  h1{font-size:clamp(40px,12vw,58px)}h2{font-size:clamp(27px,8vw,36px)}
  .topbar nav{border:1px solid rgba(255,255,255,.12)!important;border-radius:16px!important;background:#0a2043!important;box-shadow:0 22px 60px rgba(2,11,29,.46)!important}
  .topbar nav>a,.topbar nav>details>summary{width:100%;justify-content:center}
  .topbar .nav-button{margin-left:0}
  .shell>section+section,.shell>section+aside,.shell>aside+section{margin-top:18px}
  :is(.immersive-hero,.baseline-hero,.learner-starting-hero,.quality-hero,.growth-hero,.proof-dashboard-hero,.teacher-workspace-hero,.creative-hero,.live-teaching-hero,.profile-hero,.lesson-studio-hero){border-radius:22px!important}
  .immersive-overlay{background:linear-gradient(180deg,rgba(4,16,38,.45),rgba(4,16,38,.93) 58%,rgba(4,16,38,.98))!important}
  .public-cinematic-page .public-promise,.public-cinematic-page .pricing-introduction{padding:38px 22px}
  .public-policy{padding:30px 22px}
  .baseline-math-answer-row{grid-template-columns:1fr;gap:9px}.baseline-math-answer-row>input{text-align:left}
  .page-heading,.directory-heading,.section-heading,.admin-section-title,.workbook-heading{align-items:flex-start;flex-direction:column}
  th,td{padding:12px}table{display:block;overflow-x:auto}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Final page-width authority. Legacy cinematic rules used negative margins to
   simulate full bleed; on wide screens those rules can push cards off-canvas. */
html,body{max-width:100%;overflow-x:clip}
body:not(.admin-modern-page) main.shell{
  width:min(1440px,calc(100vw - 48px))!important;
  max-width:1440px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}
body:not(.admin-modern-page) main.shell>:is(section,article,div,aside,form,p,details){
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
body:not(.admin-modern-page) main.shell :is(section,article,div,aside,form,details){min-width:0;box-sizing:border-box}
body:not(.admin-modern-page) main.shell img{max-width:100%}
body.public-cinematic-page main.shell>.immersive-hero~section,
body.public-cinematic-page main.shell>.immersive-hero~p{width:100%!important;margin-left:auto!important;margin-right:auto!important}
body.public-cinematic-page .public-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:1050px){body.public-cinematic-page .public-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){
  body:not(.admin-modern-page) main.shell{width:calc(100% - 24px)!important}
  body.public-cinematic-page .public-steps{grid-template-columns:1fr}
}