/* assets/public-v12.css */
:root{--brand:#216b52;--on-brand:#fff;--ink:#18332f;--muted:#5e706b;--cream:#f7f8f3;--line:#dce5df}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--cream)}a{color:inherit}button,input{font:inherit}a,button,input{outline-offset:5px}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}.container{max-width:1160px;margin:auto;padding:0 36px}.public-header{border-bottom:1px solid var(--line);background:#ffffffed}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:98px}.school-brand{display:flex;gap:13px;align-items:center;text-decoration:none;max-width:380px}.school-brand strong{display:block;font-size:17px;line-height:1.35}.school-brand small{display:block;font-size:12px;color:var(--muted);margin-top:3px}.school-mark{display:grid;place-items:center;width:50px;height:56px;flex-shrink:0;font-family:Georgia,serif;font-size:35px;color:var(--brand)}.school-mark img{max-height:56px;max-width:64px;object-fit:contain}.public-nav{display:flex;align-items:center;gap:27px;font-size:14px}.public-nav>a:not(.cta){text-decoration:none}.public-nav>a:hover{text-decoration:underline}.cta{display:inline-flex;align-items:center;justify-content:center;gap:20px;text-decoration:none;background:var(--brand);color:var(--on-brand);border:1px solid var(--brand);border-radius:12px;padding:13px 21px;font-weight:650;font-size:14px;line-height:1.5}.cta:hover{filter:brightness(.94)}.cta.secondary{background:transparent;color:var(--ink);border-color:#bfcfc5}.eyebrow{font-size:11px;font-weight:750;letter-spacing:2.2px;text-transform:uppercase;color:var(--muted)}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:center;padding-top:88px;padding-bottom:80px}.hero h1{font-size:clamp(40px,4.4vw,62px);line-height:1.08;letter-spacing:-2.8px;font-weight:650;margin:18px 0 25px;max-width:660px;overflow-wrap:anywhere}.hero-copy>p{font-size:18px;line-height:1.8;max-width:490px;color:var(--muted)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}.hero-foot{font-size:12px!important;margin-top:21px}.hero-art{background:#e7ede0;position:relative;border-radius:90px 22px 90px 22px;min-height:455px;padding:38px 26px;overflow:hidden;display:grid;place-items:center}.art-ring{position:absolute;width:320px;height:320px;border:1px solid #b8c8b2;border-radius:50%;right:-90px;top:-70px}.art-ring:after{content:'';position:absolute;inset:30px;border:1px solid #c7d3c2;border-radius:50%}.art-dots{position:absolute;bottom:30px;left:28px;color:#5c7560;font-size:26px;letter-spacing:12px}.campus-card{position:relative;background:#fff;border:1px solid #d8e2d9;box-shadow:0 22px 45px #29473518;border-radius:20px;width:100%;padding:25px;transform:rotate(-3deg)}.campus-header{display:flex;align-items:center;gap:10px;border-bottom:1px solid #e6ebe6;padding-bottom:20px;font-size:12px;letter-spacing:1px;text-transform:uppercase}.campus-dot{width:9px;height:9px;border-radius:50%;background:#779f7b}.campus-card h2{font-size:25px;line-height:1.25;letter-spacing:-.7px;margin:24px 0 18px}.illustration-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.illustration-grid span{height:53px;border-radius:8px;background:#ebefdf}.illustration-grid span:nth-child(3n){background:#eadfcc}.illustration-grid span:nth-child(4n){background:#dae5ed}.illustration-grid span:nth-child(7n){background:#eee}.art-label{position:relative;border-radius:14px;background:#173b32;color:#fff;padding:15px 22px;justify-self:end;margin-top:-14px;margin-right:-12px;transform:rotate(3deg);box-shadow:0 10px 25px #173b3215;font-size:13px}.art-label strong{display:block;font-size:17px}.section{padding-top:72px;padding-bottom:72px;scroll-margin-top:20px}.section-heading{display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:35px}.section h2{font-size:34px;line-height:1.2;letter-spacing:-1.1px;margin:12px 0}.section-heading>p{color:var(--muted);max-width:390px;margin:0}.levels-section{background:#fff;border-block:1px solid var(--line)}.levels-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.level-card{border:1px solid var(--line);border-radius:16px;padding:28px;background:#fbfcf8;min-height:175px;position:relative;overflow:hidden}.level-card:nth-child(3n+2){background:#f9f4eb}.level-card:nth-child(3n+3){background:#eef4f8}.level-number{font-size:12px;color:var(--muted);letter-spacing:2px}.level-card h3{font-size:23px;letter-spacing:-.5px;font-weight:600;position:relative;z-index:1;margin:21px 0 10px;overflow-wrap:anywhere}.level-line{position:absolute;width:120px;height:120px;border:1px solid #b4c4b5;border-radius:50%;right:-25px;top:47px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.about-copy{font-size:18px;color:var(--muted);white-space:pre-line}.strength{display:flex;align-items:center;gap:17px;padding:23px 0;border-bottom:1px solid var(--line)}.strength span{display:grid;place-items:center;border-radius:50%;width:34px;height:34px;background:#e5ecdf;flex-shrink:0}.strength h3{font-weight:550;font-size:17px;margin:0}.portal-invite{display:flex;gap:40px;align-items:center;justify-content:space-between;border-radius:22px;padding:42px;background:#183b32;color:#fff;margin-bottom:70px}.portal-invite h2{font-size:30px;letter-spacing:-.8px;line-height:1.2;margin:0 0 10px}.portal-invite p{color:#d1dfd8;max-width:610px;margin:0}.portal-invite .cta{white-space:nowrap;background:#fff;border-color:#fff;color:#193c33}.public-footer{border-top:1px solid var(--line);padding:35px 0}.footer-grid{display:flex;justify-content:space-between;gap:35px}.footer-grid p{font-size:13px;color:var(--muted);margin:5px 0}.footer-grid h2{font-size:15px;margin:0 0 8px}.contact-details{font-size:13px;display:grid;gap:5px;max-width:360px;white-space:pre-line}.demo-note{font-size:11px;color:var(--muted);margin:25px 0 0}.skip-link{position:absolute;top:-80px;left:15px;background:#fff;z-index:5;padding:12px}.skip-link:focus{top:10px}.login-layout{min-height:calc(100vh - 180px);display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding-block:60px}.login-intro h1{font-size:48px;font-weight:600;letter-spacing:-2px;line-height:1.12;margin:16px 0 24px}.login-intro>p{color:var(--muted);font-size:18px;max-width:420px}.login-perks{margin:30px 0;list-style:none;padding:0;color:var(--ink)}.login-perks li{margin:13px 0;display:flex;gap:12px}.login-perks li:before{content:'✓';color:var(--brand)}.login-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:36px;box-shadow:0 15px 50px #183b3206}.login-card h2{font-size:24px;letter-spacing:-.6px;margin:0 0 5px}.login-card .intro{color:var(--muted);font-size:14px;margin:0 0 25px}.login-form label{display:block;font-size:13px;font-weight:650;margin-bottom:8px}.login-form input{width:100%;padding:13px 14px;min-height:49px;border:1px solid #bfcec6;border-radius:10px;color:var(--ink);background:#fff;font-size:16px}.login-form input:focus{outline:2px solid var(--brand);outline-offset:2px}.form-field{margin-bottom:20px}.password-wrap{position:relative}.password-wrap input{padding-right:83px}.password-wrap button{position:absolute;right:6px;top:5px;bottom:5px;border:0;background:transparent;font-size:12px;color:var(--ink);padding:0 12px}.login-form .cta{width:100%;margin-top:4px;font-size:15px}.text-button{border:0;background:none;color:var(--ink);padding:8px 0;font-size:13px;text-decoration:underline}.forgot-row{text-align:right;margin-top:-10px;margin-bottom:15px}.error{font-size:13px;color:#a42e2e;margin:0 0 14px;min-height:0}.error:empty{display:none}.help-box{font-size:13px;background:#f1f4ed;border-radius:10px;padding:14px;margin-bottom:16px}.demo-accounts{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;font-size:12px;color:var(--muted)}.demo-accounts summary{cursor:pointer;color:var(--ink);font-weight:600}.demo-accounts table{width:100%;border-collapse:collapse;margin:12px 0}.demo-accounts td,.demo-accounts th{text-align:left;padding:5px 4px;border-bottom:1px solid var(--line);font-weight:400}.demo-accounts code{color:var(--ink);word-break:break-word}.login-footer{text-align:center;font-size:12px;padding:20px;color:var(--muted)}.session-hint{font-size:13px;margin-bottom:18px;padding:12px;background:#edf3eb;border-radius:10px}.session-hint a{display:block;font-weight:600;margin-top:7px}@media(max-width:900px){.public-nav{gap:14px}.hero{gap:30px;padding-top:55px}.hero-art{min-height:375px;padding:27px 18px}.hero h1{font-size:46px}.about-grid{gap:35px}.login-layout{gap:35px}.login-intro h1{font-size:40px}.login-card{padding:27px}}@media(max-width:680px){.container{padding-inline:22px}.header-inner{min-height:85px;gap:12px}.school-brand strong{font-size:14px}.school-brand small{font-size:11px}.school-mark{width:38px}.school-mark img{max-width:38px;max-height:46px}.public-nav>a:not(.cta){display:none}.public-nav .cta{padding:10px 12px;font-size:12px;gap:6px}.hero{grid-template-columns:1fr;gap:40px;padding-top:45px;padding-bottom:45px}.hero h1{font-size:45px;letter-spacing:-2px}.hero-copy>p{font-size:16px}.hero-art{min-height:325px;max-width:460px;width:100%;margin:auto;padding:28px}.campus-card h2{font-size:23px}.illustration-grid span{height:34px}.section{padding-block:45px}.section h2{font-size:29px}.section-heading{display:block}.section-heading>p{margin-top:20px}.levels-grid{grid-template-columns:1fr}.level-card{min-height:130px;padding:21px}.level-card h3{margin:10px 0}.about-grid{grid-template-columns:1fr;gap:15px}.about-copy{font-size:16px}.portal-invite{display:block;padding:27px;margin-bottom:45px}.portal-invite h2{font-size:26px}.portal-invite .cta{margin-top:25px}.footer-grid{display:block}.contact-details{margin-top:20px}.login-layout{display:block;padding-block:35px}.login-intro h1{font-size:33px;margin:10px 0}.login-intro>p{font-size:15px;margin-bottom:25px}.login-perks{display:none}.login-card{padding:24px}.login-header .public-nav a{display:inline}.login-footer{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* assets/public-media-v14.css */
.school-carousel{min-width:0;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 45px #173b320c;overflow:hidden}.carousel-slide{margin:0}.carousel-slide>img{width:100%;aspect-ratio:1.3;object-fit:cover;display:block}.carousel-slide figcaption{padding:23px 27px 12px;min-height:146px}.carousel-slide figcaption>span{font-size:10px;text-transform:uppercase;letter-spacing:2px;color:var(--muted)}.carousel-slide h2{font-size:25px;line-height:1.25;margin:10px 0;font-weight:600;letter-spacing:-.5px;overflow-wrap:anywhere}.carousel-controls{display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 16px 20px}.carousel-controls button{border:1px solid var(--line);border-radius:50%;width:39px;height:39px;background:white;color:var(--ink);font-size:17px}.carousel-controls button:hover{background:#edf2ec}.carousel-dots{display:flex;align-items:center;gap:0}.carousel-dots button{width:25px;height:36px;position:relative;border:0;border-radius:6px}.carousel-dots button:after{content:'';position:absolute;width:7px;height:7px;inset:0;margin:auto;background:#bac9be;border-radius:50%}.carousel-dots button[aria-current=true]:after{background:var(--brand);width:10px;height:10px}.carousel-count{font-size:11px;color:var(--muted);white-space:nowrap}.level-visual{display:flex;align-items:start;justify-content:space-between;gap:16px}.level-visual img{width:135px;height:135px;border-radius:50%;object-fit:cover;border:5px solid #ffffffa8}.level-card p{font-size:14px;line-height:1.75;color:var(--muted);margin:0;white-space:pre-line;overflow-wrap:anywhere}.level-card h3{margin:22px 0 10px}.level-number{margin-top:8px}@media(max-width:680px){.school-carousel{max-width:460px;width:100%;margin:auto}.carousel-slide figcaption{padding:20px 22px 5px;min-height:125px}.carousel-slide h2{font-size:23px}.carousel-controls{gap:5px}.level-visual img{width:115px;height:115px}.level-card{padding:25px}.level-card h3{margin:18px 0 8px}} .carousel-controls{flex-wrap:wrap}
/* assets/interface-public-v30.css */
@media screen{ body[data-page]{--ink:#282c40;--muted:#687187;--line:#e5e7ef;--cream:#f7f8fc;background:var(--cream);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}body[data-page] *{box-sizing:border-box}body[data-page] [hidden]{display:none!important}body[data-page] .container{max-width:1260px;padding-inline:32px;min-width:0}body[data-page] .public-header{background:#ffffffed;border-color:var(--line);backdrop-filter:blur(15px)}body[data-page] .header-inner{min-height:88px;gap:25px}body[data-page] .school-mark{font-family:inherit;border-radius:14px;font-weight:750;background:#fff;font-size:32px;letter-spacing:-2px;width:46px;height:48px;min-width:46px}body[data-page] .school-mark img{max-width:55px;max-height:48px;object-fit:contain}body[data-page] .school-brand{min-width:0;gap:12px}body[data-page] .school-brand>span:last-child{min-width:0}body[data-page] .school-brand strong{font-size:16px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}body[data-page] .school-brand small{font-size:11px;color:var(--muted)}body[data-page] .public-nav{font-size:13px;gap:24px;min-width:0}body[data-page] .public-nav a{line-height:1.5}body[data-page] .cta{border-radius:11px;font-size:13px;min-height:44px;box-shadow:0 3px 9px #28224307;padding:12px 19px}body[data-page] .cta.secondary{border-color:#d9dce8;background:#fff;color:var(--ink)}body[data-page] .eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--muted)}body[data-page] .hero{gap:64px;padding-block:75px 70px}body[data-page] .hero h1{font-size:clamp(36px,4.1vw,59px);font-weight:700;letter-spacing:-2px;line-height:1.13}body[data-page] .hero-copy>p{font-size:17px;color:var(--muted);line-height:1.9}body[data-page] .school-carousel{border-radius:22px;border:1px solid var(--line);box-shadow:0 12px 50px #2a24440a;overflow:hidden}body[data-page] .level-card{border-radius:18px;background:#fff;border-color:var(--line);padding:29px}body[data-page] .level-card:nth-child(3n+2){background:#fbf9ff}body[data-page] .level-card:nth-child(3n+3){background:#f5f9fc}body[data-page] .level-card h3{font-size:24px;font-weight:650;letter-spacing:-.6px}body[data-page] .level-card p{font-size:14px;line-height:1.8;color:var(--muted)}body[data-page] .level-photo{border-radius:15px}body[data-page] .section h2{font-weight:650;letter-spacing:-1px}body[data-page] .section-heading>p{font-size:15px;line-height:1.8}body[data-page] .strength{border-color:var(--line);border-radius:12px}body[data-page] .contact-card{border-radius:18px;border-color:var(--line)}body[data-page] :is(button,a,input,textarea,select):focus-visible{outline:3px solid var(--brand);outline-offset:4px}body[data-page] :is(button,a){touch-action:manipulation}body[data-page=login]{background:radial-gradient(ellipse at 15% 25%,#e9e4fb55,transparent 50%),#f7f8fc;min-height:100dvh;display:flex;flex-direction:column}body[data-page=login] .login-layout{width:100%;max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,430px);gap:100px;align-items:center;padding-block:70px;flex:1}body[data-page=login] .login-intro h1{font-size:clamp(40px,4.5vw,60px);line-height:1.13;font-weight:700;letter-spacing:-2px;margin:18px 0 24px}body[data-page=login] .login-intro>p{font-size:16px;line-height:1.9;max-width:430px;color:var(--muted)}body[data-page=login] .login-perks{font-size:13px;line-height:2.3;color:var(--muted);padding-left:20px;margin-top:25px}body[data-page=login] .login-perks li::marker{color:var(--brand)}body[data-page=login] .login-card{border:1px solid var(--line);border-radius:22px;background:white;padding:32px;box-shadow:0 12px 50px #2a244408;min-width:0}body[data-page=login] .login-card h2{font-size:25px;font-weight:650;letter-spacing:-.6px;margin:0 0 9px}body[data-page=login] .login-card>.intro{font-size:13px;color:var(--muted);margin-bottom:25px}body[data-page=login] .login-form{gap:19px}body[data-page=login] .form-field label{font-size:12px;font-weight:600;margin-bottom:7px;display:block}body[data-page=login] .form-field input{font-size:14px;min-height:48px;border:1px solid #dfe2ee;border-radius:10px;padding:12px 14px;background:#fbfcff;color:var(--ink);max-width:100%;width:100%}body[data-page=login] .form-field input:focus{outline:2px solid #dfdcf2;border-color:var(--brand);background:#fff}body[data-page=login] .password-wrap{position:relative;min-width:0}body[data-page=login] .password-wrap input{padding-right:78px}body[data-page=login] .password-wrap button{font-size:11px;right:9px;min-height:35px;border-radius:7px;padding:7px 9px;color:var(--muted);top:6px}body[data-page=login] .forgot-row{margin-top:-7px}body[data-page=login] .text-button{font-size:12px;color:var(--brand);min-height:35px}body[data-page=login] .login-form>.cta{min-height:48px;width:100%;font-size:14px;border-radius:11px}body[data-page=login] .help-box{border:1px solid var(--line);background:#f6f6fc;font-size:12px;border-radius:10px;padding:13px;line-height:1.8}body[data-page=login] .demo-accounts{border-color:var(--line);border-top:1px solid var(--line);margin-top:25px;padding-top:20px;font-size:11px}body[data-page=login] .demo-accounts summary{font-size:12px;font-weight:550;cursor:pointer;color:var(--muted);line-height:1.7}body[data-page=login] .demo-accounts p{line-height:1.8;font-size:11px}body[data-page=login] .demo-accounts table{width:100%;border-collapse:collapse;font-size:11px}body[data-page=login] .demo-accounts th,body[data-page=login] .demo-accounts td{padding:10px 7px;text-align:left;border-bottom:1px solid var(--line)}body[data-page=login] .login-footer{font-size:10px;color:var(--muted);line-height:1.8;padding:16px 25px 22px;text-align:center}body[data-page=login] .session-hint{border:1px solid var(--line);background:#f4f6fc;border-radius:10px;padding:13px;margin-bottom:20px;font-size:12px;line-height:1.8}body[data-page=login] .session-hint a{font-weight:600;color:var(--brand)} } @media screen and (max-width:1000px){body[data-page] .container{padding-inline:27px}body[data-page=login] .login-layout{gap:45px;grid-template-columns:minmax(0,1fr) minmax(320px,410px);padding-block:55px}body[data-page=login] .login-intro h1{font-size:43px}body[data-page=login] .login-intro>p{font-size:15px}body[data-page=login] .login-card{padding:28px}body[data-page] .hero{gap:35px}body[data-page] .public-nav{gap:17px}body[data-page] .levels-grid{gap:15px}body[data-page] .level-card{padding:23px}} @media screen and (max-width:760px){body[data-page] .container{padding-inline:21px}body[data-page] .header-inner{min-height:78px;padding-block:12px;gap:14px;flex-wrap:wrap}body[data-page] .school-brand strong{font-size:14px}body[data-page] .school-brand small{font-size:10px}body[data-page] .school-mark{width:38px;min-width:38px;height:42px;font-size:28px}body[data-page] .public-nav{flex-wrap:wrap;gap:11px 17px;font-size:12px;width:100%}body[data-page] .public-nav>.cta{margin-left:auto;font-size:12px;min-height:42px;padding:10px 13px}body[data-page] .hero{grid-template-columns:minmax(0,1fr);gap:35px;padding-block:42px 45px}body[data-page] .hero h1{font-size:clamp(35px,7.7vw,48px);letter-spacing:-1.5px;margin:17px 0 22px}body[data-page] .hero-copy>p{font-size:16px;line-height:1.9;max-width:100%}body[data-page] .school-carousel{border-radius:18px;min-width:0;max-width:100%}body[data-page] .hero-actions{gap:10px;display:flex;flex-wrap:wrap}body[data-page] .hero-actions a{flex:1 1 200px;font-size:12px;min-height:45px}body[data-page] .section{padding-block:44px}body[data-page] .section-heading{display:block;margin-bottom:25px}body[data-page] .section h2{font-size:29px}body[data-page] .section-heading>p{font-size:14px;margin-top:17px}body[data-page] .levels-grid{grid-template-columns:1fr;gap:15px}body[data-page] .level-card{padding:24px;min-height:0}body[data-page] .about-grid{grid-template-columns:1fr;gap:28px}body[data-page] .about-copy{font-size:16px;line-height:1.9}body[data-page] .contact-card{padding:25px}body[data-page=login] .header-inner{min-height:78px;flex-wrap:nowrap}body[data-page=login] .public-nav{width:auto;font-size:11px;flex-shrink:0}body[data-page=login] .login-layout{display:block;padding-block:35px 30px;max-width:530px;width:100%}body[data-page=login] .login-intro{padding:0 4px 27px}body[data-page=login] .login-intro .eyebrow{font-size:9px}body[data-page=login] .login-intro h1{font-size:35px;letter-spacing:-1.2px;margin:14px 0 15px;line-height:1.2}body[data-page=login] .login-intro h1 br{display:none}body[data-page=login] .login-intro>p{font-size:14px;line-height:1.9;max-width:100%;margin-bottom:0}body[data-page=login] .login-perks{display:none}body[data-page=login] .login-card{padding:27px 23px;border-radius:18px}body[data-page=login] .login-card h2{font-size:24px}body[data-page=login] .form-field input{font-size:16px;min-height:49px}body[data-page=login] .password-wrap button{font-size:11px;min-height:37px}body[data-page=login] .form-field label{font-size:12px}body[data-page=login] .forgot-row .text-button{min-height:42px;font-size:12px}body[data-page=login] .login-footer{padding:0 25px 24px;font-size:10px}body[data-page=login] .demo-accounts summary{min-height:35px}} @media screen and (max-width:380px){body[data-page] .container{padding-inline:16px}body[data-page] .school-brand{gap:8px}body[data-page] .school-brand strong{font-size:12px}body[data-page=login] .school-brand small{display:none}body[data-page=login] .public-nav{font-size:10px}body[data-page=login] .login-card{padding:24px 19px}body[data-page=login] .login-intro h1{font-size:31px}body[data-page] .hero h1{font-size:35px}} @media(prefers-reduced-motion:reduce){body[data-page] *,body[data-page] *:before,body[data-page] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* assets/responsive-v31.css */
@media screen { .ui30 .app > div, .ui30 .wrap, .ui30 #view, .ui30 :is(.card, .fields, .filters, .toolbar, .title, .row, .split, .grid, .family-screen, .family-day, .teacher-editor, .ui30-dashboard-main, .ui30-dashboard-rail, .message-inbox, .message-conversation) { min-inline-size: 0; max-inline-size: 100%; } .ui30 .wrap { container: workspace / inline-size; } .ui30 #modalForm { container: modal-form / inline-size; } .ui30 #nav .ui30-nav-label, .ui30 #mobileNavigation .ui30-nav-label { display: block; inline-size: auto; min-inline-size: 0; max-inline-size: 100%; flex: 1 1 auto; font: inherit; font-size: 12px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; } .ui30 #ui30BottomNavigation button > span { display: block; inline-size: auto; min-inline-size: 0; max-inline-size: 100%; font: inherit; font-size: 11px; line-height: 1.35; white-space: normal; overflow-wrap: normal; } .ui30 #ui30BottomNavigation button { align-content: start; } .ui30 #view h1 { font-size: clamp(23px, calc(19px + .8vw), 31px); line-height: 1.25; letter-spacing: -.65px; } .ui30 #view h2 { font-size: clamp(16px, calc(14px + .3vw), 19px); line-height: 1.45; } .ui30 #view h3 { font-size: clamp(14px, calc(12px + .25vw), 16px); line-height: 1.5; } .ui30 .title, .ui30 .row { flex-wrap: wrap; } .ui30 :is(.title, .row) > :is(div, p, h1, h2, h3, strong, label) { min-inline-size: 0; max-inline-size: 100%; } .ui30 :is(.title, .toolbar, .row, .actions) > button { max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; } .ui30 .row > :is(h2, h3) { flex: 1 1 12rem; } .ui30 :is(.card, .family-childbar, .ux24-plan-list) { padding: clamp(15px, 1.7vw, 23px); } .ui30 .family-day { padding: 14px; overflow: visible; } .ui30 .family-day-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 0 0 13px; padding: 0 0 12px; inline-size: auto; min-inline-size: 0; border-bottom: 1px solid var(--line); background: transparent; } .ui30 .family-day.has-assessment .family-day-heading { background: transparent; } .ui30 .family-day-heading > :is(h2, span) { margin: 0; inline-size: auto; max-inline-size: 100%; min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; } .ui30 .family-day-heading > h2 { font-size: 16px; line-height: 1.45; } .ui30 .family-day-heading > span { font-size: 12px; line-height: 1.65; } .ui30 .family-day-heading > .badge { font-size: 11px; justify-self: start; } .ui30 .family-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 14px; align-items: start; } .ui30 .ui30-plan-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 12px; align-items: start; } .ui30 .ui30-plan-day { padding: 10px; } .ui30 .ui30-plan-day > h3 { font-size: 12px; position: static; padding: 6px 2px 12px; } .ui30 .agenda-item > b, .ui30 .family-lesson h3 { font-size: 14px; line-height: 1.55; } .ui30 .agenda-item > :is(span, strong) { font-size: 11px; line-height: 1.65; } .ui30 .family-lesson > .row { display: flex; flex-wrap: wrap; gap: 5px 10px; } .ui30 .family-course-label { min-inline-size: 0; max-inline-size: 100%; } .ui30 .family-course-label i { flex: 0 0 8px; width: 8px; height: 8px; } .ui30 .fields { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .ui30 .filters, .ui30 .teacher-scope, .ui30 .family-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)) !important; align-items: end; } .ui30 :is(.fields, .filters, .teacher-scope, .family-filters) > * { min-inline-size: 0; max-inline-size: 100%; } .ui30 :is(.fields, .filters, .teacher-scope, .family-filters) > .full { grid-column: 1 / -1; } .ui30 :is(input, select, textarea) { min-inline-size: 0; max-inline-size: 100%; } .ui30 .family-week-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; } .ui30 .family-week-nav > * { min-inline-size: 0; max-inline-size: 100%; } .ui30 .family-week-nav label { min-width: 0; } .ui30 .family-week-nav button { min-width: 0; } .ui30 .family-childbar { display: flex; flex-flow: row wrap; align-items: center; } .ui30 .family-childbar > div { flex: 1 1 13rem; } .ui30 .family-childbar > label { flex: 1 1 12rem; min-width: 0; } .ui30 .family-childbar > span { flex: 1 1 12rem; max-width: none; } .ui30 .ui30-dashboard-rail { position: static; top: auto; height: auto; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; background: none; border: 0; overflow: visible; } .ui30 .ui30-dashboard-rail > .card { margin: 0; } .ui30 .ui30-metrics, .ui30 .stats, .ui30 .family-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 12px; } .ui30 .ui30-metric { padding: 15px; } .ui30 .ui30-metric-label { display: flex; align-items: center; flex-wrap: wrap; font-size: 11px; } .ui30 .ui30-metric > strong { font-size: clamp(24px, 2.5vw, 30px); } .ui30 .ui30-welcome { padding: clamp(20px, 2vw, 28px); } .ui30 .ui30-welcome h2 { color: inherit; font-size: clamp(21px, 2vw, 29px); line-height: 1.3; } .ui30 .ui30-welcome > div:first-child { min-width: 0; } .ui30 .ui30-task { flex-wrap: wrap; } .ui30 .ui30-task > div { flex: 1 1 10rem; } .ui30 .ui30-task strong { font-size: 13px; line-height: 1.55; } .ui30 .ui30-task p { font-size: 12px !important; } .ui30 .community-layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, .35fr); } .ui30 .community-sidebar { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; } .ui30 .course-directory, .ui30 .teacher-course-grid, .ui30 .admin-quick-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .ui30 .tablewrap { max-inline-size: 100%; min-inline-size: 0; overflow-x: auto; overflow-y: visible; } .ui30 .tablewrap td, .ui30 .tablewrap th { overflow-wrap: anywhere; } .ui30 .ui30-dialog { min-width: 0; } .ui30 #modal > .row { display: flex; flex-wrap: nowrap; align-items: start; } .ui30 #modal > .row h2 { flex: 1 1 auto; min-width: 0; font-size: clamp(17px, 1.6vw, 21px); } .ui30 #modal > .row > button { flex: 0 0 39px; } .ui30 #modalForm > .actions { display: flex; flex-wrap: wrap; } .ui30 #modalForm > .actions > button { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; } .ui30 :is(.pay19-layout, .fin21-review-layout, .message-layout) > * { min-width: 0; max-width: 100%; } .ui30 .pay19-summary { top: 0; } .ui30 .rec29-filter-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .ui30 .rec29-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); } .ui30 .fin-tabs { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; } .ui30 .fin-tabs > button { flex: 1 1 8.5rem; min-width: 0; max-width: 100%; white-space: normal; line-height: 1.5; font-size: 12px; min-height: 43px; } .ui30 .admin-subtabs { flex-wrap: wrap; overflow: visible; } .ui30 .admin-subtabs > button { flex: 0 1 auto; min-width: 0; max-width: 100%; white-space: normal; line-height: 1.5; } .ui30 .fin-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .ui30 .fin-summary > .card { display: grid; justify-items: start; align-content: start; gap: 10px; margin: 0; } .ui30 .fin-summary > .card > span { font-size: 12px; line-height: 1.65; min-width: 0; } .ui30 .fin-summary > .card > strong { font-size: clamp(23px, 2.4vw, 29px); line-height: 1.35; overflow-wrap: anywhere; max-width: 100%; } .ui30 .mini-calendar .calendar-day { display: grid; place-content: center; justify-items: center; gap: 3px; padding: 4px 0; height: auto; min-height: 38px; min-width: 0; font-size: 12px; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; overflow-wrap: normal; word-break: normal; } .ui30 .mini-calendar .calendar-day i { margin: 0; } .ui30 .ui30-days { display: none; } .ui30 .family-day[data-selected=false], .ui30 .ui30-plan-day[data-selected=false] { display: block; } } @media screen and (min-width: 1025px) and (max-width: 1260px) { .ui30 #nav .ui30-nav-label, .ui30 #nav > .ux24-nav-label { display: none; } .ui30 #nav button { width: 100%; gap: 0; } } @media screen and (pointer: coarse) { .ui30 .mini-calendar .calendar-day { min-height: 44px; } } @supports (font-size: 1cqi) { @media screen { .ui30 #view h1 { font-size: clamp(23px, calc(19px + 1cqi), 31px); } .ui30 #view h2 { font-size: clamp(16px, calc(14px + .45cqi), 19px); } .ui30 #view h3 { font-size: clamp(14px, calc(12px + .4cqi), 16px); } .ui30 #view .family-day-heading h2 { font-size: 16px; } .ui30 #view .ui30-welcome h2 { font-size: clamp(21px, calc(18px + 1.1cqi), 29px); } } } @container workspace (max-width: 940px) { .ui30 .ui30-dashboard, .ui30 .community-layout { grid-template-columns: minmax(0, 1fr); } .ui30 .ui30-dashboard-rail, .ui30 .community-sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); align-items: start; gap: 18px; } .ui30 .ui30-dashboard-rail > .card { margin: 0; } } @container workspace (max-width: 740px) { .ui30 .family-week, .ui30 .ui30-plan-week { display: block; } .ui30 .family-day, .ui30 .ui30-plan-day { max-height: none; margin-bottom: 16px; } .ui30 .family-day[data-selected=false], .ui30 .ui30-plan-day[data-selected=false] { display: none; } .ui30 .ui30-days { display: grid; grid-template-columns: repeat(var(--ui30-day-count, 5), minmax(0, 1fr)); gap: clamp(4px, .8cqi, 8px); padding: 2px; margin: 17px 0; overflow: visible; } .ui30 .ui30-days button { display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 76px; min-width: 0; padding: 10px 4px 7px; background: #fff; border: 1px solid var(--line); border-radius: 11px; } .ui30 .ui30-days button.active { background: var(--ui30-primary); border-color: var(--ui30-primary); color: var(--ui30-on-primary); } .ui30 .ui30-days button small { font-size: 11px; line-height: 1.4; } .ui30 .ui30-days button strong { font-size: 18px; line-height: 1.3; } .ui30 .ui30-days button span { font-size: 10px; line-height: 1.4; min-height: 14px; } .ui30 .family-day-heading { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 7px 12px; } .ui30 .family-day-heading > .badge { grid-column: 1 / -1; } .ui30 .family-lesson { padding: 16px; } .ui30 .family-lesson > .row { margin-bottom: 9px; } .ui30 .family-lesson h3 { font-size: 15px; } .ui30 .family-lesson p { font-size: 13px; } .ui30 .ux24-plan-layout:not(.ui30-week-layout) { grid-template-columns: minmax(0, 1fr); } .ui30 .ux24-list-tools { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .ui30 .ui30-plan-day { overflow: visible; } .ui30 .ui30-plan-day > h3 { position: static; } } @container workspace (max-width: 520px) { .ui30 .family-week-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .ui30 .family-week-nav label { font-size: 12px; } .ui30 .family-week-nav button { min-height: 44px; } .ui30 .family-day-heading { grid-template-columns: minmax(0, 1fr); } .ui30 .family-day-heading > .badge { grid-column: auto; } .ui30 .family-day { padding: 15px; } .ui30 .family-legend { gap: 8px; } .ui30 .ui30-welcome-art { display: none; } .ui30 .ui30-metric-label { font-size: 11px; } .ui30 .learner-summary { grid-template-columns: minmax(0, 1fr); } .ui30 .learner-summary .card { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; margin: 0; } .ui30 .learner-summary strong { font-size: 27px; } .ui30 .learner-summary span { font-size: 12px; } .ui30 .learner-summary button { width: auto; min-height: 42px; } .ui30 .family-activity-row { flex-direction: column; align-items: stretch; gap: 12px; } .ui30 .family-row-end { min-width: 0; width: 100%; text-align: left; justify-items: start; } .ui30 .message-layout { grid-template-columns: minmax(0, 1fr); } .ui30 .rec29-heading { flex-wrap: wrap; } } @container modal-form (max-width: 720px) { .ui30 .pay19-layout, .ui30 .fin21-review-layout { grid-template-columns: minmax(0, 1fr); } .ui30 .pay19-summary { position: static; } .ui30 .fin21-picker-filters, .ui30 .adm27-builtins { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } } @container modal-form (max-width: 490px) { .ui30 #modal .fields, .ui30 #modal .split { grid-template-columns: minmax(0, 1fr) !important; } .ui30 #modal .full { grid-column: 1 / -1; } .ui30 #modal .rec29-health-grid, .ui30 #modal .rec29-detail-grid, .ui30 #modal .rec29-contacts { grid-template-columns: minmax(0, 1fr); } .ui30 #modal .fin18-line-fields { grid-template-columns: minmax(0, 1fr); } .ui30 #modalForm > .actions > button { flex: 1 1 10rem; } .ui30 .pay19-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr)); } } @media screen and (max-width: 1024px) { .ui30 .wrap { padding-bottom: calc(var(--ui31-dock-height, 76px) + 26px); } .ui30 #ui30BottomNavigation { padding-top: 9px; padding-bottom: max(10px, env(safe-area-inset-bottom)); } .ui30 #ui30BottomNavigation button { min-height: 44px; gap: 5px; padding: 5px 2px; } .ui30 .toast { bottom: calc(var(--ui31-dock-height, 76px) + 14px); } .ui30 .app > div > header { min-height: 68px; } } @supports not (container-type: inline-size) { @media screen and (max-width: 1024px) { .ui30 .family-week, .ui30 .ui30-plan-week { display: block; } .ui30 .family-day[data-selected=false], .ui30 .ui30-plan-day[data-selected=false] { display: none; } .ui30 .ui30-days { display: grid; grid-template-columns: repeat(var(--ui30-day-count,5), minmax(0,1fr)); gap: 6px; } .ui30 .ui30-days button { display: grid; justify-items: center; gap: 5px; min-height: 76px; padding: 8px 4px; } .ui30 .ui30-days small, .ui30 .ui30-days span { font-size: 10px; } .ui30 .ui30-days strong { font-size: 18px; } .ui30 .ui30-days .active { background: var(--ui30-primary); color: var(--ui30-on-primary); } } } @media screen { body[data-page] .container { min-width: 0; max-width: 100%; } body[data-page] .public-header .container { max-width: 1260px; } body[data-page] .hero, body[data-page] .section > .container { max-width: 1260px; } body[data-page=login] .login-layout { max-width: 1160px; } body[data-page] .public-nav { flex-wrap: wrap; } body[data-page] .hero h1 { font-size: clamp(32px, calc(24px + 2.4vw), 59px); line-height: 1.15; } body[data-page] .login-intro h1 { font-size: clamp(29px, calc(23px + 2.2vw), 60px); line-height: 1.2; } body[data-page] .levels-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } body[data-page] :is(.level-card, .hero-copy, .login-intro, .login-card) { min-width: 0; max-width: 100%; } body[data-page] :is(.school-brand, .school-brand span, .hero-actions a) { min-width: 0; max-width: 100%; } body[data-page] :is(h1,h2,h3,p,label,button) { overflow-wrap: anywhere; } } @media print { .ui30 .ui30-days, #ui30BottomNavigation { display: none !important; } .ui30 .family-day[data-selected=false], .ui30 .ui30-plan-day[data-selected=false] { display: block; } .ui30 .family-day-heading { margin: 0 0 10px; } }