/* Reach web application style sweep
   Applied from the DifferentDucks Education Web Assets source of truth. */

:root{
  --reach-evergreen:#0D5A3B;
  --reach-evergreen-deep:#083D2A;
  --reach-evergreen-soft:#1A704C;
  --reach-mint:#E9F2EC;
  --reach-mint-strong:#DDEADF;
  --reach-water:#DCE9E4;
  --reach-reed:#AFC3AE;
  --reach-gold:#B87824;
  --reach-paper:#FDFCF9;
  --reach-canvas:#F7F8F4;
  --reach-line:#DFE5DE;
  --reach-ink:#13263A;
  --reach-muted:#63727B;
  --mallard:var(--reach-evergreen);
  --mallard-dark:var(--reach-evergreen-deep);
  --mallard-pressed:#062F20;
  --navy:var(--reach-ink);
  --sage:var(--reach-reed);
  --sage-2:var(--reach-mint);
  --cream:var(--reach-canvas);
  --ink:var(--reach-ink);
  --muted:var(--reach-muted);
  --border:var(--reach-line);
  --shadow:0 4px 16px rgba(19,38,58,.055);
  --shadow-lg:0 24px 64px rgba(8,61,42,.16);
  --radius:14px;
  --radius-sm:9px;
}

html,body{background:var(--reach-canvas)}
body{color:var(--reach-ink)}

.app-shell{grid-template-columns:252px minmax(0,1fr)}
.sidebar{
  isolation:isolate;
  overflow:hidden auto;
  padding:22px 18px 20px;
  gap:20px;
  background:
    radial-gradient(ellipse at 14% 101%,transparent 0 42px,rgba(255,255,255,.08) 43px 45px,transparent 46px 65px,rgba(255,255,255,.045) 66px 68px,transparent 69px),
    linear-gradient(155deg,var(--reach-evergreen-soft) 0%,var(--reach-evergreen) 38%,var(--reach-evergreen-deep) 100%);
  box-shadow:12px 0 38px rgba(8,61,42,.08);
}

.sidebar > .brand{
  min-height:142px;
  margin:0 0 4px;
  padding:82px 8px 0;
  background-position:center top 4px;
  background-size:188px auto;
}
.sidebar > .brand::after{
  content:'Reach  ≋';
  max-width:none;
  color:#fff;
  font-family:Recoleta,"Iowan Old Style",Palatino,Georgia,serif;
  font-size:27px;
  font-weight:500;
  letter-spacing:-.025em;
  text-shadow:0 1px 10px rgba(0,0,0,.08);
}

.nav{gap:5px}
.nav button{
  position:relative;
  min-height:46px;
  padding:0 14px 0 16px;
  border-radius:9px;
  color:rgba(255,255,255,.88);
  font-size:14px;
  font-weight:650;
  letter-spacing:-.005em;
}
.nav button::after{
  content:'›';
  position:absolute;
  right:13px;
  top:50%;
  opacity:0;
  transform:translate(-4px,-52%);
  transition:opacity 140ms ease,transform 140ms ease;
}
.nav button:hover::after,.nav button.active::after{opacity:.72;transform:translate(0,-52%)}
.nav button:hover{background:rgba(255,255,255,.09)}
.nav button.active,.nav button.active:hover{
  background:rgba(255,255,255,.14);
  box-shadow:inset 3px 0 0 #BBD8C0;
  color:#fff;
}

.sidebar-cycle{
  margin-top:auto;
  padding:14px 15px;
  border-color:rgba(255,255,255,.17);
  border-radius:12px;
  background:rgba(255,255,255,.075);
  backdrop-filter:blur(8px);
}
.sidebar-cycle span,.sidebar-cycle small{color:rgba(255,255,255,.72);opacity:1}
.sidebar-cycle strong{color:#fff;font-family:Recoleta,Georgia,serif;font-size:24px;font-weight:500}

.sidebar-footer{
  padding-top:132px!important;
  background-position:center 25px;
  background-size:148px auto;
  border-top-color:rgba(255,255,255,.16);
}
.sidebar-footer::before{top:11px;color:rgba(255,255,255,.68)}
.sidebar-identity{color:rgba(255,255,255,.86);opacity:1}
.sidebar-footer button{
  min-height:44px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  background:rgba(255,255,255,.96);
  color:var(--reach-evergreen-deep);
}
.sidebar-footer button:hover{background:#fff}

.main{
  position:relative;
  isolation:isolate;
  padding:42px 48px 68px;
  background:
    radial-gradient(ellipse at 91% 4%,rgba(175,195,174,.16),transparent 24rem),
    linear-gradient(180deg,var(--reach-paper) 0 250px,var(--reach-canvas) 520px);
}
.main::before{
  content:'';
  position:absolute;
  z-index:-1;
  top:34px;
  right:34px;
  width:220px;
  height:74px;
  opacity:.2;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 47%,var(--reach-evergreen) 48% 49%,transparent 50%) center/92px 30px repeat-x;
  mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);
}
.view-section{max-width:1480px}

/* Main views grow on wide displays while retaining comfortable gutters and a
   useful upper limit for cards, forms and tables. */
@media (min-width:1200px){
  .view-section{width:100%;max-width:clamp(1480px,78vw,1800px)}
}

.topbar,.page-title{margin-bottom:30px}
.topbar h1,.page-title h1,.login-auth h1{
  color:var(--reach-ink);
  font-family:Recoleta,"Iowan Old Style",Palatino,Georgia,serif;
  font-weight:500;
  letter-spacing:-.028em;
}
.page-title h1{font-size:clamp(38px,3vw,50px)}
.topbar p,.page-title p{max-width:900px;color:var(--reach-muted)}
.eyebrow{color:var(--reach-evergreen);font-size:11px;letter-spacing:.13em}
.role-pill{border:1px solid #CFE0D2;background:var(--reach-mint);color:var(--reach-evergreen-deep)}

.card,.goal-card,.teacher-card,.all-record-card{
  border:1px solid var(--reach-line);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow);
}
.card{padding:21px}
.stats{gap:14px}
.stats .stat{
  position:relative;
  overflow:hidden;
  min-height:112px;
  border-top:2px solid var(--reach-evergreen);
}
.stats .stat::after{
  content:'';
  position:absolute;
  right:-24px;
  bottom:-32px;
  width:92px;
  height:62px;
  border:1px solid rgba(13,90,59,.1);
  border-radius:50%;
  box-shadow:0 0 0 10px rgba(13,90,59,.035),0 0 0 22px rgba(13,90,59,.025);
}
.stat strong{color:var(--reach-ink);font-family:Recoleta,Georgia,serif;font-size:35px;font-weight:500}
.stat span{color:var(--reach-muted)}

.area-drilldown{gap:14px!important}
.area-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--reach-line)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--shadow)!important;
  transition:border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease!important;
}
.area-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--reach-reed);
}
.area-card:hover{
  transform:translateY(-2px)!important;
  border-color:#BFD4C3!important;
  box-shadow:0 12px 28px rgba(8,61,42,.09)!important;
}
.area-card[data-tone="primary"],.area-card.primary{background:linear-gradient(145deg,#fff,var(--reach-mint))!important}
.area-card-arrow{color:var(--reach-evergreen)!important}
.area-card-copy strong{color:var(--reach-ink)!important}
.area-card-copy small{color:var(--reach-muted)!important}

.side-stack .card:first-child{border-top:2px solid var(--reach-evergreen);background:linear-gradient(145deg,#fff,var(--reach-mint))}
.side-stack .card:nth-child(2){border-top:2px solid var(--reach-gold)}
.side-stack .card:nth-child(3){border-top:2px solid var(--reach-reed)}

.goal-card,.teacher-card{padding:20px}
.goal-card:hover,.teacher-card:hover{border-color:#BFD4C3;box-shadow:0 10px 26px rgba(8,61,42,.075)}
.progress-line{background:#E4ECE6}
.progress-line span{background:linear-gradient(90deg,var(--reach-evergreen),#43805E)}
.badge{border:1px solid transparent}
.badge.professional{border-color:#CFE0D2;background:var(--reach-mint)}
.badge.faith{border-color:#E8D6AD;background:#FBF1D8}

.btn{min-height:44px;border-radius:8px}
.btn-primary{background:var(--reach-evergreen)}
.btn-primary:hover{background:var(--reach-evergreen-deep)}
.btn-secondary{border:1px solid #CFE0D2;background:var(--reach-mint);color:var(--reach-evergreen-deep)}
.btn-secondary:hover{background:var(--reach-mint-strong)}
.btn-ghost{border-color:#AAB8B1;background:rgba(255,255,255,.8);color:var(--reach-ink)}
.btn-ghost:hover{border-color:var(--reach-evergreen);background:#fff;color:var(--reach-evergreen)}
.icon-btn{border-radius:8px}

.segmented{border:1px solid #DDE5DE;border-radius:11px;background:#EAF0EB}
.segmented button{border-radius:7px}
.segmented button.active{color:var(--reach-evergreen-deep);box-shadow:0 2px 7px rgba(19,38,58,.08)}

.field input,.field textarea,.field select,.staff-table select,
.admin-members-table select,.permission-choice select{
  border-color:#CED9D1;
  border-radius:8px;
  background:#fff;
}
.field input:focus,.field textarea:focus,.field select:focus,.staff-table select:focus,
.admin-members-table select:focus,.permission-choice select:focus{
  border-color:var(--reach-evergreen);
  box-shadow:0 0 0 3px rgba(13,90,59,.1);
  outline:0;
}

.staff-table,.admin-members-table,.oversight-table,.login-activity-table{border-spacing:0 7px}
.staff-table th,.admin-members-table th,.oversight-table th,.login-activity-table th{
  color:#718079;
  font-size:11px;
  letter-spacing:.08em;
}
.staff-table td,.admin-members-table td,.oversight-table td,.login-activity-table td{
  background:rgba(255,255,255,.96);
  border-color:var(--reach-line)!important;
}
.admin-members-wrap,.oversight-table-wrap,.login-activity-table-wrap{
  border-radius:12px;
  scrollbar-color:var(--reach-reed) transparent;
}

.digest-card{border-top:2px solid var(--reach-evergreen)}
.digest-recipient-list{border-color:var(--reach-line)!important;border-radius:10px!important}
.digest-recipient:hover{background:var(--reach-mint)!important}
.digest-trend-fill{background:linear-gradient(90deg,var(--reach-evergreen),#43805E)!important}
.oversight-privacy{border-left:3px solid var(--reach-reed);background:var(--reach-mint)!important}
.permission-choice{border-radius:10px!important}

.empty{
  padding:42px 28px;
  border:1px dashed #B9CABD;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(233,242,236,.72));
}
.empty::before{
  content:'≋';
  display:block;
  margin-bottom:10px;
  color:var(--reach-evergreen);
  font-family:Georgia,serif;
  font-size:38px;
  line-height:1;
}

.notice{border-radius:8px;box-shadow:0 3px 12px rgba(19,38,58,.04)}
.modal{border:1px solid var(--reach-line);border-radius:18px}
.modal-head{padding-bottom:16px;border-bottom:1px solid #E7EBE6}

.login-page{
  background:
    radial-gradient(circle at 82% 8%,rgba(184,120,36,.09),transparent 21rem),
    radial-gradient(circle at 13% 86%,rgba(175,195,174,.22),transparent 25rem),
    var(--reach-canvas);
}
.login-card{border-radius:18px;border-color:#DCE4DD;box-shadow:var(--shadow-lg)}
.login-visual{
  position:relative;
  min-width:0;
  min-height:560px;
  display:grid;
  overflow:hidden;
  padding:clamp(38px,5vw,68px);
  place-items:center;
  background:
    radial-gradient(circle at 16% 84%,rgba(114,201,149,.18),transparent 18rem),
    radial-gradient(circle at 88% 12%,rgba(175,195,174,.13),transparent 16rem),
    linear-gradient(145deg,#162336 0%,#102A22 54%,#083D2A 100%);
}
.login-visual::before,
.login-visual::after{
  content:'';
  position:absolute;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  pointer-events:none;
}
.login-visual::before{width:320px;height:92px;right:-96px;top:52px;box-shadow:0 0 0 22px rgba(255,255,255,.025),0 0 0 48px rgba(255,255,255,.018)}
.login-visual::after{width:260px;height:72px;left:-84px;bottom:44px;box-shadow:0 0 0 18px rgba(114,201,149,.035),0 0 0 40px rgba(114,201,149,.02)}
.login-visual img{
  position:relative;
  z-index:1;
  display:block;
  width:min(100%,520px);
  height:auto;
  min-height:0;
  object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.24));
}
.login-card>.brand{
  position:relative;
  overflow:hidden;
  align-items:flex-start;
  justify-content:center;
  padding:52px 42px;
  text-align:left;
  background:
    radial-gradient(ellipse at 35% 108%,transparent 0 48px,rgba(255,255,255,.17) 49px 51px,transparent 52px 76px,rgba(255,255,255,.08) 77px 79px,transparent 80px),
    linear-gradient(150deg,var(--reach-evergreen-soft),var(--reach-evergreen-deep));
}
.login-card>.brand::before{
  content:'';
  position:absolute;
  right:-22px;
  bottom:18px;
  width:240px;
  height:92px;
  opacity:.28;
  background:radial-gradient(ellipse at center,transparent 44%,#fff 45% 47%,transparent 48%) center/88px 30px repeat-x;
}
.login-card>.brand::after{
  content:'Professional growth\A with purpose.';
  position:relative;
  max-width:300px;
  margin-top:34px;
  color:#fff;
  font-family:Recoleta,"Iowan Old Style",Palatino,Georgia,serif;
  font-size:30px;
  font-weight:500;
  line-height:1.12;
  text-align:left;
  white-space:pre-line;
}
.login-card>.brand .brand-mark{display:none}
.login-card>.brand .brand-copy{position:relative;align-items:flex-start;text-align:left}
.login-card>.brand strong{
  color:#fff;
  font-family:Recoleta,"Iowan Old Style",Palatino,Georgia,serif;
  font-size:55px;
  font-weight:500;
  letter-spacing:-.045em;
}
.login-card>.brand strong::after{content:'  ≋';color:#CBE0CF;font-size:.72em;letter-spacing:-.15em}
.login-card>.brand small{align-items:flex-start;color:rgba(255,255,255,.82)}
.login-card>.brand .brand-by{color:rgba(255,255,255,.7)}
.login-auth{background:#fff}
.login-auth h1{font-size:40px}
.login-code-form{display:grid;gap:14px}
.login-code-destination{padding:11px 13px;border:1px solid #DCE7DE;border-radius:9px;background:var(--reach-mint);color:var(--reach-muted);font-size:13px;line-height:1.4}
.login-code-destination strong{color:var(--reach-evergreen-deep);font-weight:750}
.login-code-input{font-size:25px!important;font-weight:700!important;letter-spacing:.24em;text-align:center;font-variant-numeric:tabular-nums}
.login-code-input::placeholder{color:#AAB8B1;opacity:.62}
.login-code-actions{display:flex;justify-content:space-between;gap:12px}
.login-code-actions button{min-height:38px;padding:4px 0;border:0;background:transparent;color:var(--reach-evergreen);font-size:12px;font-weight:750;text-decoration:underline;text-decoration-color:rgba(13,90,59,.28);text-underline-offset:3px}
.login-code-actions button:hover{color:var(--reach-evergreen-deep);text-decoration-color:currentColor}
.login-code-actions button:focus-visible{outline:3px solid rgba(13,90,59,.25);outline-offset:3px;border-radius:4px}
.login-passkey-option{display:grid;gap:10px;margin-top:18px;text-align:center}
.login-auth-divider{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;color:var(--reach-muted);font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
.login-auth-divider::before,.login-auth-divider::after{content:'';height:1px;background:var(--reach-line)}
.btn-passkey{border:1px solid #24342D;background:#fff;color:#17251F}
.btn-passkey:hover{border-color:var(--reach-evergreen);background:var(--reach-mint)}
.passkey-symbol{display:inline-grid;width:23px;height:23px;place-items:center;border-radius:7px;background:#17251F;color:#fff;font-size:14px;line-height:1}
.login-passkey-option small{color:var(--reach-muted);font-size:11px;line-height:1.4}
.login-message{min-height:20px;margin-bottom:0}

@media(max-height:780px) and (min-width:901px){
  .sidebar > .brand{min-height:120px;padding-top:72px;background-size:164px auto}
  .sidebar > .brand::after{font-size:23px}
  .sidebar-footer{padding-top:112px!important;background-position:center 23px;background-size:126px auto}
}

@media(max-width:1100px){
  .main{padding:34px 32px 56px}
}

@media(max-width:720px){
  .login-visual{display:grid;min-height:190px;padding:28px 24px}
  .login-visual img{width:min(100%,460px)}
}

@media(max-width:900px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{
    position:sticky;
    z-index:20;
    top:0;
    height:auto;
    display:grid;
    grid-template-columns:170px minmax(0,1fr) auto;
    gap:10px 16px;
    align-items:center;
    padding:10px 16px;
    overflow:visible;
    box-shadow:0 8px 24px rgba(8,61,42,.16);
  }
  .sidebar > .brand{
    min-height:54px;
    margin:0;
    padding:0 0 0 82px;
    align-items:flex-start;
    justify-content:center;
    background-position:left center;
    background-size:76px auto;
  }
  .sidebar > .brand::after{font-size:21px;white-space:nowrap}
  .nav{display:flex;gap:4px;overflow-x:auto;padding:2px;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav button{flex:0 0 auto;min-height:40px;padding:0 12px;font-size:13px;white-space:nowrap}
  .nav button::after{display:none}
  .sidebar-cycle{display:none}
  .sidebar-footer{
    display:block;
    padding:0!important;
    border:0;
    background:none;
  }
  .sidebar-footer::before,.sidebar-identity{display:none}
  .sidebar-footer button{width:auto;min-height:40px;padding:0 14px}
  .main{padding:30px 24px 48px}
  .main::before{display:none}
}

@media(max-width:680px){
  .sidebar{grid-template-columns:1fr auto}
  .sidebar > .brand{grid-column:1}
  .sidebar-footer{grid-column:2}
  .nav{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:8px}
  .main{padding:24px 16px 42px}
  .page-title h1,.topbar h1{font-size:36px}
  .stats .stat{min-height:98px}
  .login-card>.brand{min-height:230px;padding:30px 26px;align-items:flex-start}
  .login-card>.brand::after{margin-top:18px;font-size:23px}
  .login-card>.brand strong{font-size:43px}
  .login-card>.brand small{display:flex}
  .login-auth{padding:32px 24px 36px}
}

@media(prefers-reduced-motion:reduce){
  .area-card,.nav button::after{transition:none!important}
}