/* DOCS+EDIT-FIRST: read code-docs/static/css/style.css.md before editing (comments live there). */
body.section-home       {--acc:#4f46e5;--acc-on:#ffffff;--acc-hover:#4338ca;--acc-label:#a5b4fc;--acc-link:#4f46e5;}
body.section-materials,
body.section-practice   {--acc:#f97316;--acc-on:var(--ink);--acc-hover:#ea580c;--acc-label:#fdba74;--acc-link:#b8500a;}
body.section-students,
body.section-class      {--acc:#14b8a6;--acc-on:var(--ink);--acc-hover:#0d9488;--acc-label:#5eead4;--acc-link:#0f766e;}
body.section-progress   {--acc:#0ea5e9;--acc-on:var(--ink);--acc-hover:#0284c7;--acc-label:#7dd3fc;--acc-link:#0369a1;}
body.section-management {--acc:#fb7185;--acc-on:var(--ink);--acc-hover:#f43f5e;--acc-label:#fda4af;--acc-link:#be123c;}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { text-decoration-skip-ink: none; } /*@no-skip-ink*/
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 0.95rem; height: 0.95rem; margin: 0; flex-shrink: 0;
  border: 1px solid var(--input-border); border-radius:var(--radius-sm);
  background: var(--card-bg); cursor: pointer; position: relative; vertical-align: middle;
  transition: background var(--t-fast), border-color var(--t-fast);
}
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate { background: var(--acc); border-color: var(--acc); }
input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 0.27rem; top: 0.07rem;
  width: 0.26rem; height: 0.5rem; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:indeterminate::after {
  content: ""; position: absolute; left: 0.2rem; right: 0.2rem; top: 0.42rem;
  border-top: 2px solid #fff;
}
input[type="checkbox"]:disabled { opacity: 0.5; cursor: default; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; } /*@cb-focus-visible*/
select {  /*@select-action-btn-look*/
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--card-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  background-size: auto 0.32rem;
  box-sizing: border-box;
  min-height: var(--ctrl-h);
  padding: 0.2rem 1.5rem 0.2rem 0.55rem;
  border: 1px solid var(--input-border); /*@select-border-black-sweep*/
  border-radius:var(--radius-sm);
  font-size: var(--fs-xs);
  font-family: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
select:hover { border-color: var(--sidebar-bg); color: var(--text-strong); }
select:focus-visible { outline: 2px solid var(--bb-blue); outline-offset: 2px; } /*@select-focus-visible*/

body {
  font-family: var(--font-ui);
  background: var(--canvas-bg);
  color: var(--exam-ink);
  min-height: 100vh;
}

select, option { font-family: inherit; }  /*@form-controls-inherit-font*/


.page { display: flex; flex-direction: column; min-height: 100vh; }  /*@page*/

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--acc);
  color: var(--acc-on);
}

.top-bar a { color: #cfe0ff; text-decoration: none; }
.top-bar a:hover { opacity: 0.7; }

main {
  padding: 2rem 1.5rem;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

main h2 { margin-bottom: 1rem; }


.inline-form {  /*@inline-form*/
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.inline-form input:not([type="checkbox"]) {   /*@inline-form-input-not-checkbox*/
  flex: 1;
  min-width: 160px;
}

.inline-form select {  /*@inline-form-select-matches-input*/
  box-sizing: border-box;
  padding: var(--ctrl-py) 1.6rem var(--ctrl-py) var(--ctrl-px);
  font: 400 var(--ctrl-fs) var(--font-ui);
  line-height: var(--ctrl-lh);
}

.ap-link { color: var(--acc-link); text-decoration: none; }
.ap-link:hover { opacity: 0.7; }

.rpt-txt { font-weight: 700; color: var(--ink); } /*@repeat-tags-text*/
.fp-btn.rpt-info { background: none; } /*@repeat-tags-info*/
.rpt-txt + .fp-wrap { vertical-align: middle; position: relative; top: -1px; } /*@repeat-tags-info-align*/
.rpt-txt + .fp-wrap .fp-panel--left { left: calc(var(--pop-tail-x, 50%) - 26.5px); } /*@repeat-tags-pop-inset*/
.qsplit-pager-slot .fp-wrap .fp-panel--left { left: calc(var(--pop-tail-x, 50%) - 19.5px); min-width: 0; width: max-content; } .qsplit-pager-slot .fp-wrap .fp-tree { min-width: 0; } /*@rail-head-pop-inset*/
.rpt-line { margin-top: 0.3rem; font: 400 0.78rem/1.35 var(--font-ui); color: var(--text-secondary); } /*@repeat-tags-line*/
.rpt-pop { font: 400 var(--fs-sm) var(--font-ui); color: var(--exam-ink); } /*@repeat-tags-pop*/
.rpt-pop .h { font: 700 var(--fs-2xs) var(--font-ui); letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 0.4rem; }
.rpt-pop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; white-space: nowrap; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius:var(--radius-box);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.data-table th, .data-table td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--split-border);
  font-size: var(--fs-md);
}

.data-table th { background: var(--surface-subtle); font-weight: 600; }
.data-table tr:last-child td { border-bottom: none; }
.data-table a { color: var(--link-ink); text-decoration: none; }
.data-table a:hover { opacity: 0.7; }

.btn-danger {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  background: var(--danger-bg);
  color: var(--danger-strong);
  border: 1px solid var(--danger-border-soft);
  border-radius:var(--radius-chip);
  font-size: var(--fs-sm);
  font-family: inherit;
  line-height: 1.4;
  cursor: pointer;
}

.btn-danger:hover { background: #fecaca; border-color: var(--danger-border); }

.muted { color: #888; margin-top: 0.5rem; }

.empty-readout { color: var(--text-muted); font-size: var(--fs-md); }  /*@empty-readout*/


.admin-section { margin-bottom: 2.5rem; }  /*@admin-section*/


.admin-section h2 {  /*@admin-section-3*/
  font-size: var(--fs-base);
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-strong);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--section-divider);
}


.btn-primary-link {  /*@btn-primary-link*/
  display: inline-block;
  background: var(--acc);
  color: var(--acc-on);
  padding: 0.5rem 1.1rem;
  border-radius:0.5rem;
  text-decoration: none;
  font-size: var(--fs-md);
  font-weight: 600;
  margin-bottom: 1.5rem;
  transition: background var(--t-base);
}
.btn-primary-link:hover { background: var(--acc-hover); }





.confirm-strip {  /*@confirm-strip*/
  display: flex; align-items: center; column-gap: 0.4rem; row-gap: 0.5rem; flex-wrap: wrap;/*@confirm-strip-gap*/
  padding: 0.45rem 0.85rem; background: var(--danger-bg-soft); border-top: 1.5px solid var(--danger-border);
  animation: conf-fadein 0.12s ease;
}
@keyframes conf-fadein { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
.confirm-strip-msg { color: var(--danger-strong); font-weight: 500; font-size: var(--fs-sm); flex: 0 0 100%; }
.confirm-strip.conf-block {  /*@confirm-strip-conf-block*/
  border-top: none; border: 1.5px solid var(--danger-border); border-radius:var(--radius-md);
  margin: var(--gap-strip) 0;
}


.sp-flash-error { color: var(--danger-strong); font-size: var(--fs-md); margin-bottom: 0.5rem; }  /*@sp-flash-error*/
.btn-secondary {  /*@btn-secondary*/
  background: var(--card-bg);
  border: 1px solid var(--soft-border);
  color: var(--text-strong);
  cursor: pointer;
  font-family: inherit;
}
.btn-secondary:hover { border-color: var(--sidebar-bg); }



body.student-portal .page {  /*@body-student-portal-2*/
  display: contents;
}
body.student-portal .top-bar {
  display: none;
}
body.student-portal main {
  display: block;
  padding: 0;
  overflow: visible;
  max-width: none;  /*@max-width*/
  margin: 0;  /*@margin*/
}

body.student-portal {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--canvas-bg);
  color: var(--ink-strong);
  display: flex;
  height: 100vh;
  overflow: hidden;
}




.ap-page-title {  /*@ap-page-title*/
  font-size: var(--fs-title);
  font-weight: 700;
  padding-right: 3rem;
  letter-spacing: 0.01em;
  color: var(--ink-strong);
  margin: 0 0 1.5rem;
}


.sp-portal-tag {  /*@sp-portal-tag*/
  font-size: var(--fs-2xs);
  font-weight: 700;
  font-variant: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: #EAD047;
  color: #5a4b00;
  padding: 0.15rem 0.45rem;
  border-radius:var(--radius-sm);
}
.sp-portal-tag--admin   { background:var(--badge-role-admin-bg); color:var(--badge-role-admin-ink); } /*@sp-portal-tag-role-tokens*/
.sp-portal-tag--teacher { background:var(--badge-role-teacher-bg); color:var(--badge-role-teacher-ink); }
.sp-portal-tag--parent  { background:var(--badge-role-parent-bg); color:var(--badge-role-parent-ink); }


.sp-main {  /*@sp-main*/
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: var(--scroll-chain-outer);
  display: flex;
  flex-direction: column;
}

.sp-content {
  padding: 2rem 2.25rem;
  position: relative;
  flex: 1;
}

.sp-content main {  /*@sp-content*/
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}







.sp-card {
  background: var(--card-bg);
  border: 1px solid var(--split-border);
  border-radius:0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-xs);
  border-top: 3px solid var(--acc);
  flex: 1;
  min-width: 140px;
  transition: box-shadow var(--t-base);
}
.sp-card:hover { box-shadow: var(--shadow-card-hover); }


.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.85rem; }  /*@card-grid*/


.sp-acc-fill { height: 100%; border-radius:var(--radius-pill); background: var(--blue); }



.sp-btn-primary {  /*@sp-btn-primary*/
  display: inline-flex; align-items: center;
  background: var(--acc); color: var(--acc-on); border: none; border-radius:var(--radius-chip);
  padding: 0.35rem 0.75rem; font-size: var(--fs-sm); font-family: inherit;
  line-height: 1.4; cursor: pointer; font-weight: 500; text-decoration: none;
}
.sp-btn-primary:hover { background: var(--acc-hover); }

.sp-topbar {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  margin:-2rem -2.25rem 1.5rem;
  padding:1.1rem 2.25rem;
  background:var(--card-bg);
  border-bottom:2px solid var(--sidebar-bg);
  position:sticky; top:0; z-index: var(--z-sticky); /*@sp-topbar-frozen*/
}
.sp-topbar-titles { min-width:0; }
.sp-topbar-eyebrow {
  margin:0 0 0.2rem; font-size:var(--fs-2xs); font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--acc-link);
}
.sp-topbar-title { margin:0; font-size:var(--fs-title); font-weight:700; color:var(--ink); line-height:1.2; }
.sp-topbar-sub   { margin:0.25rem 0 0; font-size: var(--fs-sm); color:#57544e; }
.sp-topbar-hint  { margin:0.4rem 0 0; font-size:var(--fs-xs); color:var(--text-secondary); line-height:1.5; }  /*@topbar-hint*/
.sp-topbar-back  { display:flex; flex-wrap:wrap; gap:1rem; margin:0.5rem 0 0; }
.sp-topbar-back a { color:var(--text-secondary); font-size: var(--fs-sm); text-decoration:none; }
.sp-topbar-back a:hover { opacity:0.7; }
.sp-topbar-actions { display:flex; align-items:center; gap:0.6rem; flex-shrink:0; }
.sp-topbar-actions .notif-bar { position:static; top:auto; right:auto; }  /*@notif-bar*/


.sp-empty-state {
  background:var(--card-bg); border:1px solid var(--split-border); border-radius:var(--radius-modal); /*@172bn-empty-state-ink-border*/
  padding:2.75rem 1.5rem; margin-top:1.25rem; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.sp-empty-state .sp-btn-primary { white-space:nowrap; }
.sp-empty-icon {
  width:56px; height:56px; border-radius:50%;
  background:color-mix(in srgb, var(--acc) 12%, transparent);
  display:flex; align-items:center; justify-content:center; margin-bottom:0.9rem;
}
.sp-empty-icon svg { width:26px; height:26px; color:var(--acc-link); }
.sp-empty-title { margin:0 0 0.25rem; font-size:var(--fs-md); font-weight:600; color:var(--ink); }
.sp-empty-sub   { margin:0 0 1rem; font-size:var(--fs-sm); color:#57544e; max-width:340px; }
.sp-empty-state--compact { padding:1.1rem 0.75rem; border:none; background:transparent; border-radius:0; }
.sp-empty-state--compact .sp-empty-icon { width:40px; height:40px; margin-bottom:0.55rem; }
.sp-empty-state--compact .sp-empty-icon svg { width:19px; height:19px; }
.sp-empty-state--compact .sp-empty-title { font-size:var(--fs-sm); }
.sp-empty-state--compact .sp-empty-sub { font-size:var(--fs-xs); margin-bottom:0; }



.sort-asc::after, .sort-desc::after {  /*@sort-asc-after-2*/
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6em;
  opacity: 0.7;
}
.sort-asc::after  { content: "▲"; }
.sort-desc::after { content: "▼"; }
.mk-sortstate { display:inline; font-size:0.62em; opacity:0.6; margin-left:0.3em; font-weight:600; } /*@mk-sortstate*/
.mk-qhead th.is-sorted, .mk-lh.is-sorted { position:relative; padding-right:1.6rem; } /*@mk-is-sorted*/



.sp-pct-fill { height: 100%; border-radius:var(--radius-pill); background: var(--blue); }


.notif-bar { position:absolute; top:1.7rem; right:2.25rem; z-index: var(--z-sticky); }  /*@notif-bar-2*/
.notif-bell, .bin-btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; padding:0; border:1px solid var(--sidebar-bg); border-radius:var(--radius-box);
  background:var(--card-bg); color:var(--sidebar-bg); cursor:pointer; transition:border-color var(--t-fast), color var(--t-fast);
  text-decoration:none; box-sizing:border-box;
}
.notif-bell:hover, .bin-btn:hover { border-color:var(--sidebar-bg); color:var(--sidebar-bg); }
.notif-bell svg, .bin-btn svg { width:1.15rem; height:1.15rem; }
.notif-bell.has-unread { color:var(--sidebar-bg); }
.notif-badge {
  position:absolute; top:-0.4rem; right:-0.4rem; min-width:1.05rem; height:1.05rem;
  padding:0 0.28rem; border-radius:var(--radius-pill); background:var(--tier-low); color:var(--text-inverse);
  font-size:var(--fs-2xs); font-weight:700; line-height:1.05rem; text-align:center;
  padding-top:0.75px;  /*@notif-badge-optical-center*/
}

.notif-wrap .notif-dd { left:auto; right:0; min-width:20rem; max-width:22rem; padding:0; }  /*@notif-wrap*/
.notif-dd-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:0.55rem 0.75rem; border-bottom:1px solid var(--section-divider);
  font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink);
}
.notif-readall {
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size: var(--fs-2xs); font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0;
}
.notif-readall:hover { opacity: 0.7; }
.notif-row {
  display:flex; gap:0.55rem; align-items:flex-start; padding:0.55rem 0.75rem;
  text-decoration:none; color:var(--text-strong); border-bottom:1px solid var(--section-divider);
}
.notif-row:has(+ .notif-dd-foot) { border-bottom:none; }
.notif-row:hover { background:var(--slate-bg); }
.notif-dot { flex-shrink:0; width:0.5rem; height:0.5rem; border-radius:var(--radius-pill); margin-top:0.32rem; background:var(--slate-border-strong); }
.tier-action  .notif-dot { background:var(--tier-low); }
.tier-awareness .notif-dot { background:var(--blue); }
.tier-fyi     .notif-dot { background:var(--slate-border-strong); }
.notif-row.is-read .notif-dot { background:var(--border-light); }
.notif-rowtext { display:flex; flex-direction:column; gap:0.1rem; min-width:0; }
.notif-title { font-size:var(--fs-sm); font-weight:600; color:#1f2937; }
.notif-row.is-read .notif-title { font-weight:500; color:var(--text-muted); }
.notif-msg { font-size: var(--fs-xs); color:var(--text-muted); line-height:1.3; }
.notif-empty { padding:1.1rem 0.75rem; text-align:center; font-size:var(--fs-xs); color:var(--ink); }
.notif-dd-foot {
  display:block; padding:0.55rem 0.75rem; border-top:1px solid var(--section-divider); text-align:center;
  font-size:var(--fs-xs); font-weight:600; color:var(--ink); text-decoration:none;
}
.notif-dd-foot:hover { background:var(--slate-bg); }

.sp-nav-badge {  /*@sp-nav-badge*/
  margin-left:auto; min-width:1.15rem; height:1.15rem; padding:0 0.32rem; border-radius:var(--radius-pill);
  background:var(--tier-low); color:var(--text-inverse); font-size:var(--fs-2xs); font-weight:700; line-height:1.15rem; text-align:center;
  position:relative; top:-0.7px;  /*@sp-nav-badge-optical-center*/
}

.notif-page { max-width:60rem; }  /*@notif-page*/
.notif-list { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; align-items:start; }
.notif-card {
  display:flex; align-items:stretch; background:var(--card-bg); border:1px solid var(--border-light);
  border-radius:var(--radius-box); overflow:hidden;
}
.notif-card.is-unread { border-color:var(--border-grey); box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.notif-card.is-read { background:var(--canvas-bg); }
.notif-card-main { display:flex; gap:0.65rem; align-items:flex-start; padding:0.7rem 0.85rem; flex:1; text-decoration:none; min-width:0; }
.notif-card-main:hover { background:var(--slate-bg); }
.notif-card .notif-dot { margin-top:0.3rem; align-self:flex-start; }
.notif-card-text { display:flex; flex-direction:column; gap:0.15rem; min-width:0; flex:1; }
.notif-tierbadge {
  align-self:flex-start; flex-shrink:0; font-size:var(--badge-fs); font-weight:var(--badge-fw); text-transform:var(--badge-case);
  line-height:var(--badge-lh); color:var(--badge-tier-fyi-ink); background:var(--badge-tier-fyi-bg); border:1px solid var(--badge-tier-fyi-border); border-radius:var(--badge-radius); padding:var(--badge-pad);
}
.tier-action  .notif-tierbadge { background:var(--badge-tier-urgent-bg); color:var(--badge-tier-urgent-ink); border-color:transparent; }
.tier-awareness .notif-tierbadge { background:var(--badge-tier-update-bg); color:var(--badge-tier-update-ink); border-color:transparent; }
.notif-dismiss-form { display:flex; margin:0; }
.notif-dismiss {
  border:none; border-left:1px solid var(--hover-grey); background:none; cursor:pointer;
  width:2.2rem; font-size:1.1rem; color:var(--slate-border-strong); font-family:inherit;
}
.notif-dismiss:hover { color:var(--tier-low); background:var(--danger-bg-soft); }

.maint-readonly .pill,
.maint-readonly form button[type="submit"],
.maint-readonly .lgn-submit,
.maint-readonly button.danger {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.sr-only { /*@sr-only*/
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.popup-scroll { max-height:calc(100vh - 10rem); min-height:0; } /*@popup-scroll-carrier*/
.popup-scroll > :not(.popup-scroll-body) { flex:none; } /*@popup-scroll-fixed-regions*/
.popup-scroll-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } /*@popup-scroll-body-css*/

/*@brand-wm-resident*/
.lgn-wm-prep, .brand-prep { font-style:italic; font-weight:400; color:#B88C40; }
.sp-brand-wm { font-family:var(--font-content); font-variant:normal; font-weight:700; letter-spacing:0; }
.login-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.92em; font-weight: 600; }  /*@login-code*/