/* The Students screens, mounted in the ERP app or on the standalone page.
   Colours, type, radii and shadows are the design system's tokens, so the
   host's light, dark and school themes apply; this file only arranges the
   components and adds what they leave to the page. No colour is written
   here except through a token. */

.eq-students { display: grid; gap: 20px; min-width: 0; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 767px) { .eq-students { gap: 16px; } }

/* The local stand-in for Iconify's element (ui/lib/icons.jsx). */
iconify-icon { display: inline-block; width: 1em; height: 1em; line-height: 1; flex: none; }

/* The design system's focus ring, on everything a keyboard can reach. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible {
  outline: none; box-shadow: var(--focus-ring-shadow); border-radius: var(--radius-focus);
}

.eq-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eq-students .eq-loading { color: var(--text-2); margin: 0; }

/* Links in the content are the action colour. */
.eq-students a[href] { color: var(--brand-primary-ink); }

/* The tab panel takes the AppShell content grid's gap. */
[role="tabpanel"] { display: grid; gap: inherit; }
[role="tabpanel"][hidden] { display: none; }

.eq-profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.eq-profile-title { flex: 1 1 200px; min-width: 0; }
.eq-profile-title h1 { font-size: var(--fs-display-md); color: var(--text-1); }
.eq-profile-title h1.eq-h1-sm { font-size: var(--fs-display-sm); }
.eq-profile-title p { color: var(--text-muted); margin: 2px 0 0; }
.eq-profile-tabs { margin-top: 16px; overflow-x: auto; }

.eq-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--brand-primary-soft); color: var(--brand-primary-ink);
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
}
.eq-avatar-md { width: 48px; height: 48px; font-size: 17px; }
.eq-avatar-sm {
  width: 36px; height: 36px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--text-2);
}

.eq-stats { display: grid; gap: inherit; }
.eq-stat-label { font-size: var(--fs-body-sm); color: var(--text-muted); }
.eq-stat-value { margin-top: 6px; font-size: 16px; font-weight: 500; color: var(--text-1); min-height: 28px; display: flex; align-items: center; }
.eq-missing { color: var(--text-muted); font-weight: 400; font-size: var(--fs-body-md); }

.eq-split { display: grid; gap: inherit; align-items: start; }
.eq-card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); }

.eq-guardians { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.eq-guardians li { display: flex; align-items: center; gap: 10px; }
.eq-guardian-text { flex: 1; min-width: 0; }
.eq-guardian-name { font-weight: 500; font-size: 14px; color: var(--text-1); }
.eq-guardian-sub { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.eq-primary { font-size: 11px; color: var(--brand-primary-ink); }

.eq-today { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; color: var(--text-2); }

.eq-icon-button {
  appearance: none; border: none; background: none; cursor: pointer; color: var(--text-1);
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; flex: none;
}
.eq-icon-button:hover { background: var(--surface-2); }

/* The list (Find a child), after the students kit's directory. */
.eq-page-title { font-size: var(--fs-display-md); color: var(--text-1); }
.eq-page-title.eq-h1-sm { font-size: var(--fs-display-sm); }
.eq-page-sub { color: var(--text-2); margin: 4px 0 0; }
.eq-stat-big { margin-top: 6px; font-size: 26px; font-weight: 600; color: var(--text-1); }
.eq-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.eq-filter-q { flex: 1 1 240px; max-width: 360px; }
.eq-filter-select { flex: 0 0 200px; }
@media (max-width: 767px) {
  .eq-filters { padding: 12px; }
  .eq-filter-q, .eq-filter-select { flex: 1 1 100%; max-width: none; }
}
.eq-students a.eq-row-link { display: inline-flex; align-items: center; gap: 10px; color: var(--text-1); font-weight: 500; text-decoration: none; white-space: nowrap; }
.eq-students a.eq-row-link:hover span:last-child { text-decoration: underline; }
.eq-avatar-row { width: 32px; height: 32px; font-size: 12px; font-family: var(--font-body); }
.eq-more { display: flex; justify-content: center; padding: 16px; border-top: 1px solid var(--border); }

/* ── My classes: the teacher's area (ui/teacher/), ported from DPS-Teacher ── */

.tch { display: grid; gap: 16px; }
.tch .page { width: 100%; max-width: 760px; display: grid; gap: 20px; align-content: start; }
.tch[data-bp="mobile"] .page { gap: 16px; }

.tch .offline {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  font-size: var(--fs-body-sm); color: var(--text-1);
}

.tch .page-head { display: grid; gap: 4px; }
.tch .page-head h1 { font-size: var(--fs-display-md); line-height: var(--lh-display); color: var(--text-1); }
.tch .lede { margin: 0; color: var(--text-2); }

.tch .section-title { font-size: var(--fs-display-sm); color: var(--text-1); margin: 0 0 10px; }
.tch section { display: grid; }

.tch .quiet { margin: 0; color: var(--text-2); font-size: var(--fs-body-sm); }
.tch .asof { margin: 0; color: var(--text-2); font-size: var(--fs-caption); }

.tch .spot-number { margin: 0; font-size: var(--fs-display-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); }
.tch .spot-sub { margin: 4px 0 0; }

/* Card lists: one row per register, class or child. 56px rows keep touch targets well over 44px. */
.tch .rows { list-style: none; margin: 0; padding: 0; }
.tch .rows > li + li { border-top: 1px solid var(--border); }
.tch .row {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 56px; padding: 10px 16px;
  background: none; border: 0; text-align: left;
  font: inherit; color: var(--text-1); text-decoration: none; cursor: pointer;
}
.tch .row:hover:not(:disabled) { background: var(--surface-2); color: var(--text-1); }
.tch .row:disabled { cursor: default; }
.tch .row.static { cursor: default; }
.tch .row:focus-visible { box-shadow: inset 0 0 0 3px var(--brand-primary-soft-border); border-radius: 0; }
.tch .row > svg:last-child { color: var(--text-muted); flex: none; }
.tch .row-main { flex: 1; min-width: 0; display: grid; }
.tch .row-title { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.tch .row-sub { font-size: var(--fs-body-sm); color: var(--text-muted); }
.tch .roll { flex: none; width: 2.2em; text-align: right; color: var(--text-muted); font-size: var(--fs-body-sm); }
.tch .present { color: var(--text-muted); font-size: var(--fs-caption); }
.tch li.open { background: var(--surface-2); }

.tch .editor { display: grid; gap: 12px; padding: 4px 16px 16px; }
.tch .choices { display: flex; flex-wrap: wrap; gap: 8px; }
.tch .choices .eq-btn { min-height: 44px; } /* the 44px phone touch target */
.tch .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.tch .page-head + .actions { justify-content: flex-start; }

.tch .notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tch .notice > svg { color: var(--brand-primary-ink); flex: none; }
.tch .notice > p { margin: 0; flex: 1; min-width: 200px; }
.tch .notice + .quiet { margin-top: 12px; }

/* One submit, always in reach, and clear of the assistant's composer: on a
   phone a full-width bar 24px from the bottom; on wider screens a pill
   bottom-right, below the content area's 48px footer. */
.tch .submit-bar {
  position: sticky; bottom: 88px; z-index: 10;
  display: grid; gap: 8px; padding: 12px 16px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.tch .submit-bar p { margin: 0; text-align: center; font-size: var(--fs-body-sm); color: var(--text-2); }
.tch:not([data-bp="mobile"]) .submit-bar { bottom: 40px; grid-template-columns: 1fr auto; align-items: center; padding: 12px 20px; }
.tch:not([data-bp="mobile"]) .submit-bar p { text-align: left; }

.tch .readback { display: grid; gap: 10px; }
.tch .readback p { margin: 0; }

/* Toasts sit under the top bar, clear of the assistant at the bottom. The
   design system's Toast is one 48px line; let a long message wrap. */
.tch .toasts { position: fixed; left: 16px; right: 16px; top: 68px; z-index: 120; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.tch .toasts > * { pointer-events: auto; max-width: 520px; width: 100%; height: auto !important; min-height: 48px; padding-top: 10px !important; padding-bottom: 10px !important; }

/* The area's own links (Today, My classes, Corrections, Cover), and the
   switch between the office's Students screens and My classes for someone
   who is both. Links, each a screen with its own address; 44px targets. */
.tch .subnav, .eq-area-switch { display: flex; flex-wrap: wrap; gap: 8px; }
.tch .subnav a, .eq-area-switch a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-1); color: var(--text-2); text-decoration: none; font-weight: var(--fw-medium);
}
.tch .subnav a:hover, .eq-area-switch a:hover { background: var(--surface-2); color: var(--text-1); }
.tch .subnav a[aria-current="page"], .eq-area-switch a[aria-current="page"] {
  background: var(--brand-primary-soft); border-color: var(--brand-primary-soft-border); color: var(--brand-primary-ink);
}
.tch a.row[href] { color: var(--text-1); }

/* The teacher picked from the staff directory, with Change beside it. */
.tch .picked { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); padding: var(--space-2, 8px) 0; }
.tch .picked p { margin: 0; }