@font-face {
  font-family: "Sora";
  src: url("fonts/sora-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Alexandria";
  src: url("fonts/alexandria-arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0600-06ff, U+0750-077f, U+0870-088e, U+0890-0891, U+0897-08ff, U+fb50-fdff, U+fe70-fefc;
}

@font-face {
  font-family: "Alexandria";
  src: url("fonts/alexandria-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+2000-206f, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Reem Kufi";
  src: url("fonts/reem-kufi-arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "Aref Ruqaa";
  src: url("fonts/aref-ruqaa-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Alwah Rakkas";
  src: url("fonts/rakkas-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alwah Cormorant";
  src: url("fonts/cormorant-garamond-600.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --rh-midnight: #061f33;
  --rh-deep: #0a3f61;
  --rh-lapis: #0c628f;
  --rh-active: #1081ae;
  --rh-gold: #e0b13f;
  --rh-gold-deep: #896000;
  --rh-gold-pale: #f1d98c;
  --rh-ivory: #f7f1e5;
  --rh-ivory-deep: #eee4d2;
  --rh-pale-blue: #e7eff3;
  --rh-ink: #101c24;
  --rh-muted: #5c6b74;
  --rh-white: #ffffff;
  --rh-success: #13705a;
  --rh-success-soft: #e1f1eb;
  --rh-warning: #a46500;
  --rh-warning-soft: #fff0c8;
  --rh-danger: #a53b3b;
  --rh-danger-soft: #f7e4e1;
  --rh-review: #8b3c59;
  --rh-review-soft: #f4e5eb;
  --rh-font-en: "Sora", Arial, sans-serif;
  --rh-font-ar: "Alexandria", Tahoma, sans-serif;
  --rh-font-kufi: "Reem Kufi", "Alexandria", Tahoma, sans-serif;
  --sidebar-width: 284px;

  --dq-navy-950: var(--rh-midnight);
  --dq-navy-900: var(--rh-deep);
  --dq-blue-700: var(--rh-lapis);
  --dq-blue-600: var(--rh-active);
  --dq-blue-100: var(--rh-pale-blue);
  --dq-blue-050: #f0f5f7;
  --dq-gold-500: var(--rh-gold);
  --dq-gold-800: var(--rh-gold-deep);
  --dq-gold-100: #f7e9bb;
  --dq-canvas: var(--rh-ivory);
  --dq-surface: #fffdf8;
  --dq-surface-subtle: var(--rh-pale-blue);
  --dq-border: #c8d2d5;
  --dq-border-strong: #9cabb1;
  --dq-text: var(--rh-ink);
  --dq-text-muted: var(--rh-muted);
  --dq-success: var(--rh-success);
  --dq-success-soft: var(--rh-success-soft);
  --dq-warning: var(--rh-warning);
  --dq-warning-soft: var(--rh-warning-soft);
  --dq-danger: var(--rh-danger);
  --dq-danger-soft: var(--rh-danger-soft);
  --dq-hw1: var(--rh-lapis);
  --dq-hw1-soft: #e1eef3;
  --dq-hw2: var(--rh-review);
  --dq-hw2-soft: var(--rh-review-soft);
  --dq-font: var(--rh-font-en);
  --dq-font-ar: var(--rh-font-ar);

  --ink: var(--rh-ink);
  --muted: var(--rh-muted);
  --line: #c8d2d5;
  --soft-line: #dfe5e5;
  --page: var(--rh-ivory);
  --surface: #fffdf8;
  --forest: var(--rh-midnight);
  --forest-2: var(--rh-lapis);
  --mint: var(--rh-pale-blue);
  --new: var(--rh-lapis);
  --new-soft: #e1eef3;
  --review: var(--rh-review);
  --review-soft: var(--rh-review-soft);
  --gold: var(--rh-gold);
  --gold-bright: var(--rh-gold);
  --gold-soft: #f7e9bb;
  --ivory: #fffdf8;
  --danger: var(--rh-danger);
  --danger-soft: var(--rh-danger-soft);
}

html {
  background: var(--rh-midnight);
}

body {
  color: var(--rh-ink);
  background: var(--rh-ivory);
  background-image: none;
  font-family: var(--rh-font-en);
  font-size: 15px;
  line-height: 1.5;
}

html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--rh-font-ar);
  line-height: 1.65;
}

h1,
h2,
h3,
h4,
button,
input,
select,
textarea {
  font-family: inherit;
  letter-spacing: 0;
}

h1,
h2,
h3,
h4 {
  line-height: 1.16;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  border-color: var(--rh-active);
  outline: 3px solid var(--rh-gold);
  outline-offset: 2px;
}

input,
select,
textarea {
  min-height: 46px;
  border-color: #9ba9ad;
  border-radius: 6px;
  color: var(--rh-ink);
  background: #fffefb;
}

textarea { line-height: 1.55; }

.button,
.icon-button {
  min-height: 44px;
  border-color: #9ba9ad;
  border-radius: 6px;
  color: var(--rh-midnight);
  background: #fffefb;
  font-weight: 700;
}

.button:hover,
.icon-button:hover {
  border-color: var(--rh-active);
  color: var(--rh-midnight);
  background: var(--rh-pale-blue);
}

.button.primary {
  border-color: var(--rh-midnight);
  color: var(--rh-white);
  background: var(--rh-midnight);
}

.button.primary:hover {
  border-color: var(--rh-active);
  background: var(--rh-deep);
}

.button.warning {
  border-color: #c18415;
  color: #372400;
  background: var(--rh-gold);
}

.button.danger-quiet {
  border-color: #cf9a95;
  color: var(--rh-danger);
  background: var(--rh-danger-soft);
}

.segmented {
  border: 1px solid #a9b7bb;
  border-radius: 6px;
  background: #dde7ea;
}

.segmented button { border-radius: 4px; }

.segmented button.active {
  color: var(--rh-white);
  background: var(--rh-deep);
}

.eyebrow {
  color: var(--rh-gold-deep) !important;
  font-size: .76rem;
  font-weight: 700;
  text-transform: none;
}

.daal-mark {
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: var(--rh-midnight);
  background: var(--rh-gold);
  box-shadow: none;
}

.daal-mark span {
  display: block;
  font-family: var(--rh-font-kufi);
  font-size: 2.65rem;
  font-weight: 600;
  line-height: .8;
  transform: translateY(-2px);
}

.mosque-endorsement {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.mosque-endorsement img {
  display: block;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  object-fit: contain;
}

.mosque-endorsement > span { display: grid; min-width: 0; }
.mosque-endorsement b { font-size: .69rem; line-height: 1.25; }
.mosque-endorsement small { font-size: .61rem; line-height: 1.3; }

/* Entry screens carry the school identity before any account choice. */
.language-welcome-screen,
.auth-screen {
  background: var(--rh-midnight);
  background-image: linear-gradient(145deg, var(--rh-midnight) 0 58%, var(--rh-deep) 58% 100%);
  box-shadow: inset 14px 0 var(--rh-gold);
}

html[dir="rtl"] .language-welcome-screen,
html[dir="rtl"] .auth-screen {
  box-shadow: inset -14px 0 var(--rh-gold);
}

.language-welcome-panel,
.auth-panel {
  border: 0;
  border-radius: 0;
  color: var(--rh-ink);
  background: var(--rh-ivory);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
}

.language-welcome-panel {
  width: min(720px, 100%);
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 20px 28px;
  padding: 38px;
  text-align: start;
}

.language-welcome-panel .auth-mark {
  width: 124px;
  height: 124px;
  grid-row: 1 / span 2;
}

.language-welcome-panel .daal-mark span { font-size: 5rem; }
.language-welcome-heading { align-items: start; text-align: start; }
.language-welcome-heading .school-wordmark { justify-content: flex-start; color: var(--rh-midnight); }
.language-welcome-heading .school-wordmark span[lang="ar"] { color: var(--rh-gold-deep); font-family: var(--rh-font-kufi); font-size: 1.35rem; }
.language-welcome-heading h1 { color: var(--rh-midnight); font-size: 2rem; }
.language-welcome-heading h2 { color: var(--rh-lapis); font-family: var(--rh-font-ar); font-size: 1.55rem; }
.entry-endorsement { grid-column: 2; color: var(--rh-muted); }
.language-welcome-actions { grid-column: 1 / -1; gap: 12px; }

.language-choice,
.language-choice.arabic {
  min-height: 98px;
  border: 2px solid var(--rh-midnight);
  border-radius: 0;
  color: var(--rh-midnight);
  background: transparent;
  text-align: start;
}

.language-choice.arabic {
  border-color: var(--rh-gold-deep);
  background: #f4e7be;
}

.language-choice:hover,
.language-choice:focus-visible {
  border-color: var(--rh-active);
  background: var(--rh-pale-blue);
}

.auth-panel {
  position: relative;
  width: min(960px, calc(100vw - 36px));
  grid-template-columns: minmax(260px, 340px) minmax(250px, 1fr);
  column-gap: clamp(24px, 3vw, 42px);
  padding: 40px;
}

.auth-brand {
  border-inline-end: 0;
  padding-inline-end: 38px;
}

.auth-brand::after {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 16px;
  background: var(--rh-gold);
  background-image: repeating-linear-gradient(to bottom, transparent 0 23px, rgba(6,31,51,.35) 23px 24px);
  content: "";
}

.auth-brand .auth-mark { width: 144px; height: 144px; }
.auth-brand .daal-mark span { font-size: 5.6rem; }
.auth-wordmark > span {
  display: block;
  width: max-content;
  max-width: none;
  color: var(--rh-gold-deep);
  font-family: var(--rh-font-kufi);
  font-size: clamp(4rem, 5vw, 5rem);
  line-height: 1;
  white-space: nowrap;
}
.auth-wordmark h1 { color: var(--rh-midnight); font-size: 2rem; }
.platform-school-name { display: grid; gap: 4px; margin: 6px 0; text-transform: none; }
.platform-school-name > span[lang="ar"] { display: none; }
html[lang="ar"] .platform-school-name > span[lang="en"] { display: none; }
html[lang="ar"] .platform-school-name > span[lang="ar"] { display: block; }
.auth-wordmark .platform-school-name { max-width: none; color: var(--rh-midnight); font-size: 1rem; font-weight: 700; }

/* Product identity stays separate from the school's background calligraphy. */
.alwah-welcome-copy { display: grid; gap: 4px; margin: 12px 0; font-weight: 600; }
.auth-form .alwah-signin-note { margin: 8px 0 0; font-size: .9rem; line-height: 1.6; color: var(--rh-midnight); }
#loginForm h2 { font-size: 1.65rem; line-height: 1.3; }
.alwah-mark, .device-alwah-mark { display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; background: transparent; box-shadow: none; }
.alwah-mark img, .device-alwah-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.auth-brand .auth-mark.alwah-mark, .language-welcome-panel .auth-mark.alwah-mark { width: 72px; height: 72px; }
.brand-mark.alwah-mark, .device-alwah-mark { width: 44px; height: 44px; }
.brand-mark.alwah-mark img, .device-alwah-mark img, .loading-mark.alwah-mark img { filter: brightness(0) invert(1); }
.device-topbar .device-brand strong { font-size: 1.4rem; }
.device-topbar .device-brand > div > span { color: #e2e9eb; }
.auth-wordmark > span[lang="ar"] { font-family: "Alwah Rakkas", serif; font-size: 3.75rem; font-weight: 400; line-height: 1.35; font-synthesis: none; }
.auth-brand .auth-wordmark > h1 { font-family: "Alwah Cormorant", Georgia, serif; font-size: 3rem; font-weight: 600; line-height: 1.1; }
.brand-wordmark > span[lang="ar"], .language-welcome-heading .school-wordmark span[lang="ar"] { font-family: "Alwah Rakkas", serif; font-weight: 400; line-height: 1.5; font-synthesis: none; }
.brand .brand-wordmark > h1, .language-welcome-heading .school-wordmark span[lang="en"], .device-brand strong { font-family: "Alwah Cormorant", "Alwah Rakkas", serif; font-weight: 600; }
html[lang="ar"] .device-brand strong { font-family: "Alwah Rakkas", serif; font-weight: 400; line-height: 1.5; }
@media (max-width: 680px) {
  .auth-brand .auth-mark.alwah-mark, .language-welcome-panel .auth-mark.alwah-mark { width: 56px; height: 56px; }
  .auth-wordmark > span[lang="ar"] { font-size: 3.25rem; }
  .auth-brand .auth-wordmark > h1 { font-size: 2.6rem; }
}
.auth-form h2 { color: var(--rh-midnight); font-size: 1.85rem; }
.auth-endorsement {
  position: absolute;
  inset-inline-start: 40px;
  inset-block-end: 38px;
  width: 210px;
  color: var(--rh-muted);
}

.auth-entry-layout {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1520px, calc(100vw - 56px));
  min-height: calc(100dvh - 56px);
  place-items: center end;
  padding-inline: clamp(0px, 2vw, 32px);
}

.auth-entry-layout > .auth-panel {
  z-index: 3;
  width: min(960px, calc(100vw - 72px));
  margin-inline-end: clamp(0px, 2vw, 28px);
  background: rgba(247, 241, 229, .985);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .42), 0 0 0 1px rgba(241, 217, 140, .38);
}

.auth-library-scene {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  color: var(--rh-gold-pale);
  background: #050807;
  opacity: 1;
  pointer-events: none;
}

.auth-library-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background-color: #050807;
  background-image: url("assets/auth-library-desktop-v3.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.auth-library-frame::before,
.auth-library-frame::after {
  position: absolute;
  inset: 0;
  content: "";
}

.auth-library-frame::before {
  display: none;
}

.auth-library-frame::after {
  z-index: 2;
  background: linear-gradient(90deg, rgba(3, 12, 14, .04) 0 38%, rgba(3, 12, 14, .18) 100%);
}

html[dir="rtl"] .auth-library-frame::after {
  background: linear-gradient(-90deg, rgba(3, 12, 14, .04) 0 38%, rgba(3, 12, 14, .18) 100%);
}

.auth-library-crown {
  position: absolute;
  z-index: 3;
  inset-block-start: 8px;
  inset-inline-start: clamp(14px, 1.8vw, 28px);
  display: grid;
  width: auto;
  grid-template-columns: 1fr;
  align-items: start;
}

.auth-library-crown.auth-library-crown-fitted {
  inset: auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  direction: ltr;
}

.auth-library-crown-copy {
  display: grid;
  min-width: max-content;
  justify-items: start;
  gap: 0;
  text-align: start;
}

.auth-library-crown strong,
.auth-library-crown small {
  font-family: "Aref Ruqaa", var(--rh-font-kufi);
  font-weight: 700;
  letter-spacing: 0;
}

.auth-library-crown strong {
  color: rgb(227, 215, 176);
  font-size: clamp(13rem, 21vw, 20rem);
  line-height: 1;
  opacity: .22;
  white-space: nowrap;
  text-shadow: none;
}

.auth-library-crown small { display: none; }

.auth-library-crown-line { display: none; }


.loading-screen {
  color: var(--rh-white);
  background: var(--rh-midnight);
  box-shadow: inset 12px 0 var(--rh-gold);
}

.loading-screen span { color: rgba(255,255,255,.68); }
.loading-mark { width: 94px; height: 94px; }
.loading-mark span { color: var(--rh-midnight); font-size: 4rem; }

.loading-screen .startup-recovery-actions .button {
  border-color: var(--rh-gold);
  color: var(--rh-midnight);
  background: #fffefb;
}

.loading-screen .startup-recovery-actions .button.primary {
  color: var(--rh-midnight);
  background: var(--rh-gold);
}

.loading-screen .startup-recovery-actions .button span {
  color: inherit;
}

/* The familiar application shell remains; its hierarchy now feels like a recitation hall. */
.sidebar {
  width: var(--sidebar-width);
  overflow: hidden;
  color: var(--rh-white);
  background: var(--rh-midnight);
  box-shadow: none;
}

.sidebar::before {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  display: block;
  width: 14px;
  opacity: 1;
  background: var(--rh-gold);
  background-image: repeating-linear-gradient(to bottom, transparent 0 24px, rgba(6,31,51,.42) 24px 25px);
  content: "";
}

.sidebar > * { z-index: 1; }

.brand {
  min-height: 138px;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid rgba(224,177,63,.38);
  padding: 21px 29px 17px 18px;
}

html[dir="rtl"] .brand { padding: 21px 18px 17px 29px; }

.brand-mark {
  width: 58px;
  height: 76px;
  flex: 0 0 auto;
}

.brand-mark span { font-size: 3.25rem; }

.brand-wordmark { gap: 1px; }
.brand-wordmark > span { color: var(--rh-gold); font-family: var(--rh-font-kufi); font-size: 1.12rem; line-height: 1.25; }
.brand h1 { color: var(--rh-white); font-size: 1.03rem; }
.brand p { margin-top: 3px; color: rgba(255,255,255,.58); font-size: .63rem; }
.sidebar-endorsement { margin-top: 9px; color: rgba(255,255,255,.68); }
.sidebar-endorsement img { width: 24px; height: 24px; }
.sidebar-endorsement span { overflow: hidden; font-size: .58rem; line-height: 1.25; text-overflow: ellipsis; }

.main-nav {
  padding: 9px 24px 18px 10px;
  scrollbar-color: rgba(224,177,63,.48) transparent;
}

html[dir="rtl"] .main-nav { padding: 9px 10px 18px 24px; }

.nav-section-label {
  margin: 17px 11px 6px;
  color: var(--rh-gold-pale);
  font-size: .64rem;
  font-weight: 700;
  text-transform: none;
}

.nav-item,
.sidebar-action {
  min-height: 42px;
  border-radius: 0;
  color: rgba(255,255,255,.74);
  font-size: .8rem;
}

.nav-item:hover,
.sidebar-action:hover {
  color: var(--rh-white);
  background: rgba(255,255,255,.09);
}

.nav-item.active {
  border: 0;
  border-inline-start: 6px solid var(--rh-gold);
  color: var(--rh-midnight);
  background: var(--rh-gold);
  font-weight: 700;
}

.sidebar-action.report-problem-button {
  border-inline-start: 5px solid var(--rh-gold);
  color: var(--rh-midnight);
  background: var(--rh-gold-pale);
  font-weight: 800;
}

.sidebar-action.report-problem-button:hover,
.sidebar-action.report-problem-button:focus-visible {
  color: var(--rh-white);
  background: var(--rh-deep);
}

.nav-item.active svg { color: var(--rh-midnight); }

.sidebar-footer {
  border-color: rgba(224,177,63,.32);
  padding: 10px 24px max(14px, env(safe-area-inset-bottom)) 10px;
}

html[dir="rtl"] .sidebar-footer { padding: 10px 10px max(14px, env(safe-area-inset-bottom)) 24px; }
.app-version-sidebar { border-color: rgba(224,177,63,.55); color: var(--rh-gold-pale); background: transparent; }

.workspace {
  min-height: 100vh;
  margin-inline-start: var(--sidebar-width);
  background: var(--rh-ivory);
}

.topbar {
  position: sticky;
  z-index: 18;
  top: 0;
  min-height: 76px;
  border-bottom: 2px solid var(--rh-midnight);
  padding: 10px 24px;
  background: rgba(247,241,229,.98);
  backdrop-filter: none;
}

.page-heading {
  flex: 1 0 190px;
  min-width: 180px;
  max-width: 300px;
}

.topbar-actions {
  flex: 0 1 auto;
  min-width: 0;
}

.global-search {
  flex: 0 1 180px;
  max-width: 190px;
}

.app-version-topbar { display: none; }

.page-heading > span { color: var(--rh-gold-deep); font-size: .7rem; }
.page-heading h2 { color: var(--rh-midnight); font-size: 1.35rem; }
.page-heading .page-title-row h2 { flex: 0 0 auto; max-width: none; }
.role-badge { border-radius: 0 !important; }
.role-badge.admin { color: var(--rh-midnight) !important; background: var(--rh-gold); }
.global-search input { border: 0; border-bottom: 2px solid var(--rh-midnight); border-radius: 0; background: transparent; }
.topbar .language-toggle { background: #d8e4e8; }
.topbar .user-button { border-color: var(--rh-midnight); background: transparent; }
.owner-preview-banner { border: 0; border-bottom: 2px solid var(--rh-gold-deep); background: var(--rh-gold); }

.view {
  width: min(100%, 1600px);
  padding: 34px clamp(22px, 3vw, 52px) 58px;
}

.view-intro {
  align-items: flex-end;
  margin-bottom: 28px;
}

.view-intro > div:first-child { padding-inline-start: 0; }
.view-intro > div:first-child::before { display: none; }
.view-intro h3 { color: var(--rh-midnight); font-size: clamp(1.75rem, 2.6vw, 2.55rem); }
.view-intro p { max-width: 840px; color: var(--rh-muted); font-size: .88rem; }
.date-control > span,
.select-control > span { color: var(--rh-gold-deep); }

/* Today keeps the known date, filters, student rows, and Grade/Open actions. */
[data-view-panel="today"].active {
  width: 100%;
  max-width: none;
  padding: 0 0 64px;
}

.today-intro {
  min-height: 260px;
  align-items: end;
  margin: 0;
  padding: 46px clamp(24px, 4vw, 70px) 30px;
  color: var(--rh-white);
  background: var(--rh-midnight);
}

.today-intro .eyebrow { color: var(--rh-gold) !important; }
.today-intro h3 { max-width: 760px; color: var(--rh-white); font-size: clamp(2.35rem, 4vw, 4.1rem); }
.today-intro p { color: rgba(255,255,255,.68); font-size: .92rem; }
.today-intro .date-control { width: min(230px, 100%); }
.today-intro .date-control span { color: var(--rh-gold-pale); }
.today-intro .date-control input { border-color: rgba(255,255,255,.55); color: var(--rh-white); background: rgba(255,255,255,.08); color-scheme: dark; }

.metric-row {
  grid-template-columns: 1.15fr 1.15fr 1fr 1fr;
  gap: 0;
  margin: 0 0 34px;
  border: 0;
  border-radius: 0;
  padding: 0 clamp(24px, 4vw, 70px) 34px;
  color: var(--rh-white);
  background: var(--rh-midnight);
}

.metric {
  min-height: 108px;
  border: 0;
  border-inline-start: 1px solid rgba(255,255,255,.22);
  padding: 18px 22px;
  background: transparent;
}

.metric:first-child { border-inline-start: 8px solid var(--rh-gold); }
.metric span { color: var(--rh-gold-pale); font-size: .72rem; }
.metric strong { color: var(--rh-white); font-size: 2.35rem; }
.metric small { color: rgba(255,255,255,.58); font-size: .69rem; }
.metric:nth-child(2) strong { color: var(--rh-gold); }

[data-view-panel="today"] .class-toolbar,
[data-view-panel="today"] .class-message,
[data-view-panel="today"] .roster-column-labels,
[data-view-panel="today"] .roster-list {
  margin-inline: clamp(24px, 4vw, 70px);
}

.class-toolbar {
  align-items: center;
  margin-bottom: 18px;
  padding-block: 14px;
  border-block: 2px solid var(--rh-midnight);
}

.class-toolbar .segmented { border: 0; background: transparent; }
.class-toolbar .segmented button { min-height: 39px; border-radius: 0; }
.class-toolbar .segmented button.active { background: var(--rh-midnight); }
.small-search input { border: 0; border-bottom: 1px solid #918778; border-radius: 0; background: transparent; }

.roster-column-labels {
  min-height: 38px;
  border: 0;
  border-bottom: 2px solid var(--rh-midnight);
  border-radius: 0;
  padding-inline: 18px;
  color: var(--rh-gold-deep);
  background: transparent;
  font-size: .68rem;
  text-transform: none;
}

.roster-list {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  counter-reset: rh-student;
}

.roster-row {
  position: relative;
  min-height: 76px;
  counter-increment: rh-student;
  border: 0;
  border-bottom: 1px solid rgba(16,28,36,.18);
  padding: 11px 18px;
  background: transparent;
}

.roster-row::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 4px;
  background: transparent;
  content: "";
}

.roster-row:hover { background: rgba(255,255,255,.52); }
.roster-row:hover::before { background: var(--rh-gold); }
.roster-row .avatar { width: 46px; height: 46px; border-color: var(--rh-gold); }
.roster-row .person-cell strong { color: var(--rh-midnight); font-size: 1rem; }
.roster-row .person-cell span { color: var(--rh-muted); }
.homework-status {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
  overflow: hidden;
}
.homework-status strong { font-size: .83rem; }
.homework-status .homework-grade,
.homework-status .homework-assignment,
.homework-status .homework-assignment-teacher { margin: 0; }
.homework-status .homework-grade { overflow: visible; }
.homework-status .homework-assignment {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--rh-midnight);
  font-size: .79rem;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.homework-status .homework-assignment-teacher {
  overflow: hidden;
  color: var(--rh-muted);
  font-size: .68rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grade-chip { border-radius: 0; }
.grade-chip.new { border-color: transparent; color: var(--rh-lapis); background: #dfeef3; }
.grade-chip.review { border-color: transparent; color: var(--rh-review); background: var(--rh-review-soft); }
.grade-chip.empty { color: var(--rh-muted); background: rgba(231,239,243,.72); }
.roster-row .button { min-width: 104px; border-radius: 0; }

/* Teacher session: the controls stay in the same order and remain fully labeled. */
[data-view-panel="session"].active { max-width: none; padding: 0 0 64px; }
[data-view-panel="session"] > #teachingSessionView > .view-intro {
  min-height: 190px;
  align-items: end;
  margin: 0;
  padding: 38px clamp(22px, 4vw, 62px) 30px;
  color: var(--rh-white);
  background: var(--rh-deep);
}

[data-view-panel="session"] > #teachingSessionView > .view-intro h3 { color: var(--rh-white); font-size: clamp(2rem, 3vw, 3.25rem); }
[data-view-panel="session"] > #teachingSessionView > .view-intro .eyebrow { color: var(--rh-gold) !important; }
[data-view-panel="session"] > #teachingSessionView > .view-intro p { color: rgba(255,255,255,.68); }
[data-view-panel="session"] .teacher-session-guidance,
[data-view-panel="session"] .session-focus,
[data-view-panel="session"] .timeline-panel,
[data-view-panel="session"] .teacher-queue,
[data-view-panel="session"] .empty-state.large,
[data-view-panel="session"] .live-session-grid {
  width: calc(100% - clamp(44px, 8vw, 124px));
  max-width: 1260px;
  margin-inline: auto;
}

.teacher-session-guidance {
  margin-top: 26px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fffdf8;
}

.teacher-guidance-heading {
  min-height: 74px;
  border: 0;
  padding: 15px 20px;
  color: var(--rh-white);
  background: var(--rh-midnight);
}

.teacher-guidance-heading > svg { color: var(--rh-gold); }
.teacher-guidance-heading span { color: var(--rh-gold-pale); text-transform: none; }
.teacher-guidance-heading h3 { color: var(--rh-white); font-size: 1.18rem; }
.class-guidance-rule,
.clock-policy-rule { background: #fffdf8; }
.class-guidance-rule > svg,
.clock-policy-rule > svg { color: var(--rh-lapis); }
.clock-policy-guide summary { color: var(--rh-midnight); background: #f3e6bd; }

.session-focus {
  width: auto;
  max-width: none;
  gap: 20px;
  margin-top: 28px;
  border: 0;
  border-radius: 0;
  padding: clamp(22px, 3vw, 38px);
  color: var(--rh-white);
  background: var(--rh-midnight);
}

.session-focus.live { width: auto; }
.session-focus label > span,
.session-focus p,
.session-focus small { color: rgba(255,255,255,.7); }
.session-focus .grading-anytime-note,
.session-focus .readiness-notice,
.session-focus .previous-shift-notice,
.session-focus .request-status,
.session-focus .step-away-reminder {
  border: 0;
  border-inline-start: 8px solid var(--rh-gold);
  border-radius: 0;
  color: var(--rh-white);
  background: rgba(255,255,255,.1);
}

.session-focus .grading-anytime-note span,
.session-focus .readiness-notice span { color: rgba(255,255,255,.76); }
.session-focus .mode-picker { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.09); }
.session-focus .mode-picker button { color: rgba(255,255,255,.76); }
.session-focus .mode-picker button.active { color: var(--rh-midnight); background: var(--rh-gold); }
.session-focus .ready-form input,
.session-focus .ready-form select { border-color: rgba(255,255,255,.6); }
.session-focus .button.primary { border-color: var(--rh-gold); color: var(--rh-midnight); background: var(--rh-gold); }
.session-focus .button.quiet { color: var(--rh-white); background: transparent; border-color: rgba(255,255,255,.52); }
.session-focus .button.danger-quiet { color: #ffd8d3; background: rgba(165,59,59,.32); border-color: #e2a6a0; }
.assigned-school-meet { border: 0; border-inline-start: 8px solid var(--rh-active); border-radius: 0; background: var(--rh-pale-blue); }

.session-live-metrics {
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin: 6px 0;
  border: 0;
  border-block: 1px solid rgba(255,255,255,.28);
  border-radius: 0;
  background: transparent;
}

.session-live-metrics > div { min-height: 88px; border-color: rgba(255,255,255,.2); padding: 16px; }
.session-live-metrics span { color: var(--rh-gold-pale); }
.session-live-metrics strong { color: var(--rh-white); font-size: 1.35rem; }
.session-live-metrics .live-clock-metric strong { color: var(--rh-gold); font-size: 1.9rem; }
.timeline-panel,
.teacher-queue { border: 0; border-radius: 0; background: #fffdf8; }
.timeline-panel { border-inline-start: 14px solid var(--rh-gold); }
.teacher-queue { padding: 22px; }
.teacher-queue .section-heading h4 { color: var(--rh-midnight); font-size: 1.4rem; }
.queue-row { min-height: 70px; }
.queue-row .button.primary { color: var(--rh-white); background: var(--rh-midnight); }

/* Grading retains both homework panels on one screen for learned muscle memory. */
[data-view-panel="grading"].active {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - 76px);
  padding: 0 0 70px 28px;
  background: var(--rh-ivory);
}

html[dir="rtl"] [data-view-panel="grading"].active { padding: 0 28px 70px 0; }

[data-view-panel="grading"].active::before {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: 28px;
  background: var(--rh-gold);
  background-image: repeating-linear-gradient(to bottom, transparent 0 22px, rgba(6,31,51,.38) 22px 23px);
  content: "";
}

.grading-header {
  position: relative;
  z-index: 1;
  min-height: 150px;
  margin: 0;
  border: 0;
  padding: 28px clamp(22px, 4vw, 64px);
  color: var(--rh-white);
  background: var(--rh-midnight);
}

.grading-header .button.quiet { color: var(--rh-white); border-color: rgba(255,255,255,.55); background: transparent; }
.grading-student-summary .avatar { width: 62px; height: 62px; border-color: var(--rh-gold); }
.grading-student-summary strong { color: var(--rh-white); font-size: clamp(1.5rem, 2.4vw, 2.35rem); }
.grading-student-summary span { color: rgba(255,255,255,.66); }
.grading-header .presence-badge { border-radius: 0; }
.history-edit-banner { margin: 24px clamp(22px, 4vw, 64px) 0; }
.grading-workspace { position: relative; z-index: 1; padding: 28px clamp(22px, 4vw, 64px) 0; }
.grading-form { gap: 22px; }
.homework-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

.homework-panel {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  padding: 0 22px 24px;
  background: #fffdf8;
}

.homework-panel::before {
  display: block;
  height: 11px;
  margin-inline: -22px;
  background: var(--rh-lapis);
  content: "";
}

.review-homework::before { background: var(--rh-review); }
.homework-title { min-height: 92px; margin: 0 -22px 18px; padding: 18px 22px; color: var(--rh-white); background: var(--rh-deep); }
.review-homework .homework-title { background: var(--rh-review); }
.homework-number { width: 42px; height: 42px; border: 2px solid var(--rh-gold); border-radius: 0; color: var(--rh-midnight); background: var(--rh-gold); }
.review-homework .homework-number { color: var(--rh-review); background: var(--rh-gold); }
.homework-title h3 { color: var(--rh-white); font-size: 1.35rem; }
.homework-title p { color: rgba(255,255,255,.64); }
.homework-title .saved-state { border-radius: 0; color: var(--rh-white); background: rgba(255,255,255,.12); }

.current-assignment {
  min-height: 104px;
  border: 0;
  border-inline-start: 10px solid var(--rh-gold);
  border-radius: 0;
  padding: 16px;
  background: var(--rh-pale-blue);
}

.review-homework .current-assignment { border-inline-start-color: var(--rh-gold); background: var(--rh-review-soft); }
.current-assignment strong { color: var(--rh-midnight); font-size: 1.05rem; line-height: 1.45; }
.assignment-picker { border-top: 2px solid var(--rh-midnight); }
.assignment-picker legend { color: var(--rh-midnight); font-size: .87rem; }
.assignment-segment { border-inline-start: 6px solid var(--rh-gold); border-radius: 0; }
.add-assignment-segment { border-style: dashed; border-color: var(--rh-lapis); }
.previous-private-note { margin: 0 0 14px; border: 0; border-inline-start: 8px solid var(--rh-gold); border-radius: 0; }
.grading-actions {
  bottom: 10px;
  border: 2px solid var(--rh-midnight);
  border-radius: 0;
  padding: 10px;
  background: rgba(247,241,229,.98);
  box-shadow: 0 14px 36px rgba(6,31,51,.16);
}
.save-grades { min-width: 260px; min-height: 50px; }

/* Student records keep the familiar row, side preview, and single-page profile. */
.student-directory-layout { grid-template-columns: minmax(0,1fr) minmax(320px,390px); gap: 22px; }
.student-directory { overflow: hidden; border: 0; border-radius: 0; background: transparent; }
.student-list-header { min-height: 42px; border: 0; border-bottom: 2px solid var(--rh-midnight); padding-inline: 15px; color: var(--rh-gold-deep); background: transparent; text-transform: none; }
.student-row { min-height: 78px; border-bottom: 1px solid rgba(16,28,36,.18); padding-inline: 15px; background: transparent; }
.student-row:hover { background: rgba(255,255,255,.52); }
.student-row.selected { color: var(--rh-white); background: var(--rh-deep); box-shadow: inset 8px 0 var(--rh-gold); }
html[dir="rtl"] .student-row.selected { box-shadow: inset -8px 0 var(--rh-gold); }
.student-row.selected small,
.student-row.selected > svg { color: rgba(255,255,255,.7); }
.student-row.selected .avatar { border-color: var(--rh-gold); }
.student-preview {
  position: fixed;
  inset-block: 96px 18px;
  right: 22px;
  left: auto;
  z-index: 46;
  width: min(390px,calc(100vw - 44px));
  max-height: none;
  border: 0;
  border-inline-start: 14px solid var(--rh-gold);
  border-radius: 0;
  padding: 22px;
  background: var(--rh-midnight);
  box-shadow: 0 22px 50px rgba(6,31,51,.22);
  color: var(--rh-white);
}
html[dir="rtl"] .student-preview { right: auto; left: 22px; }
.student-preview-toolbar { background: var(--rh-midnight); }
.student-preview h4,
.student-preview strong { color: var(--rh-white); }
.student-preview span,
.student-preview small,
.student-preview p { color: rgba(255,255,255,.68); }
.student-preview-toolbar { color: var(--rh-gold-pale); }
.student-preview-person { border-color: rgba(255,255,255,.2); }
.student-preview-metrics { border-color: rgba(255,255,255,.2); }
.student-preview .button.primary { border-color: var(--rh-gold); color: var(--rh-midnight); background: var(--rh-gold); }
.student-preview .button:not(.primary) { color: var(--rh-white); border-color: rgba(255,255,255,.45); background: transparent; }

.profile-hero { min-height: 160px; border: 0; border-inline-start: 16px solid var(--rh-gold); padding: 24px; color: var(--rh-white); background: var(--rh-midnight); }
.profile-title h3 { color: var(--rh-white); font-size: clamp(2rem, 3vw, 3.2rem); }
.profile-meta { color: rgba(255,255,255,.68); }
.profile-metrics { gap: 0; border-block: 2px solid var(--rh-midnight); }
.profile-stat { border: 0; border-inline-end: 1px solid #b9c2c3; border-radius: 0; background: transparent; }
.profile-stat:last-child { border-inline-end: 0; }
.profile-stat strong { color: var(--rh-midnight); font-size: 1.8rem; }
.profile-section,
.chart-section {
  border: 0;
  border-radius: 0;
  background: #fffdf8;
  box-shadow: none;
}
.profile-section-heading { border: 0; border-bottom: 2px solid var(--rh-midnight); background: transparent; }
.profile-section-heading h4,
.section-heading h4 { color: var(--rh-midnight); font-size: 1.18rem; }
.chart-section { border-inline-start: 10px solid var(--rh-gold); }

/* Shared operational pages use strong section headers without changing their controls. */
.operations-section,
.access-panel,
.family-children-section,
.class-board,
.school-success,
.family-messages,
.clock-card,
.kiosk-card,
.timesheet-section,
.payroll-card,
.teacher-timesheet-card,
.family-admin-card,
.schedule-board,
.schedule-manager,
.account-card,
.support-card {
  border-radius: 0;
}

.clock-card,
.kiosk-card,
.timesheet-section,
.payroll-card,
.teacher-timesheet-card,
.operations-section,
.access-panel,
.family-children-section,
.class-board,
.school-success,
.family-messages {
  border: 0;
  border-inline-start: 10px solid var(--rh-gold);
  background: #fffdf8;
  box-shadow: none;
}

.clock-status-icon { border-radius: 0; }
.clock-status-icon.active { color: var(--rh-midnight); background: var(--rh-gold); box-shadow: none; }
.clock-status-row strong { color: var(--rh-midnight); font-size: 2.35rem; }
.clock-action { min-height: 58px; border-radius: 0; font-size: 1.05rem; }
.payroll-card-header,
.payroll-timesheet summary { background: var(--rh-pale-blue); }
.payroll-card { overflow: hidden; }
.payroll-status { border-radius: 0; }
.full-timeline,
.mini-timeline { border-radius: 0; }
.timesheet-workspace-timeline,
.timesheet-periods-panel,
.timesheet-period-editor,
.timesheet-control-card,
.timesheet-draft-panel { border-radius: 2px; }

/* Dialogs are the only elevated surfaces. Their close button stays reachable on phones. */
dialog::backdrop { background: rgba(6,31,51,.72); }
.dialog-card {
  border: 0;
  border-inline-start: 14px solid var(--rh-gold);
  border-radius: 0;
  background: var(--rh-ivory);
  box-shadow: 0 26px 80px rgba(0,0,0,.34);
}
.dialog-heading { border-bottom: 2px solid var(--rh-midnight); background: var(--rh-ivory); }
.dialog-heading h3 { color: var(--rh-midnight); font-size: 1.45rem; }

.mobile-nav { font-family: inherit; }

/* Mosque devices share the same mark while retaining the large tap-first workflow. */
.device-page { background: var(--rh-ivory); }
.device-topbar { min-height: 84px; border: 0; border-bottom: 8px solid var(--rh-gold); padding-inline: clamp(14px,3vw,36px); background: var(--rh-midnight); }
.device-brand { color: var(--rh-white); }
.device-brand > img { display: none; }
.device-daal { display: grid; width: 54px; height: 58px; flex: 0 0 auto; place-items: center; color: var(--rh-midnight); background: var(--rh-gold); font-family: var(--rh-font-kufi); font-size: 2.7rem; font-weight: 600; line-height: .8; }
.device-brand strong { color: var(--rh-white); font-size: 1.1rem; }
.device-parent-brand { display: flex !important; align-items: center; gap: 6px; color: rgba(255,255,255,.66) !important; }
.device-parent-brand img { display: block; width: 22px; height: 22px; object-fit: contain; }
.device-topbar .app-version { border-color: rgba(224,177,63,.58); color: var(--rh-gold-pale); background: transparent; }
.device-topbar .language-toggle { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); }
.device-topbar .language-toggle button { color: rgba(255,255,255,.75); }
.device-topbar .language-toggle button.active { color: var(--rh-midnight); background: var(--rh-gold); }
.device-main { width: min(1180px,100%); padding: clamp(24px,5vw,64px); }
.device-page-heading h1,
.device-station-heading h1 { color: var(--rh-midnight); font-size: clamp(2rem,4vw,3.6rem); }
.device-login-section,
.device-teacher-chooser,
.device-station { border-inline-start: 16px solid var(--rh-gold); padding-inline-start: clamp(18px,3vw,34px); }
.device-control-surface { border: 0; border-radius: 0; background: #fffdf8; box-shadow: none; }
.device-choice-title { color: var(--rh-white); background: var(--rh-deep); }
.device-choice-title h2 { color: var(--rh-white); }
.device-teacher-button { border-radius: 0; }
.device-state { border-radius: 0; }
.device-join-button { min-height: 66px; border-radius: 0; font-size: 1.1rem; }

/* Device screens are one task at a time. A shared auth-message grid rule must
   never create an implicit second column and squeeze the primary controls. */
.device-login-section,
.device-teacher-chooser,
.device-station {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.device-login-section > .auth-message,
.device-teacher-chooser > .auth-message,
.device-station > .auth-message {
  grid-column: 1;
  margin: 0;
}

.device-control-surface,
.device-page-heading > div,
.device-station-heading > div { min-width: 0; }

.device-choice-title { padding: 14px 16px; }
.device-state {
  min-width: 0;
  min-height: 64px;
  padding: 14px 16px;
  font-size: 1rem;
  line-height: 1.35;
}
.device-state span { min-width: 0; overflow-wrap: anywhere; }
.device-status-help { margin: 0; color: var(--rh-muted); font-size: .98rem; line-height: 1.5; }

@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .device-topbar {
    min-height: 88px;
    padding-block: max(12px, env(safe-area-inset-top)) 12px;
    padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  }

  .device-topbar-actions { flex: 0 0 auto; }
  .device-topbar .language-toggle button { min-width: 82px; min-height: 52px; }

  .device-main {
    width: min(780px, 100%);
    min-height: calc(100svh - 88px);
    padding: 32px clamp(20px, 4vw, 34px) max(48px, env(safe-area-inset-bottom));
  }

  .device-login-section,
  .device-teacher-chooser,
  .device-station {
    gap: 26px;
    border: 1px solid #c8d0ce;
    border-top: 8px solid var(--rh-gold);
    border-inline-start-width: 1px;
    padding: clamp(26px, 4vw, 36px);
    box-shadow: 0 18px 46px rgba(6,31,51,.1);
  }

  .device-page-heading {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    justify-content: initial;
    gap: 18px;
  }

  .device-page-heading .device-link-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
  }

  .device-page-heading h1,
  .device-station-heading h1 {
    font-size: clamp(2rem, 5vw, 2.55rem);
    line-height: 1.08;
  }

  .device-page-heading p,
  .device-station-heading p { font-size: 1.05rem; line-height: 1.55; }

  .device-login-form { gap: 18px; }
  .device-login-form label { gap: 8px; font-size: 1rem; }
  .device-login-form select { min-height: 60px; padding-inline: 16px; font-size: 1.05rem; }
  .device-login-form .large-action {
    width: 100%;
    min-height: 64px;
    height: auto;
    padding: 14px 18px;
    font-size: 1.05rem;
    line-height: 1.3;
    white-space: normal;
  }

  .device-station-heading { align-items: center; }
  .device-station-heading .button { min-height: 52px; flex: 0 0 auto; }

  .teacher-choice-surface { gap: 16px; }
  .device-teacher-buttons { grid-template-columns: repeat(2, minmax(240px, 1fr)); gap: 14px; }
  .device-teacher-button {
    grid-template-columns: 52px minmax(0, 1fr) 24px;
    min-height: 88px;
    padding: 14px 16px;
  }
  .device-teacher-avatar { width: 52px; height: 52px; }
  .device-teacher-button strong { font-size: 1.08rem; line-height: 1.25; word-break: normal; }

  .device-join-button { min-height: 70px; font-size: 1.12rem; }
  .device-station-actions .button,
  .device-station-actions .icon-button { min-height: 48px; }
}

html[dir="rtl"] .global-search svg,
html[dir="rtl"] .small-search svg { right: 12px; left: auto; }

.current-assignment-list {
  display: grid;
  gap: 8px;
  margin-top: 6px;
}

.current-assignment-segment {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line, #d5d8d2);
}

.current-assignment-segment:last-child { border-bottom: 0; }
.current-assignment-segment > span { display: grid; gap: 2px; min-width: 0; }
.current-assignment-segment b { font-size: .72rem; text-transform: uppercase; color: var(--muted); }
.current-assignment-segment small { font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.current-assignment-list .no-assignment { color: var(--muted); font-weight: 700; }

.current-assignment-source {
  margin-top: 10px;
  border-inline-start: 3px solid var(--rh-gold-deep);
  padding-inline-start: 8px;
  color: var(--rh-midnight) !important;
  font-size: .78rem !important;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.current-assignment > .quran-button { display: none; }

.assignment-segment-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.assignment-segment-footer .assignment-location { min-width: 0; }
.segment-quran-button { flex: 0 0 auto; }
.saved-state.assignment-only { color: #725316; background: #fff2c8; border-color: #d5ac4e; }
.assigned-school-meet.waiting { border-style: dashed; }

.device-catalog-add {
  display: grid;
  grid-template-columns: minmax(220px,1fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}

.device-catalog-add label,
.device-catalog-row label { display: grid; gap: 5px; min-width: 0; }
.device-catalog-add label span,
.device-catalog-row label span { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }

.device-catalog-list,
.active-session-list { display: grid; border-top: 1px solid var(--line, #d5d8d2); }

.device-catalog-row,
.active-session-list article {
  display: grid;
  grid-template-columns: auto minmax(180px,1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding-block: 10px;
  border-bottom: 1px solid var(--line, #d5d8d2);
}

.device-catalog-row > svg { color: var(--primary, #0b4a3d); }
.active-session-list article { grid-template-columns: auto minmax(0,1fr) auto; }
.active-session-list article > div { display: grid; gap: 3px; min-width: 0; }
.active-session-list article small { color: var(--muted); overflow-wrap: anywhere; }

.archived-device-list { margin-top: 14px; }
.archived-device-list summary { cursor: pointer; color: var(--muted); font-weight: 800; }
.archived-device-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 0; }

@media (max-width: 1220px) {
  :root { --sidebar-width: 260px; }
  .brand { padding-inline-start: 14px; }
  .main-nav { padding-inline-start: 7px; }
  .homework-grid { grid-template-columns: 1fr; }
  .homework-panel { width: 100%; }
  .profile-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .profile-stat:nth-child(3) { border-inline-end: 0; }
  .profile-stat:nth-child(-n+3) { border-bottom: 1px solid #b9c2c3; }
}

@media (max-width: 880px) {
  :root { --sidebar-width: min(320px, 88vw); }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: 18px 0 50px rgba(6,31,51,.36);
  }

  html[dir="rtl"] .sidebar { transform: translateX(100%); }
  .sidebar.open,
  html[dir="rtl"] .sidebar.open { transform: translateX(0); }

  .workspace,
  html[dir="rtl"] .workspace { margin-inline-start: 0; }

  .topbar { min-height: 68px; padding: 8px 12px; }
  .page-heading .app-version-topbar { display: none; }
  .page-heading .page-title-row h2 {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.has-director-notifications .topbar-actions { padding-inline-end: 48px; }
  .director-notifications {
    inset-block-start: calc(10px + env(safe-area-inset-top));
    inset-block-end: auto;
    inset-inline-end: 8px;
    inset-inline-start: auto;
  }
  html[dir="rtl"] .director-notifications {
    right: auto;
    left: 8px;
  }
  .director-notifications-button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--rh-midnight);
    border-radius: 0;
    color: var(--rh-midnight);
    background: var(--rh-gold);
    box-shadow: none;
  }
  .director-notifications-button:hover,
  .director-notifications-button.active { color: var(--rh-white); background: var(--rh-lapis); }
  .director-notifications-button.has-alerts { color: var(--rh-white); background: #9a2f2a; }
  .director-notifications-panel,
  html[dir="rtl"] .director-notifications-panel {
    position: fixed;
    inset-block-start: calc(66px + env(safe-area-inset-top));
    inset-block-end: calc(76px + env(safe-area-inset-bottom));
    right: 6px;
    left: 6px;
    width: auto;
    max-height: none;
  }
  .director-notifications-list {
    max-height: calc(100dvh - 218px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .view { padding: 26px 18px 96px; }

  .mobile-nav {
    z-index: 32;
    display: grid;
    grid-template-columns: repeat(var(--mobile-nav-count, 5), minmax(0, 1fr));
    min-height: calc(70px + env(safe-area-inset-bottom));
    border: 0;
    border-top: 8px solid var(--rh-gold);
    padding: 2px 6px max(5px, env(safe-area-inset-bottom));
    color: var(--rh-white);
    background: var(--rh-midnight);
    box-shadow: 0 -10px 30px rgba(6,31,51,.2);
  }

  .mobile-nav button {
    min-height: 56px;
    border-radius: 0;
    color: rgba(255,255,255,.66);
    background: transparent;
    font-size: .66rem;
  }

  .mobile-nav button.active { color: var(--rh-midnight); background: var(--rh-gold); }
  .mobile-nav .mobile-admin-menu { color: var(--rh-white); background: var(--rh-lapis); }

  [data-view-panel="today"].active,
  [data-view-panel="session"].active { padding-bottom: 94px; }

  .today-intro { min-height: 220px; padding: 32px 20px 24px; }
  .today-intro h3 { font-size: 2.4rem; }
  .metric-row { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 0 20px 28px; }
  .metric { min-height: 92px; border-bottom: 1px solid rgba(255,255,255,.2); padding: 14px; }
  .metric:nth-child(odd) { border-inline-start: 5px solid var(--rh-gold); }
  .metric:nth-child(even) { border-inline-start: 1px solid rgba(255,255,255,.2); }
  .metric strong { font-size: 1.8rem; }
  [data-view-panel="today"] .class-toolbar,
  [data-view-panel="today"] .class-message,
  [data-view-panel="today"] .roster-column-labels,
  [data-view-panel="today"] .roster-list { margin-inline: 20px; }

  .roster-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; padding: 12px 10px; }
  .roster-row .person-cell { grid-column: 1 / 3; }
  .roster-row .button { min-width: 92px; }

  [data-view-panel="session"] .teacher-session-guidance,
  [data-view-panel="session"] .session-focus,
  [data-view-panel="session"] .timeline-panel,
  [data-view-panel="session"] .teacher-queue,
  [data-view-panel="session"] .empty-state.large,
  [data-view-panel="session"] .live-session-grid { width: calc(100% - 36px); }

  .session-live-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .session-live-metrics > div:nth-child(2) { border-inline-end: 0; }
  .session-live-metrics > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.2); }

  [data-view-panel="grading"].active,
  html[dir="rtl"] [data-view-panel="grading"].active { padding-bottom: 100px; }
  .grading-header { min-height: 132px; padding: 20px 18px; }
  .grading-workspace { padding: 20px 18px 0; }
  .history-edit-banner { margin-inline: 18px; }

  .student-directory-layout { display: block; }
  .student-preview {
    inset-block: calc(68px + env(safe-area-inset-top)) calc(70px + env(safe-area-inset-bottom));
    right: 0;
    left: auto;
    width: min(420px, 94vw);
    border-inline-start: 14px solid var(--rh-gold);
  }
  html[dir="rtl"] .student-preview { right: auto; left: 0; }
}

@media (max-width: 680px) {
  .auth-library-frame {
    background-image: url("assets/auth-library-mobile-v3.webp");
    background-position: center top;
  }

  body { font-size: 15px; }

  .language-welcome-screen,
  .auth-screen { box-shadow: inset 8px 0 var(--rh-gold); }
  html[dir="rtl"] .language-welcome-screen,
  html[dir="rtl"] .auth-screen { box-shadow: inset -8px 0 var(--rh-gold); }

  .language-welcome-panel {
    display: grid;
    grid-template-columns: 82px minmax(0,1fr);
    gap: 14px;
    padding: 20px;
  }
  .language-welcome-panel > * { min-width: 0; max-width: 100%; }
  .language-welcome-heading { min-width: 0; overflow-wrap: anywhere; }
  .language-welcome-heading h1,
  .language-welcome-heading h2 {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .language-welcome-panel .auth-mark { width: 82px; height: 82px; }
  .language-welcome-panel .daal-mark span { font-size: 3.6rem; }
  .language-welcome-heading h1 { font-size: 1.42rem; }
  .language-welcome-heading h2 { font-size: 1.18rem; }
  .language-welcome-heading .school-wordmark { display: grid; gap: 2px; }
  .entry-endorsement { grid-column: 1 / -1; }
  .language-welcome-actions { grid-template-columns: 1fr; }
  .language-choice { min-height: 72px; }

  .auth-panel { width: calc(100vw - 24px); grid-template-columns: 1fr; padding: 20px; }
  .auth-brand { grid-column: 1; grid-row: auto; align-items: center; border-bottom: 2px solid var(--rh-midnight); padding: 10px 0 18px; }
  .auth-brand::after { display: none; }
  .auth-brand .auth-mark { width: 76px; height: 76px; }
  .auth-brand .daal-mark span { font-size: 3.4rem; }
  .auth-wordmark > span { font-size: 3.5rem; }
  .auth-wordmark h1 { font-size: 1.45rem; }
  .auth-endorsement { position: static; grid-column: 1; width: 100%; margin-top: 12px; }
  .auth-form { grid-column: 1; }

  .page-heading h2 { font-size: 1.02rem; }
  .topbar-actions .language-toggle { display: none; }

  .today-intro { display: grid; min-height: 0; gap: 20px; padding: 28px 14px 22px; }
  .today-intro h3 { font-size: 2rem; }
  .today-intro .date-control { width: 100%; }
  .metric-row { padding-inline: 14px; }
  [data-view-panel="today"] .class-toolbar,
  [data-view-panel="today"] .class-message,
  [data-view-panel="today"] .roster-column-labels,
  [data-view-panel="today"] .roster-list { margin-inline: 14px; }

  .class-toolbar { display: grid; gap: 11px; }
  .class-toolbar .segmented { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .small-search,
  .small-search input { width: 100%; min-width: 0; }
  .roster-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
  .roster-row .person-cell { grid-column: 1 / -1; padding-inline-end: 86px; }
  .roster-row .button { min-width: 78px; grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }
  .roster-row .homework-status { grid-row: 2; }

  [data-view-panel="session"] > #teachingSessionView > .view-intro { min-height: 148px; padding: 26px 14px 20px; }
  [data-view-panel="session"] > #teachingSessionView > .view-intro h3 { font-size: 2rem; }
  [data-view-panel="session"] .teacher-session-guidance,
  [data-view-panel="session"] .session-focus,
  [data-view-panel="session"] .timeline-panel,
  [data-view-panel="session"] .teacher-queue,
  [data-view-panel="session"] .empty-state.large,
  [data-view-panel="session"] .live-session-grid { width: calc(100% - 28px); }
  .class-guidance-grid,
  .clock-policy-grid { grid-template-columns: 1fr; }
  .class-guidance-rule:nth-child(odd),
  .clock-policy-rule:nth-child(odd) { border-inline-end: 0; }
  .teacher-guidance-heading { padding-inline: 14px; }
  .session-focus { padding: 18px 14px; }
  .ready-form,
  .ready-form[data-special-request="true"] { grid-template-columns: 1fr; }
  .device-catalog-add,
  .device-catalog-row { grid-template-columns: 1fr; align-items: stretch; }
  .device-catalog-row > svg { display: none; }
  .device-catalog-row .button { width: 100%; }
  .active-session-list article { grid-template-columns: auto minmax(0,1fr); }
  .active-session-list article .button { grid-column: 1 / -1; width: 100%; }
  .assignment-segment-footer { align-items: stretch; flex-direction: column; }
  .segment-quran-button { width: 100%; }
  .current-assignment-segment { grid-template-columns: 1fr; }
  .session-live-metrics { grid-template-columns: 1fr; }
  .session-live-metrics > div { border-inline-end: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
  .session-live-metrics > div:last-child { border-bottom: 0; }
  .session-actions { display: grid; grid-template-columns: 1fr; }
  .session-actions .button,
  .join-meet { width: 100%; }

  [data-view-panel="grading"].active,
  html[dir="rtl"] [data-view-panel="grading"].active { padding-inline-start: 10px; padding-inline-end: 0; }
  [data-view-panel="grading"].active::before { width: 10px; }
  .grading-header { display: grid; min-height: 0; grid-template-columns: auto minmax(0,1fr); gap: 12px; padding: 18px 12px; }
  .grading-student-summary .avatar { width: 50px; height: 50px; }
  .grading-student-summary strong { font-size: 1.35rem; }
  .grading-header .presence-badge { grid-column: 1 / -1; }
  .grading-workspace { padding: 16px 10px 0; }
  .homework-panel { padding: 0 14px 18px; }
  .homework-panel::before { margin-inline: -14px; }
  .homework-title { min-height: 80px; align-items: flex-start; flex-wrap: wrap; margin-inline: -14px; padding: 14px; }
  .homework-title > div { min-width: 0; flex: 1 1 120px; }
  .homework-title h3 { font-size: 1.16rem; }
  .homework-title h3,
  .homework-title p,
  .homework-title .saved-state { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .homework-title .saved-state { margin-inline-start: auto; text-align: center; }
  .current-assignment { display: grid; gap: 12px; }
  .current-assignment .quran-button { width: 100%; }
  .form-grid.two,
  .assignment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  [data-view-panel="grading"] .homework-panel > .form-grid.two {
    grid-template-columns: minmax(0,1fr) 112px;
  }
  .previous-private-note-heading {
    grid-template-columns: 18px minmax(0,1fr);
  }
  .previous-private-note-heading > small {
    grid-column: 2;
    text-align: start;
  }
  .grading-form { scroll-padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
  .grading-actions { bottom: calc(77px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto minmax(0,1fr); }
  .save-grades { min-width: 0; }
  .button span,
  .segmented button { overflow-wrap: anywhere; white-space: normal; }

  .student-list-header { display: none; }
  .student-row { grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
  .student-row > :nth-child(2),
  .student-row > :nth-child(3) { display: none; }
  .student-preview { inset-block-start: calc(68px + env(safe-area-inset-top)); width: 100vw; }
  .profile-hero { align-items: flex-start; flex-direction: column; }
  .profile-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .profile-stat:nth-child(odd) { border-inline-end: 1px solid #b9c2c3; }
  .profile-stat:nth-child(even) { border-inline-end: 0; }
  .profile-stat { border-bottom: 1px solid #b9c2c3; }
  .profile-layout,
  .progress-grid { grid-template-columns: 1fr; }

  dialog { width: calc(100vw - 12px); max-width: calc(100vw - 12px); max-height: calc(100dvh - 12px); margin: 6px auto; }
  .dialog-card { width: 100%; max-height: calc(100dvh - 16px); min-height: calc(100dvh - 16px); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .dialog-heading { top: 0; min-height: 66px; padding-top: max(10px, env(safe-area-inset-top)); }
  .dialog-heading .icon-button { width: 46px; height: 46px; flex: 0 0 auto; }

  .device-topbar { min-height: 72px; padding: 8px 10px; }
  .device-daal { width: 44px; height: 48px; font-size: 2.2rem; }
  .device-brand strong { font-size: .96rem; }
  .device-parent-brand { font-size: .62rem !important; }
  .device-parent-brand img { width: 18px; height: 18px; }
  .device-topbar .app-version { display: none; }
  .device-topbar .language-toggle button { min-width: 42px; }
  .device-main { padding: 24px 12px 90px; }
  .device-login-section,
  .device-teacher-chooser,
  .device-station { border-inline-start-width: 8px; padding-inline-start: 12px; }
}

@media (max-width: 390px) {
  .topbar { padding-inline: 8px; }
  .metric { padding-inline: 10px; }
  .metric small { display: block; }
  .metric strong { font-size: 1.55rem; }
  .roster-row .person-cell { padding-inline-end: 72px; }
  .homework-status .grade-chip { font-size: .67rem; }
  .form-grid.two,
  .assignment-grid { grid-template-columns: 1fr 72px; }
  [data-view-panel="grading"] .homework-panel > .form-grid.two {
    grid-template-columns: minmax(0,1fr) 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Online recitation handoff: request, queue, seat, then release. */
.student-class-page {
  width: min(860px, 100%);
  margin-inline: auto;
}

.student-class-identity {
  min-height: 132px;
  border-inline-start: 10px solid var(--rh-gold);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--rh-white);
  background: var(--rh-midnight);
}

.student-class-identity .avatar,
.student-class-identity > svg {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  border: 3px solid var(--rh-gold-pale);
}

.student-class-identity > svg { padding: 15px; color: var(--rh-gold); }
.student-class-identity > div { min-width: 0; display: grid; gap: 3px; }
.student-class-identity p { margin: 0; color: var(--rh-gold-pale); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.student-class-identity h3 { margin: 0; color: var(--rh-white); font-size: 2rem; }
.student-class-identity span { overflow-wrap: anywhere; color: rgba(255,255,255,.78); font-size: .86rem; }

.student-class-recitation { padding-block: 24px; border-bottom: 2px solid var(--rh-midnight); }
.student-class-recitation .student-ready-prompt,
.student-class-recitation .student-connection.ready { margin: 0; border: 0; padding: 0; background: transparent; }
.student-class-recitation .student-ready-prompt > div:first-child { padding-inline: 2px; }

.student-class-homework { padding-block: 24px; }
.student-class-homework .section-heading { margin-bottom: 13px; }
.student-class-homework-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.student-class-homework-grid article { min-width: 0; border: 1px solid var(--dq-border); border-inline-start: 7px solid var(--dq-hw1); padding: 15px 16px; display: grid; gap: 7px; background: var(--dq-surface); }
.student-class-homework-grid article.hw2 { border-inline-start-color: var(--dq-hw2); }
.student-class-homework-grid span { color: var(--rh-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.student-class-homework-grid strong { overflow-wrap: anywhere; color: var(--rh-midnight); font-size: 1rem; line-height: 1.5; }

.student-ready-prompt > .student-ready-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.student-homework-ready {
  width: 100%;
  min-height: 96px;
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--rh-white);
  text-align: start;
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(6,31,51,.15);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.student-homework-ready.hw1 { background: var(--rh-lapis); }
.student-homework-ready.hw2 { background: var(--rh-review); }
.student-homework-ready:hover,
.student-homework-ready:focus-visible { border-color: var(--rh-gold); outline: 3px solid rgba(216,165,62,.22); transform: translateY(-1px); box-shadow: 0 12px 25px rgba(6,31,51,.2); }
.student-homework-ready .student-ready-icon { width: 32px; height: 32px; flex: 0 0 auto; color: var(--rh-gold-pale); }
.student-homework-ready .student-ready-arrow { width: 22px; height: 22px; margin-inline-start: auto; flex: 0 0 auto; color: var(--rh-white); }
.student-homework-ready > span { min-width: 0; display: grid; gap: 2px; color: var(--rh-white); }
.student-homework-ready strong { color: inherit; font-size: 1.12rem; }
.student-homework-ready small { color: rgba(255,255,255,.86); font-size: .78rem; }
html[dir="rtl"] .student-homework-ready .student-ready-arrow { transform: rotate(180deg); }

.student-seated-link {
  min-height: 92px;
  border-inline-start: 8px solid var(--rh-gold);
  border-radius: 5px;
  padding: 16px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  color: #fff;
  background: var(--rh-midnight);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(6,31,51,.16);
}

.student-seated-link:hover,
.student-seated-link:focus-visible { outline: 3px solid rgba(216,165,62,.35); background: #0b344f; }
.student-seated-link.unavailable { background: #4a5258; }
.student-seated-link .avatar { width: 56px; height: 56px; border-color: var(--rh-gold-pale); }
.student-seated-link > div { display: grid; gap: 3px; }
.student-seated-link span,
.student-seated-link small { color: var(--rh-gold-pale); }
.student-seated-link strong { color: #fff; font-size: 1.08rem; }
.student-seated-link > svg { width: 22px; height: 22px; color: var(--rh-gold); }

.teacher-room-panel {
  margin-top: 18px;
  border-top: 4px solid var(--rh-green);
  padding-top: 14px;
}

.teacher-room-heading-actions { display: flex; align-items: center; gap: 8px; }
.teacher-room-students { display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 10px; }

.seated-student-card {
  min-width: 0;
  border: 1px solid #b5c1c3;
  border-inline-start: 12px solid var(--rh-gold);
  padding: 18px;
  background: #fffdf8;
}

.seated-student-heading {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
}

.seated-student-heading .avatar { width: 58px; height: 58px; }
.seated-student-heading > div { display: grid; gap: 2px; }
.seated-student-heading > div > span { color: var(--rh-green); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.seated-student-heading h4 { margin: 0; color: var(--rh-midnight); font-size: 1.3rem; }
.seated-student-heading small { color: #657176; }
.seated-student-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.release-student-note { margin-top: 12px; border-top: 1px solid #e0d3ac; padding-top: 11px; display: flex; align-items: center; gap: 8px; color: #7a4b00; font-size: .82rem; }
.release-student-note svg { width: 18px; height: 18px; flex: 0 0 auto; }

.teacher-assigned-student {
  grid-template-columns: 58px minmax(180px,1fr) minmax(150px,auto) auto;
}

.admin-online-queue-row {
  grid-template-columns: 58px minmax(180px,1fr) minmax(150px,auto) minmax(170px,240px) auto auto;
}

.queue-homework-type {
  border: 1px solid #d2b96f;
  border-radius: 4px;
  padding: 7px 9px;
  color: var(--rh-midnight) !important;
  background: #fff8e5;
  font-size: .74rem !important;
  font-weight: 800;
  text-align: center;
}

.admin-online-queue-row.seated { background: #eff7f3; }
.queue-release-owner { color: #657176; font-size: .72rem; font-weight: 800; text-align: center; }

.school-queue-overview {
  margin: 14px 0;
  border: 1px solid #b8c7ca;
  border-top: 4px solid var(--rh-midnight);
  background: #f8faf9;
}

.school-queue-overview-heading {
  min-height: 62px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #fff;
  background: var(--rh-midnight);
}

.school-queue-overview-heading > div { display: flex; align-items: center; gap: 10px; }
.school-queue-overview-heading > div > svg { width: 24px; height: 24px; color: var(--rh-gold); }
.school-queue-overview-heading > div > div { display: grid; gap: 2px; }
.school-queue-overview-heading strong { color: #fff; }
.school-queue-overview-heading span { color: #dce8e9; font-size: .75rem; }
.school-queue-overview-heading > span { border: 1px solid rgba(255,255,255,.38); padding: 5px 8px; color: #fff; font-weight: 800; }

.school-queue-board {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  align-items: start;
}

.school-queue-lane { min-width: 0; border-inline-end: 1px solid #cfd9d9; }
.school-queue-lane:last-child { border-inline-end: 0; }
.school-queue-lane.has-seated { box-shadow: inset 0 4px 0 var(--rh-green); }
.school-queue-lane.waiting-lane { background: #fffaf0; }
.school-queue-lane-heading { min-height: 62px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #dbe1df; }
.school-queue-lane-heading > div { min-width: 0; display: grid; gap: 2px; }
.school-queue-lane-heading > .school-queue-lane-actions { display: flex; align-items: center; gap: 6px; }
.school-queue-lane-heading strong { overflow: hidden; color: var(--rh-midnight); text-overflow: ellipsis; white-space: nowrap; }
.school-queue-lane-heading span { color: #647174; font-size: .7rem; }
.school-queue-seated { padding: 10px; border-bottom: 1px solid #cbd9d4; background: #eaf6f0; }
.school-queue-seated > span, .school-queue-line > span { display: block; margin-bottom: 6px; color: #5d696d; font-size: .66rem; font-weight: 900; text-transform: uppercase; }
.school-queue-line { min-height: 82px; padding: 10px; }
.school-queue-line > small { color: #778184; font-size: .72rem; }
.queue-overview-student { position: relative; min-width: 0; min-height: 48px; margin-top: 6px; padding: 6px 7px; display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 7px; border: 1px solid #d4dcda; background: #fff; }
.queue-overview-student:first-child { margin-top: 0; }
.queue-overview-student.seated { border-color: #76aa98; background: #fff; }
.queue-overview-student .queue-position { width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: var(--rh-midnight); font-size: .68rem; font-weight: 900; }
.queue-overview-student .avatar { width: 34px; height: 34px; font-size: .7rem; }
.queue-overview-student > div { min-width: 0; display: grid; gap: 1px; }
.queue-overview-student strong { overflow: hidden; color: var(--rh-midnight); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.queue-overview-student span { color: #647174; font-size: .66rem; }
.queue-overview-student > svg { width: 17px; height: 17px; color: var(--rh-green); }
.queue-overview-student .room-dismiss-button { width: 34px; height: 34px; color: #8b2f2a; border-color: #d8a29d; }
.room-call-button { color: var(--rh-midnight); background: #fff; }
.school-queue-seat-empty { min-height: 58px; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #748083; font-size: .72rem; text-align: center; }
.school-queue-seat-empty svg { width: 19px; height: 19px; flex: 0 0 auto; }

@media (max-width: 760px) {
  .student-class-identity { min-height: 112px; padding: 17px 16px; }
  .student-class-identity .avatar,
  .student-class-identity > svg { width: 60px; height: 60px; }
  .student-class-identity h3 { font-size: 1.6rem; }
  .student-class-recitation,
  .student-class-homework { padding-block: 19px; }
  .student-class-homework-grid { grid-template-columns: 1fr; gap: 9px; }
  .student-ready-prompt > .student-ready-choices { grid-template-columns: 1fr; }
  .student-homework-ready { min-height: 88px; }
  .student-seated-link { grid-template-columns: auto minmax(0,1fr); }
  .student-seated-link > svg { display: none; }
  .seated-student-heading { grid-template-columns: auto minmax(0,1fr); }
  .seated-student-heading > .status-chip { grid-column: 1 / -1; width: fit-content; }
  .seated-student-actions { display: grid; grid-template-columns: 1fr; }
  .seated-student-actions .button { width: 100%; }
  .teacher-room-heading-actions { align-items: stretch; flex-direction: column; }
  .teacher-room-heading-actions .button { width: 100%; }
  .teacher-room-students { grid-template-columns: 1fr; }
  .teacher-assigned-student,
  .admin-online-queue-row { grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
  .teacher-assigned-student .queue-student-person,
  .admin-online-queue-row .queue-student-person { grid-column: 1 / -1; }
  .teacher-assigned-student .queue-homework-type,
  .admin-online-queue-row .queue-homework-type { grid-column: 1 / -1; text-align: start; }
  .teacher-assigned-student .button { grid-column: 1 / -1; width: 100%; }
  .admin-online-queue-row select { grid-column: 1 / -1; width: 100%; }
  .admin-online-queue-row .button { grid-column: 1; width: 100%; }
  .admin-online-queue-row [data-dismiss-queue] { grid-column: 2; }
  .queue-number { display: none; }
  .school-queue-board { grid-template-columns: 1fr; }
  .school-queue-lane { border-inline-end: 0; border-bottom: 1px solid #cfd9d9; }
  .school-queue-lane:last-child { border-bottom: 0; }
  .school-queue-overview-heading { align-items: flex-start; }
  .school-queue-overview-heading > span { flex: 0 0 auto; }
}

@media (max-width: 1120px) {
  .auth-entry-layout {
    width: calc(100vw - 32px);
    place-items: end center;
    padding-inline: 0;
  }

  .auth-entry-layout > .auth-panel {
    width: min(900px, calc(100vw - 48px));
    margin-inline-end: 0;
  }

  .auth-library-crown {
    inset-inline-start: 24px;
  }

}

@media (max-width: 680px) {
  .auth-entry-layout {
    width: 100%;
    min-height: auto;
    place-items: start center;
    padding: clamp(132px, 19vh, 164px) 0 max(22px, env(safe-area-inset-bottom));
  }

  .auth-entry-layout > .auth-panel {
    width: calc(100vw - 24px);
    margin: 0;
    background: rgba(247, 241, 229, .99);
    box-shadow: 0 22px 58px rgba(0, 0, 0, .38), 0 0 0 1px rgba(241, 217, 140, .42);
  }

  .auth-library-frame::after {
    background: rgba(3, 12, 14, .08);
  }

  html[dir="rtl"] .auth-library-frame::after {
    background: rgba(3, 12, 14, .08);
  }

  .auth-library-crown {
    inset-block-start: 6px;
    inset-inline-start: 12px;
    width: auto;
    transform: none;
  }

  html[dir="rtl"] .auth-library-crown { transform: none; }

  .auth-library-crown strong { font-size: clamp(9.5rem, 48vw, 12rem); }

}