/* Classroom workspace: visual companion to the school administration dashboard. */
:root{
  --school-ink:#263650;
  --school-copy:#566277;
  --school-teal:#147d78;
  --school-teal-dark:#0d625f;
  --school-coral:#e97862;
  /* --school-coral and --school-blue are decoration only: white on coral is
     2.87:1, coral on the cream page is 2.61:1 and white on the blue is 3.52:1,
     all under the 4.5:1 AA bar for normal text. These carry text instead. */
  --school-coral-deep:#b34a34;
  --school-coral-deep-hover:#9c3f2c;
  --school-coral-text:#9d3d26;
  --school-coral-soft:#fff0eb;
  --school-blue:#7188bd;
  --school-blue-deep:#4a5f96;
  --school-blue-deep-hover:#3c5084;
  --school-blue-soft:#eef2ff;
  --school-sun:#e4ae4d;
  --school-cream:#f7f4ed;
  --school-line:#e7e1d8;
}

html{scroll-behavior:smooth}
body{
  color:var(--school-ink)!important;
  background:radial-gradient(circle at 3% 12%,rgba(233,120,98,.10),transparent 24rem),radial-gradient(circle at 96% 42%,rgba(113,136,189,.11),transparent 26rem),var(--school-cream)!important;
  font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif!important;
}
.nav{
  height:78px!important;min-height:78px!important;
  padding:0 max(24px,calc((100vw - 1240px)/2 + 32px))!important;
  border-bottom:1px solid rgba(38,54,80,.08)!important;
  background:rgba(255,254,251,.92)!important;
  box-shadow:0 4px 24px rgba(61,55,45,.05)!important;
  backdrop-filter:blur(14px)
}
.nav-logo{font-family:"Avenir Next",Avenir,sans-serif!important;font-size:21px!important;letter-spacing:-.4px}
.nav-logo img{height:30px!important}
.nav-right{gap:16px!important}
.role-chip{padding:7px 14px!important;color:#46567a!important;background:#e7ebf6!important;border-color:#d7ddec!important;font-size:13px!important}
.nav-link{color:#687384!important;font-size:14px!important}.nav-link:hover{color:var(--school-teal)!important}

.page-hero{
  position:relative;isolation:isolate;max-width:1176px;min-height:230px;margin:28px auto 20px!important;padding:40px 48px!important;
  overflow:hidden;border:1px solid rgba(38,54,80,.08);border-radius:28px;
  background:linear-gradient(112deg,rgba(255,255,255,.68),rgba(255,255,255,.1)),linear-gradient(120deg,#fff0e8 0%,#f8efdd 48%,#e9f3ef 100%)!important;
  box-shadow:0 18px 60px rgba(88,72,54,.09)
}
.page-hero::before,.page-hero::after{content:"";position:absolute;z-index:-1;border-radius:999px;transform:rotate(-14deg)}
.page-hero::before{width:250px;height:250px;right:54px;top:-64px;background:rgba(113,136,189,.18);box-shadow:105px 158px 0 -34px rgba(233,120,98,.24)}
.page-hero::after{width:86px;height:86px;right:284px;bottom:-28px;background:rgba(20,125,120,.16)}
.hero-inner{max-width:none!important;margin:0!important;align-items:flex-start!important}
.workspace-eyebrow{margin-bottom:9px;color:var(--school-coral-text);font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase}
.greet-line{margin:0 0 9px!important;color:var(--school-ink)!important;font-family:Georgia,"Times New Roman",serif!important;font-size:clamp(34px,4.8vw,52px)!important;font-weight:500!important;letter-spacing:-1.8px!important;line-height:1.02!important}
.page-hero h1.greet-line>#greetText{display:inline!important;position:static!important;transform:none!important;color:var(--school-ink)!important;font-family:Georgia,"Times New Roman",serif!important;font-size:1em!important;font-weight:500!important;font-style:normal!important;letter-spacing:inherit!important;line-height:inherit!important;background:none!important;text-decoration:none!important}
.page-hero h1.greet-line>#greetText::after{content:none!important;display:none!important}
.workspace-intro{max-width:590px;margin:0;color:var(--school-copy);font-size:15px;font-weight:500;line-height:1.55}
.greet-org{margin-top:15px!important;color:#454f5f!important}.greet-org svg{color:var(--school-teal)!important}
#orgSwitch{width:auto;min-width:220px;color:var(--school-ink)!important;border-color:#d9dde5!important;background:rgba(255,255,255,.84)!important}

.wrap{max-width:1240px!important;padding:0 32px 72px!important}
.staff-workspace-nav{
  position:relative;z-index:80;display:flex;gap:5px;flex-wrap:wrap;margin:0 0 26px;padding:7px;
  overflow:hidden;border:1px solid rgba(38,54,80,.09);border-radius:14px;background:#fffefa;
  box-shadow:0 10px 28px rgba(61,55,45,.08)
}
.staff-workspace-nav a{padding:10px 15px;color:#5e687a;font-size:13px;font-weight:700;text-decoration:none;border-radius:9px;transition:background .18s ease,color .18s ease,transform .18s ease}
.staff-workspace-nav a.active{color:var(--school-teal-dark);background:#e4f3f0}
.staff-workspace-nav a:last-child{margin-left:auto;color:#fff;background:var(--school-coral-deep)}
.staff-workspace-nav a:hover{color:var(--school-ink);background:#eef1f7;transform:translateY(-1px)}
.staff-workspace-nav a:last-child:hover{color:#fff;background:var(--school-coral-deep-hover)}

.stat-row{gap:14px!important;margin:0 0 20px!important}
.stat-card{position:relative;overflow:hidden;min-height:142px;padding:22px!important;border:1px solid rgba(38,54,80,.09)!important;border-radius:18px!important;background:rgba(255,254,251,.96)!important;box-shadow:0 12px 38px rgba(67,57,46,.07)!important}
.stat-card::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:var(--school-teal)}
.stat-card:nth-child(2)::before{background:var(--school-coral)}.stat-card:nth-child(3)::before{background:var(--school-blue)}
.stat-ic{border-radius:12px!important}.stat-ic.sc-green{background:#e4f3f0!important}.stat-ic.sc-amber{background:var(--school-coral-soft)!important}.stat-ic.sc-blue{background:var(--school-blue-soft)!important}
.stat-num{color:var(--school-ink)!important;font-family:Georgia,"Times New Roman",serif;font-size:34px!important;font-weight:500!important}
.stat-lbl{color:#677184!important;font-size:12px!important;text-transform:uppercase;letter-spacing:.65px!important}

.dsec{scroll-margin-top:155px;margin-top:22px!important}
.dsec-title{color:var(--school-ink)!important;font-family:"Avenir Next",Avenir,sans-serif;font-size:12px!important;letter-spacing:1px!important}
.dsec-title .cnt{background:var(--school-coral-deep)!important}
.dsec-link{color:var(--school-teal)!important}
.attn-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important}
.attn-item,.attn-note,.attn-empty{min-height:0!important;padding:11px 14px!important;border:1px solid #f1d7b0!important;border-radius:14px!important;background:linear-gradient(145deg,#fffaf0,#fff5e6)!important}
.attn-ic{background:#ffe6b9!important}.attn-tx{padding-top:0!important;color:#72501c!important;font-size:14px!important;font-weight:400!important}.attn-tx b{color:#4d3b22!important;font-weight:400!important}
.attn-note,.attn-empty{font-size:14px!important;font-weight:400!important;line-height:1.4!important}
.attn-note{grid-column:1/-1}
.attn-empty{grid-column:1/-1;color:#316052!important;border-color:#cfe4da!important;background:#f1f8f5!important}
.feed-list{border-color:rgba(38,54,80,.09)!important;border-radius:16px!important;box-shadow:0 10px 30px rgba(67,57,46,.06)!important}

.qa-row{width:100%;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
.qa-btn{min-height:112px;border-color:rgba(38,54,80,.09)!important;border-radius:16px!important;background:rgba(255,254,251,.96)!important;box-shadow:0 9px 28px rgba(67,57,46,.06)!important}
.qa-btn:nth-child(2) .qa-ic{color:#9f493c;background:var(--school-coral-soft)!important}.qa-btn:nth-child(3) .qa-ic{color:#46567a;background:var(--school-blue-soft)!important}
.qa-btn.qa-admin{color:#fff!important;background:var(--school-coral-deep)!important}.qa-admin .qa-ic{color:#fff!important;background:rgba(255,255,255,.18)!important}.qa-admin .qa-lbl{color:#fff!important}
.qa-btn:hover{border-color:#b8d7d4!important;box-shadow:0 12px 28px rgba(39,57,71,.10)!important}
.qa-ic{color:var(--school-teal);background:#e4f3f0!important}.qa-ic svg{stroke:currentColor}.qa-lbl{color:var(--school-ink)!important;font-size:18px!important;font-weight:500!important}

#studentRoster{margin-top:30px!important;padding:30px;border:1px solid rgba(38,54,80,.09);border-left:5px solid var(--school-coral);border-radius:20px;background:rgba(255,254,251,.96);box-shadow:0 12px 38px rgba(67,57,46,.07)}
.roster-heading{margin-bottom:16px!important}.roster-heading p{margin-top:6px;color:var(--school-copy);font-size:14px}.roster-heading .dsec-title{margin:0;font-family:Georgia,"Times New Roman",serif!important;font-size:26px!important;font-weight:500!important;letter-spacing:-.5px!important;text-transform:none!important}
.toolbar{margin:0 0 20px!important}.toolbar .search-box{max-width:none}
input.search{min-height:48px;padding:14px 15px 14px 44px!important;color:var(--school-ink)!important;border:1px solid #d9dde5!important;border-radius:12px!important;background:#f7f8fa!important;box-shadow:none!important}
input.search:focus{border-color:var(--school-teal)!important;background:#fff!important;box-shadow:0 0 0 4px rgba(20,125,120,.11)!important}

.student-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))!important;gap:12px!important}
.student-tile{position:relative;overflow:hidden;padding:20px!important;border:1px solid #e8e6e1!important;border-radius:15px!important;background:#fff!important;box-shadow:none!important}
.student-tile:nth-child(3n+2){background:#fcfbff!important}.student-tile:nth-child(3n+3){background:#fffdfa!important}
.student-tile:hover{border-color:#b8d7d4!important;box-shadow:0 12px 28px rgba(39,57,71,.08)!important}
.st-name{color:var(--school-ink)!important;font-size:17px!important;font-weight:400!important}.st-meta,.st-line{color:#677184!important}.st-line b{color:var(--school-ink)!important}
.st-lvlpill{color:var(--school-teal-dark)!important;background:#e4f3f0!important;border-radius:999px!important}.pill-readonly{color:#596579!important;background:#eceef4!important}
.st-btn{min-height:42px;color:var(--school-teal-dark)!important;border-color:#8bc8c3!important;border-radius:10px!important;background:#f7fffd!important}
.st-btn:hover{color:#fff!important;background:var(--school-teal)!important}.st-btn.primary{color:#fff!important;border-color:var(--school-teal)!important;background:var(--school-teal)!important}.st-btn.primary:hover{background:var(--school-teal-dark)!important}

#parentSec{padding:28px;border:1px solid rgba(38,54,80,.09);border-left:5px solid var(--school-blue);border-radius:20px;background:rgba(255,254,251,.96);box-shadow:0 12px 38px rgba(67,57,46,.07)}
.pc-panel{border-color:#dce2f2!important;background:linear-gradient(145deg,#f7f8ff,#eef2ff)!important;box-shadow:none!important}.pc-head .pc-ic{box-shadow:none!important}.pc-head .pc-ic svg,.pc-stat .v svg{stroke:var(--school-blue)!important}.pc-btn{background:var(--school-blue-deep)!important}.pc-btn:hover{background:var(--school-blue-deep-hover)!important}
.lapse-banner{border-radius:14px!important}.modal-overlay{background:rgba(38,54,80,.52)!important;backdrop-filter:blur(5px)!important}.modal{border-radius:20px!important;box-shadow:0 28px 80px rgba(38,54,80,.25)!important}
.btn-primary{background:var(--school-teal)!important}.btn-primary:hover{background:var(--school-teal-dark)!important}
:focus-visible{outline:3px solid var(--school-ink)!important;outline-offset:3px}
/* The nav is a flex row, so a hidden link would still be blockified into it. */
[hidden]{display:none!important}
footer{color:#5f6b67!important;background:transparent!important;border-top:1px solid var(--school-line)}footer p{color:#5f6b67!important}footer a{color:var(--school-teal-dark)!important}

@keyframes classroom-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.page-hero,.staff-workspace-nav,.stat-row{animation:classroom-rise .46s ease both}.staff-workspace-nav{animation-delay:.05s}.stat-row{animation-delay:.10s}
@media(max-width:760px){
  .nav{height:62px!important;min-height:62px!important;padding:0 16px!important}.nav-logo{font-size:17px!important}.nav-logo img{height:25px!important}.nav-right{gap:8px!important}.role-chip{padding:5px 10px!important;font-size:11px!important}.nav-link{font-size:13px!important}
  .page-hero{min-height:215px;margin:14px 12px 14px!important;padding:30px 24px!important;border-radius:20px}.page-hero::before{right:-70px;opacity:.72}.page-hero::after{right:88px}
  .greet-line{font-size:34px!important}.workspace-intro{max-width:270px;font-size:13px}.greet-org{font-size:13px!important}
  .wrap{padding:0 12px 44px!important}.staff-workspace-nav{position:relative;top:auto;gap:2px;padding:6px;margin-bottom:16px}.staff-workspace-nav a{padding:8px;font-size:11px}.staff-workspace-nav a:last-child{margin-left:0}
  .stat-card{min-height:126px;padding:17px!important}.stat-num{font-size:28px!important}.attn-list{grid-template-columns:1fr!important}
  #studentRoster,#parentSec{padding:22px 18px}.student-grid{grid-template-columns:1fr!important}.qa-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}.qa-btn{min-height:100px}
}
@media(max-width:560px){.stat-row{grid-template-columns:1fr!important}.stat-card{min-height:auto;flex-direction:row!important;align-items:center}}
@media(max-width:420px){.qa-row{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}