/* ============================================================
   classes.css — "Classes" card on #account and the instructor
   dashboard (classes-card.js, cohort-dashboard.js)
   ------------------------------------------------------------
   Same quiet-paper language as academic.css: hairlines, teal for
   state, amber never. Logical properties only, so RTL needs no
   overrides; nothing here scrolls the page sideways at 360px (the
   student table turns into stacked cards below 760px).
   ============================================================ */

/* ── Card ─────────────────────────────────────────────────── */
.cls-card { display: grid; gap: 16px; }
.cls-sub { margin: 0 0 8px; font-size: .95rem; font-weight: 700; color: var(--acct-ink); }
.cls-sub--gap { margin-block-start: 18px; }
.cls-form { display: grid; gap: 12px; }
.cls-form--create { padding: 14px; border: 1px solid var(--acct-line); border-radius: 14px; background: var(--acct-paper); margin-block-start: 12px; }
.cls-field { display: grid; gap: 4px; min-width: 0; }
.cls-hint { font-size: .78rem; color: var(--acct-ink-faint); line-height: 1.5; margin: 0; }
.cls-code { font-family: var(--acct-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: .14em;
  text-transform: uppercase; text-align: center; font-size: 1.1rem; }
.cls-empty { margin: 0; padding: 12px 14px; border: 1px dashed var(--acct-line-strong); border-radius: 12px; color: var(--acct-ink-soft); font-size: .9rem; }

.cls-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.cls-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--acct-line); border-radius: 14px; background: var(--acct-paper); min-width: 0; }
.cls-item__main { min-width: 0; display: grid; gap: 2px; }
.cls-item__name { margin: 0; font-weight: 700; color: var(--acct-teal-deep); overflow-wrap: anywhere; }
.cls-item__meta { margin: 0; font-size: .8rem; color: var(--acct-ink-soft); overflow-wrap: anywhere; }
.cls-item__side { display: grid; gap: 6px; justify-items: end; flex: none; }
@media (max-width: 420px) { .cls-item { flex-direction: column; align-items: stretch; } .cls-item__side { justify-items: stretch; text-align: center; } }

/* ── One-time invite code ─────────────────────────────────── */
.cls-invite { display: grid; gap: 8px; padding: 14px; margin-block-end: 12px; border-radius: 14px;
  background: var(--acct-tint); border: 1px solid color-mix(in srgb, var(--acct-teal) 35%, transparent); }
.cls-invite__title { margin: 0; font-weight: 700; color: var(--acct-teal-deep); }
.cls-invite__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cls-invite__code { font-family: var(--acct-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 1.5rem; font-weight: 700;
  letter-spacing: .16em; padding: 6px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--acct-line-strong); user-select: all; }
.cls-invite__copy { display: inline-flex; align-items: center; gap: 6px; }
.cls-invite__copy svg { width: 16px; height: 16px; }
.cls-invite__note { margin: 0; font-size: .82rem; color: var(--acct-ink-soft); line-height: 1.5; }

/* ── Dashboard dialog ─────────────────────────────────────── */
.cls-dash { inline-size: min(1100px, calc(100vw - 24px)); max-block-size: calc(100dvh - 24px); padding: 0; margin: auto;
  border: 1px solid var(--acct-line-strong); border-radius: 20px; background: var(--surface); color: var(--acct-ink);
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .45); overflow: hidden; }
.cls-dash[open] { display: flex; flex-direction: column; }
.cls-dash::backdrop { background: rgb(10 20 25 / .55); backdrop-filter: blur(3px); }
.cls-dash__root.acct { display: flex; flex-direction: column; flex: 1 1 auto; min-block-size: 0; max-inline-size: none;
  margin: 0; padding: 0; overflow: visible; background: var(--surface); }
.cls-dash__pad { padding: clamp(16px, 2.6vw, 28px); display: grid; gap: 18px; align-content: start; }
.cls-dash__scroll { overflow-y: auto; min-block-size: 0; overscroll-behavior: contain; }
.cls-dash__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cls-dash__titles { min-width: 0; display: grid; gap: 3px; }
.cls-dash__title { margin: 0; font-family: var(--acct-display); font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.2; color: var(--acct-teal-deep); overflow-wrap: anywhere; }
.cls-dash__x { flex: none; }

.cls-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.cls-toolbar__range { display: grid; gap: 2px; min-inline-size: 180px; }
.cls-toolbar__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cls-toolbar__actions .acct-btn { display: inline-flex; align-items: center; gap: 6px; }
.cls-toolbar__actions svg { width: 16px; height: 16px; }

.cls-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.cls-stat { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--acct-line); background: var(--acct-paper); min-width: 0; }
.cls-stat__label { margin: 0; font-size: .78rem; font-weight: 600; color: var(--acct-ink-soft); }
.cls-stat__value { margin: 4px 0 0; font-family: var(--acct-display); font-size: 1.9rem; line-height: 1.1; color: var(--acct-teal-deep); font-variant-numeric: tabular-nums; }
.cls-stat__sub { margin: 2px 0 0; font-size: .78rem; color: var(--acct-ink-faint); }

.cls-block { display: grid; gap: 8px; align-content: start; min-width: 0; }
.cls-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .cls-cols { grid-template-columns: minmax(0, 1fr); } }

/* Student table */
.cls-tablewrap { border: 1px solid var(--acct-line); border-radius: 14px; overflow-x: auto; }
.cls-t { inline-size: 100%; border-collapse: collapse; font-size: .88rem; }
.cls-t th, .cls-t td { padding: 10px 12px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--acct-line); }
.cls-t thead th { position: sticky; inset-block-start: 0; background: var(--acct-paper); font-size: .76rem; font-weight: 700; color: var(--acct-ink-soft); white-space: nowrap; }
.cls-t tbody tr:last-child > * { border-block-end: 0; }
.cls-t tbody th { font-weight: 600; }
.cls-t td { font-variant-numeric: tabular-nums; }
.cls-t__name { display: grid; gap: 4px; min-inline-size: 150px; }
.cls-t__sub { font-size: .76rem; font-weight: 400; color: var(--acct-ink-faint); }
.cls-t__none { color: var(--acct-ink-faint); }
.cls-t tr.is-quiet { background: color-mix(in srgb, var(--acct-danger-tint) 45%, transparent); }
.cls-t__act { text-align: end; }

@media (max-width: 760px) {
  .cls-tablewrap { border: 0; overflow: visible; }
  .cls-t, .cls-t tbody, .cls-t tr, .cls-t th, .cls-t td { display: block; }
  .cls-t thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .cls-t tr { margin-block-end: 10px; padding: 10px 12px; border: 1px solid var(--acct-line); border-radius: 14px; background: var(--acct-paper); }
  .cls-t th, .cls-t td { border: 0; padding: 4px 0; }
  .cls-t th.cls-t__name { display: grid; }
  .cls-t td[data-label] { display: flex; justify-content: space-between; gap: 12px; }
  .cls-t td[data-label]::before { content: attr(data-label); color: var(--acct-ink-soft); font-size: .78rem; font-weight: 600; }
  .cls-t__act { text-align: start; }
}

/* Topics / simulators */
.cls-bars-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cls-bars-list__head { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.cls-meter { block-size: 8px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; margin-block: 4px; }
.cls-meter > span { display: block; block-size: 100%; border-radius: inherit; background: var(--acct-teal); }

/* Daily activity strip */
.cls-strip { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 2px; block-size: 72px;
  padding-block-end: 1px; border-block-end: 1px solid var(--acct-line-strong); overflow: hidden; }
.cls-strip > li { flex: 1 1 0; min-inline-size: 2px; max-inline-size: 18px; block-size: var(--h); border-radius: 3px 3px 0 0; background: var(--acct-teal); }

@media (prefers-reduced-motion: no-preference) {
  .cls-dash[open] { animation: cls-in .22s cubic-bezier(.2, .8, .2, 1); }
  @keyframes cls-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
}