@media screen {
.roster-page{background:#f7f9f5;color:#304b38}.roster-page .topbar{position:relative;background:#365843!important;box-shadow:none;border-bottom:1px solid #55735a}.roster-page .topbar .brand,.roster-page .topbar .nav-links>a,.roster-page .topbar summary{color:#fff!important}.roster-page .topbar .nav{min-height:64px;padding-block:8px}
.roster-page .hero{padding:22px 0 12px!important;background:transparent}.roster-page .hero h1{font-size:26px!important;line-height:1.5;margin:0}.roster-page .hero p{font-size:13px;max-width:700px;line-height:1.7;margin:6px 0}.roster-page .hero .eyebrow{display:none}
.roster-page .roster-shell{padding-top:12px}.roster-page .roster-panel{padding:18px;border:1px solid #dce3d7;border-radius:7px;box-shadow:none}
.roster-page .roster-toolbar{gap:8px;margin-bottom:12px}.roster-page .roster-search{font-size:14px;padding:11px 13px;border:1px solid #c7d4c5;border-radius:5px;background:#fafcf8;min-height:42px}.roster-page .toolbar-button,.roster-page .back-folder{font-size:13px;padding:9px 12px;min-height:40px;border-radius:5px;box-shadow:none}
.student-filters{display:flex;gap:12px;margin-bottom:16px}.student-filters label{display:grid;gap:5px;font-size:12px;color:#667562;flex:0 1 250px}.student-filters select{width:100%;font:inherit;font-size:14px;padding:9px;border:1px solid #d3ddcd;border-radius:5px;background:#fff;color:#36543c;min-height:40px}
.roster-page .roster-stats{display:flex;gap:20px;padding:10px 0;border-top:1px solid #e5eade;border-bottom:1px solid #e5eade;margin:12px 0}.roster-page .roster-stat{padding:0;border:0;background:none;box-shadow:none;border-radius:0;min-height:0;gap:8px;display:flex;align-items:center}.roster-page .roster-stat strong{font-size:19px}.roster-page .roster-stat>span{font-size:12px}.roster-page .roster-stat [data-icon]{display:none}
.roster-page .roster-context{margin:16px 0}.roster-page .roster-context h2{font-size:19px}.roster-page .summary-note,.roster-page .breadcrumb{font-size:12px}
.roster-page .folder-grid{gap:12px}.roster-page .folder-card,.roster-page .class-grid .folder-card{min-height:110px;padding:15px;grid-template-columns:40px minmax(0,1fr);gap:8px;border:1px solid #d8e1d2;border-radius:6px;box-shadow:none}.roster-page .folder-card:hover{transform:none;border-color:#91aa90;box-shadow:none}.roster-page .folder-card::after{height:2px;background:#baa168}.roster-page .folder-icon{width:36px;height:30px}.roster-page .folder-card h3,.roster-page .class-grid .folder-card h3{font-size:16px}.roster-page .folder-card p,.roster-page .folder-meta{font-size:12px}
.roster-page .student-track-card{border:1px solid #dde4d6;border-radius:6px;box-shadow:none;padding:12px;min-height:100px;gap:10px}.roster-page .track-avatar{height:38px;width:38px;font-size:16px;border-radius:6px}.roster-page .track-main h3{font-size:15px;line-height:1.6}.roster-page .track-main p{font-size:12px}.roster-page .track-score{border-radius:5px;font-size:12px}.roster-page .track-open{border-radius:5px}.roster-page .section-roulette{padding:12px;border-radius:6px;box-shadow:none}.roster-page .roulette-button,.roster-page .roulette-reset{border-radius:5px}
.roster-page .student-drawer{border-radius:8px;width:min(680px,96vw);max-height:92dvh;border:1px solid #d4dece}.roster-page .drawer-top{padding:14px 18px;background:#365843;color:#fff}.roster-page .drawer-top h2{font-size:19px;color:white}.roster-page .drawer-label{font-size:11px;color:#e3eadd}.roster-page .drawer-close{border-radius:5px}.roster-page .student-mini-profile{padding:12px 18px}.roster-page .student-avatar{width:38px;height:38px;border-radius:5px;font-size:17px}.roster-page .student-mini-profile strong{font-size:15px}.roster-page .student-mini-profile span{font-size:12px}
.roster-page .drawer-tabs{padding:0 12px;gap:4px;border-bottom:1px solid #dce3d7;background:#fff;display:flex;overflow:auto}.roster-page .drawer-tab{flex:1;white-space:nowrap;font-size:12px;padding:12px 6px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;box-shadow:none;color:#65715f}.roster-page .drawer-tab[aria-selected=true]{background:transparent;color:#365843;border-bottom-color:#b69a59}.roster-page .drawer-content{padding:16px}.roster-page .data-list>div{padding:10px;border-radius:4px}.roster-page .data-list dt{font-size:12px}.roster-page .data-list dd{font-size:14px}.roster-page .followup-group h3{font-size:14px}.roster-page .followup-intro,.roster-page .referral-intro{font-size:12px}.roster-page .followup-action,.roster-page .contact-action{border-radius:5px;min-height:44px;font-size:13px}.roster-page .followup-status{padding:12px;border-radius:5px}.roster-page .referral-form input,.roster-page .referral-form textarea,.roster-page .referral-form select{font-size:14px;border-radius:5px}
@media(max-width:620px){.roster-page .roster-panel{padding:12px}.roster-page .hero h1{font-size:23px!important}.student-filters{gap:8px}.student-filters label{flex:1;min-width:0}.student-filters select,.roster-page .roster-search,.roster-page .referral-form input,.roster-page .referral-form textarea,.roster-page .referral-form select{font-size:16px}.roster-page .roster-stats{gap:12px;flex-wrap:wrap}.roster-page .roster-stat strong{font-size:17px}.roster-page .roster-stat>span{font-size:11px}.roster-page .student-drawer{width:100vw;max-width:100vw;max-height:100dvh;border-radius:0}.roster-page .drawer-tab{font-size:11px;padding:12px 5px}.roster-page .folder-grid{grid-template-columns:1fr}.roster-page .contact-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
}

@media screen {
/* Reserve the flexible row for content, not the tabs. */
.roster-page .drawer-shell{min-height:0;grid-template-rows:auto auto auto minmax(0,1fr) auto;overflow:hidden}
.roster-page .drawer-content{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.roster-page .topbar .nav-links>a.admin-nav-link{color:#365843!important;background:#f1f5ed!important;border:1px solid #d5e1cd}
.roster-page .topbar .nav-links>a.admin-nav-link .ui-icon{color:#365843!important}
.roster-page .topbar .nav-links>a.admin-nav-link:hover{color:#fff!important;background:#527259!important}
.roster-page .topbar .nav-links>a.admin-nav-link:hover .ui-icon{color:#fff!important}
}
@media screen and (orientation:landscape) and (max-height:620px){
.roster-page .student-drawer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
.roster-page .drawer-shell{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;height:100%;min-height:0}
.roster-page .drawer-top{grid-column:1/-1;grid-row:1;padding:6px 12px;min-height:44px;gap:8px}
.roster-page .drawer-label{display:none}.roster-page .drawer-top h2{font-size:16px;line-height:1.4}
.roster-page .drawer-close{height:36px;width:36px;flex-shrink:0}
.roster-page .student-mini-profile{grid-column:1;grid-row:2;padding:8px;gap:6px;min-width:0;align-items:start}
.roster-page .student-mini-profile .student-avatar{display:none}.roster-page .student-mini-profile strong{font-size:12px}.roster-page .student-mini-profile span{font-size:11px}
.roster-page .drawer-tabs{grid-column:1;grid-row:3;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;overflow-y:auto;min-height:0;padding:4px 6px;gap:3px;border-bottom:0;border-inline-end:1px solid #dce3d7}
.roster-page .drawer-tab{flex:0 0 auto;min-height:40px;text-align:right;font-size:12px;padding:8px;border:0;border-inline-start:2px solid transparent;white-space:normal}
.roster-page .drawer-tab[aria-selected=true]{border-inline-start-color:#b69a59;border-bottom:0;background:#edf3e8}
.roster-page .drawer-content{grid-column:2;grid-row:2/4;min-width:0;min-height:0;padding:10px;overflow:auto}
.roster-page .drawer-footer{grid-column:1/-1;grid-row:4;padding:5px 10px;font-size:11px}
.roster-page .followup-intro{font-size:11px;margin:0 0 6px}.roster-page .followup-status{padding:7px;margin-bottom:6px}.roster-page .followup-status strong{font-size:14px}
.roster-page .followup-group{margin-top:8px}.roster-page .followup-group h3{margin:0 0 5px;font-size:12px}
.roster-page .attendance-actions,.roster-page .followup-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.roster-page .followup-action,.roster-page .attendance-actions .followup-action{min-height:44px;padding:6px;font-size:12px;border-radius:5px}
.roster-page .followup-action small{font-size:10px}.roster-page .followup-tools{gap:6px;margin-top:8px}
}
.roster-page .mobile-nav > summary{background:#f5f8f3!important;color:#244734!important;border:1px solid #b7cbbb!important;border-radius:8px;padding:9px 14px;font-weight:700;opacity:1!important}
.roster-page .mobile-nav > summary svg,.roster-page .mobile-nav > summary span{color:inherit!important;opacity:1!important}
.roster-page .mobile-nav > summary:hover,.roster-page .mobile-nav[open] > summary{background:#e3ecdf!important;color:#193926!important}
.roster-page .mobile-nav > summary:focus-visible{outline:3px solid #d9b96e;outline-offset:3px}
.performance-history{width:min(520px,92vw);max-height:85dvh;overflow:auto;padding:0;border:0;border-radius:16px;color:#294733;background:#f4f7f3;font-family:inherit;box-shadow:0 24px 70px #122b3540}
.performance-history::backdrop{background:#142c2466}
.performance-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;background:#345b45;color:#fff;padding:20px}
.performance-header h3{color:#fff!important;font-size:17px;margin:0 0 7px;line-height:1.5}
.performance-header p{color:#e1ece3;margin:0;font-size:13px;line-height:1.7}
.performance-close{flex:none;width:32px;height:32px;padding:0;border:1px solid #ffffff60;border-radius:8px;background:#ffffff15;color:#fff;font:24px/1 Arial;cursor:pointer}
.performance-close:focus-visible{outline:3px solid #e8cc80;outline-offset:2px}
.performance-summary{display:flex;justify-content:space-between;gap:12px;padding:13px 20px;font-size:13px;background:#e8eee6;border-bottom:1px solid #d7e1d3}
.performance-summary strong{color:#934e4e}
.performance-list{padding:16px;display:grid;gap:10px;font-size:14px}
.performance-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:#fff;border:1px solid #e1e6df;border-inline-start:3px solid #bd7971;border-radius:10px}
.performance-entry strong{font-size:14px}.performance-entry p{font-size:12px;color:#64776b;margin:6px 0 0}
.performance-deduction{background:#faeae6;color:#a14438;font-size:17px;font-weight:700;min-width:43px;padding:7px;border-radius:8px;text-align:center;direction:ltr}
.performance-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center}
.performance-total small{display:block;color:#526656;font-size:12px}.performance-total strong{display:block;font-size:21px;font-variant-numeric:tabular-nums}
.performance-total.earned strong{color:#26734b}.performance-total.deducted strong{color:#a14438}.performance-total.net strong{color:#294733}
.performance-order{font-size:12px;color:#63756a;margin:0 0 3px}
.performance-entry.is-earned{border-inline-start-color:#4e9971}.performance-entry.is-deducted{border-inline-start-color:#bd7971}
.performance-delta{font-size:18px;font-weight:700;min-width:44px;padding:8px;border-radius:8px;text-align:center;direction:ltr;flex-shrink:0}
.performance-delta.earned{background:#e5f4ea;color:#246f44}.performance-delta.deducted{background:#faeae6;color:#a14438}
.performance-entry .performance-balance{font-weight:700;color:#345b45}
.performance-milestone{display:inline-block;margin-top:7px;padding:3px 8px;border-radius:5px;background:#edf3d9;color:#4b6426;font-size:11px}

/* v21: persistent navigation while browsing students */
.roster-page .roster-toolbar{position:sticky;top:var(--students-header-height,0px);z-index:12;background:#fff;padding:10px;border-bottom:1px solid #ccdacf}
.roster-page .table-card{overflow:visible}
.roster-page .student-alphabet-nav{position:sticky;top:calc(var(--students-header-height,0px) + var(--students-toolbar-height,78px));z-index:11;background:#f5faf6;box-shadow:0 2px 8px #254b3415;border-radius:10px;margin-bottom:12px}
.roster-page .student-alphabet-nav button{min-width:40px;min-height:40px}
.roster-page .student-alphabet-group,.roster-page .student-track-card{scroll-margin-top:var(--students-scroll-offset,220px)}
@media(max-width:620px){.roster-page .student-alphabet-nav{gap:4px;padding:7px}.roster-page .student-alphabet-nav button{min-width:36px;min-height:36px;padding:2px 6px}.roster-page .track-main h3{white-space:normal;overflow-wrap:anywhere}}
@media print{.roster-page .student-alphabet-nav{display:none!important}}