/* Classroom navigation with a small inset on both sides. */
/* Rainbow tab set v1 — shared by Home, Class List, Calendar and Photos.
   The upper tabs remain exposed and clickable; on selection the chosen tab moves to the front. */
.ct-rainbow-tabs { box-sizing:border-box; padding:0 0 8px; width:calc(100% - 24px)!important; max-width:none; margin:0 12px!important; }
.ct-tab-deck { position:relative; width:100%; padding:0; isolation:isolate; }
.ct-tab-layer { display:flex; justify-content:center; align-items:stretch; position:relative; width:100%; }
.ct-tab-back { z-index:1; margin:0; padding:0; }
.ct-tab-front { z-index:3; margin:-19px 0 0; padding:0; }
.ct-tab { --tab-bg:#e8f1fe; --tab-edge:#bed4f2; position:relative; display:flex; align-items:center; justify-content:center; gap:7px;
  flex:1 1 0; min-width:0; max-width:none; font:800 13px/1.2 Arial,Helvetica,sans-serif;
  padding:9px 12px; text-align:center; color:#1e4f73!important; border:2px solid var(--tab-edge)!important;
  border-bottom-width:3px!important; border-radius:18px 18px 8px 8px!important;
  background:var(--tab-bg)!important; box-shadow:0 4px 0 rgba(27,71,110,.09)!important; text-decoration:none!important;
  cursor:pointer; transition:transform .14s,filter .14s,box-shadow .14s;
  appearance:none; -webkit-appearance:none; white-space:normal; overflow-wrap:normal; }
.ct-tab + .ct-tab { margin-left:-9px; }
.ct-tab-back .ct-tab { min-height:62px; align-items:flex-start; padding-top:9px; padding-bottom:28px; opacity:.97; }
.ct-tab-front .ct-tab { min-height:43px; padding:9px 9px 8px; }
.ct-tab:hover { filter:saturate(1.2) brightness(1.025); z-index:6; }
.ct-tab:focus-visible { outline:3px solid #215f9c!important; outline-offset:2px; z-index:12; }
.ct-tab.is-active { z-index:10; border-color:#5790c0!important; font-weight:900; box-shadow:0 5px 0 rgba(46,102,153,.18),0 0 0 2px #fff!important; transform:translateY(1px); }
.ct-tab-back .ct-tab.is-active { transform:translateY(0); }
.ct-tab-icon { display:inline-block; flex:0 0 auto; font-size:18px; line-height:1; }
.ct-tab-name { display:inline-block; }
.ct-tab[data-tab="home"] { --tab-bg:#e3f1ff; --tab-edge:#b4d6fa; }
.ct-tab[data-tab="classlist"] { --tab-bg:#e8f8d9; --tab-edge:#c2e9b1; }
.ct-tab[data-tab="calendar"] { --tab-bg:#fff2c3; --tab-edge:#f4d77d; }
.ct-tab[data-tab="photos"] { --tab-bg:#ffe1ef; --tab-edge:#f7b8d7; }
.ct-tab[data-tab="documents"] { --tab-bg:#efe5ff; --tab-edge:#d4b6fa; }
.ct-tab[data-tab="more"] { --tab-bg:#ffe8d8; --tab-edge:#f8c7a7; }
.ct-tab[data-tab="parentresources"] { --tab-bg:#daf7ef; --tab-edge:#a5e5d3; }
.ct-tab-controls { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; padding-top:13px; }
.ct-tab-controls .ct-mode-toggle { border:1px solid #bdd5ea; border-radius:999px; padding:8px 14px; background:#f2f9ff; font-weight:800; text-decoration:none!important; }
.ct-tab-controls .ct-mode-label { font-size:12px; }
.ct-workspace { gap:11px!important; margin-top:7px!important; }
.ct-menu-banner { margin-top:0!important; padding-top:0!important; }
.ct-workspace .ct-maincol { width:100%; }
.site-header .mast-actions .signout {
 display:inline-flex!important; justify-content:center; align-items:center; min-height:42px;
 padding:10px 18px!important; border-radius:12px; background:#173b63!important; color:white!important;
 border:1px solid #173b63!important; box-shadow:0 3px 0 #0e2844;
 text-decoration:none!important; font-size:13px!important; font-weight:800; white-space:nowrap;
}
.site-header .mast-actions .signout:hover { background:#245582!important; color:#fff!important; }
.ct-school-logo { display:block; width:75px; height:56px; object-fit:contain; flex:0 0 75px; border-radius:0; }
/* Pre-login: circular preschool mark with wordmark alongside. */
.ct-login-identity { display:flex; align-items:center; gap:14px; flex:0 1 auto; min-width:0; }

.ct-login-wordmark { display:block; font:900 29px/1.1 Arial,Helvetica,sans-serif; letter-spacing:-1px; white-space:nowrap; }
.ct-letter-blue { color:#2188d4; } .ct-letter-coral { color:#ed6394; }
@media (max-width:800px) {
 .ct-tab-back { padding:0; }
 .ct-tab-front { padding:0; }
 .ct-tab { gap:4px; padding-inline:6px; font-size:12px; }
 .ct-tab-icon { font-size:16px; }
 .ct-school-logo { width:64px; height:48px; flex-basis:64px; }
 .ct-login-wordmark { font-size:24px; }
}
@media (max-width:560px) {
 .ct-tab-deck { padding:0; }
 .ct-tab-back { padding:0; }
 .ct-tab-front { padding:0; margin-top:-16px; }
 .ct-tab { border-width:1px!important; border-bottom-width:2px!important; font-size:11px; border-radius:12px 12px 5px 5px!important; padding-inline:3px; }
 .ct-tab + .ct-tab { margin-left:-5px; }
 .ct-tab-back .ct-tab { min-height:55px; padding-top:8px; padding-bottom:20px; }
 .ct-tab-front .ct-tab { min-height:43px; padding:9px 2px 7px; }
 .ct-tab-icon { display:none; }
 .ct-tab-name { line-height:1.13; }
 .ct-tab-controls { padding-top:9px; }
 .ct-school-logo { width:54px; height:40px; flex-basis:54px; }
 
 .ct-login-identity { gap:7px; }
 .ct-login-wordmark { font-size:19px; letter-spacing:-.7px; }
 .login-header .brand-title { font-size:18px; }
 .login-header .brand-sub { font-size:10px; }
 .login-header-inner { min-height:84px; }
}
@media (max-width:390px) {
 .ct-tab { font-size:10px; }
 .ct-login-wordmark { font-size:17px; }
 
 .login-header .brand-title { font-size:16px; }
}
@media print { .ct-tab-deck,.ct-tab-controls { display:none!important; } }

/* Illustration-only transparent logo. */
.header-circle-logo { background:transparent!important; border:0!important; border-radius:0!important; padding:0!important; box-shadow:none!important; height:auto!important; }
.ct-school-logo { width:56px!important; height:56px!important; flex-basis:56px!important; object-fit:contain; background:transparent; }

/* Small teacher preview switch, below the classroom navigation. */
.ct-tab-controls { padding-top:8px; }
.ct-mode-checkbox { display:inline-flex; align-items:center; gap:6px; font:600 12px/1.4 Arial,sans-serif; color:#365a73; }
.ct-mode-checkbox input { width:15px; height:15px; margin:0 5px 0 0; accent-color:#245582; cursor:pointer; vertical-align:middle; }
.ct-mode-checkbox label { cursor:pointer; padding:4px 0; }