/* Teacher Home: the review queue, the classes and their codes, then recent
   activities and the library. Built from the Classes surface's parts — the
   same card, code chip and quiet buttons — so it reads as the front door to
   those pages rather than a new product. One column, because the order is the
   point: what is waiting comes first on every screen size. Corners, spacing
   and type come from the scales in tokens.css. */

.t-app > .t-home { flex: 1; min-height: 0; }
.t-home { min-width: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; background: var(--bg); }
.t-home[hidden] { display: none; }
/* Hidden with the other panels while the account's library is still loading. */
#view-teacher[data-library-pending="true"] .t-home { display: none; }
/* Home needs no info tip. Keep its slot so switching surfaces never moves
   the tabs or account controls; visibility also removes it from tab order. */
#view-teacher[data-surface="home"] #t-info { visibility: hidden; }
.t-home:focus-visible { outline: none; box-shadow: inset 0 0 0 var(--ring-w) var(--ring); }

.home {
  display: grid; gap: var(--sp-16);
  max-width: 64rem; margin: 0 auto;
  padding: var(--sp-32) clamp(var(--sp-16), 3vw, var(--sp-48)) var(--sp-48);
}
.home-queue, .home-queue-rows, .home-class-grid, .home-activity-list { list-style: none; margin: 0; padding: 0; }

/* --- Sections: a question, then its answer ------------------------------ */
.home-section { min-width: 0; padding: var(--sp-24); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); }
/* The only emphasis on the page, and only while something is waiting. */
.home-section.has-waiting { border-color: var(--c-teal); }
.home-section-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-16); }
.home-heading { flex: 1 1 18rem; min-width: 0; }
/* The question and its answer are one heading, so the lead sits one --sp-4
   under the question, like the next line of it. */
.home-question { margin: 0; color: var(--fg-muted); font: 600 var(--fs-14)/1.4 var(--font-sans); letter-spacing: 0; }
.home-lead { margin: var(--sp-4) 0 0; max-width: 44rem; color: var(--fg); font: 400 .9375rem/1.5 var(--font-sans); }
.home-lead-big { margin-top: var(--sp-4); font: 650 clamp(1.35rem, 2.6vw, 1.75rem)/1.25 var(--font-head); letter-spacing: -.02em; text-wrap: balance; }
.home-lead-big.is-muted { color: var(--fg-muted); font-weight: 600; }
.home-note { margin: var(--sp-8) 0 0; max-width: 46rem; color: var(--fg-muted); font: 400 var(--fs-14)/1.5 var(--font-sans); }
.home-note.is-error { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8); color: var(--c-alert); }
.home-retry { margin-top: var(--sp-16); min-height: 44px; padding: var(--sp-8) var(--sp-16); }
.home-note .home-retry { margin-top: 0; min-height: 36px; padding: var(--sp-4) .75rem; }
.home-subhead { margin: var(--sp-24) 0 var(--sp-8); color: var(--fg-muted); font: 600 var(--fs-13)/1.4 var(--font-sans); }

/* The one primary action, sized like the class page's New class button. */
.home .btn-primary { min-height: 46px; padding: .75rem 1.25rem; font-size: .9375rem; }
.home .btn-ghost { min-height: 44px; padding: var(--sp-8) var(--sp-16); font-size: .9375rem; }
.home :is(.btn, .btn-quiet, .btn-solid-quiet) { gap: var(--sp-8); }
.home .btn { display: inline-flex; align-items: center; justify-content: center; }
.home .btn svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-section-head > button { flex: none; }

/* --- What needs my attention ---------------------------------------------- */
.home-queue { display: grid; gap: var(--sp-24); margin-top: var(--sp-16); }
.home-queue-toggle { margin-top: var(--sp-8); }
.home-queue-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); margin-bottom: var(--sp-8); }
.home-queue-class { margin: 0; min-width: 0; color: var(--fg); font: 600 .9375rem/1.4 var(--font-sans); overflow-wrap: anywhere; }
.home-count { color: var(--fg-muted); font: 500 var(--fs-13)/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
/* A row's height comes from its min-height and the 44px buttons in it; the
   --sp-4 inset only matters when a long name wraps. */
.home-queue-row, .home-activity {
  display: grid; align-items: center; gap: var(--sp-8);
  min-height: 52px; padding: var(--sp-4) 0; border-top: 1px solid var(--border);
}
.home-queue-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
.home-emoji { display: grid; place-items: center; color: var(--fg-muted); }
.home-emoji svg { width: 20px; height: 20px; }
.home-row-name { min-width: 0; color: var(--fg); font: 500 var(--fs-14)/1.4 var(--font-sans); overflow-wrap: anywhere; }
.home-row-count { color: var(--fg-muted); font: 500 var(--fs-13)/1.5 var(--font-sans); font-variant-numeric: tabular-nums; }
.home .btn-quiet { min-height: 44px; }
.home .home-processing { align-self: flex-start; padding-inline: 0; color: var(--fg-muted); text-align: left; }
.home .home-processing.is-error { color: var(--c-alert); }

/* --- How do students get in ------------------------------------------------ */
.home-class-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--sp-16); margin-top: var(--sp-16); }
/* A card inside the section card, so it takes the nested-surface corner. */
.home-class { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; padding: var(--sp-16); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); }
.home-class:has(.home-class-open:hover) { border-color: var(--border-strong); background: var(--surface-hover); }
.home-class-open {
  position: absolute; inset: 0; z-index: 0;
  padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer;
}
.home-class-open:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-w) var(--ring); }
.home-class-name { margin: 0; color: var(--fg); font: 600 .9375rem/1.4 var(--font-sans); overflow-wrap: anywhere; }
.home-class-meta { margin: 0; color: var(--fg-muted); font: 400 var(--fs-13)/1.5 var(--font-sans); }
.home-waiting { color: var(--c-accent-ink); font-weight: 600; }
.home-class-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-8); margin-top: auto; padding-top: var(--sp-8); }
/* The class page's code chip, at the size its header uses. */
.home .home-code {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: var(--sp-8); min-width: 0; min-height: 44px; padding: var(--sp-8) .75rem;
  background: var(--card); color: var(--fg); border: 1px solid var(--border-strong); border-radius: var(--r-btn);
  font-size: inherit; letter-spacing: 0;
}
.home .home-code:hover { border-color: var(--c-accent-ink); }
.home-code .cls-copy-label { color: var(--fg-muted); font: 500 var(--fs-13)/1.4 var(--font-sans); letter-spacing: 0; }
.home-code .cls-code-value { font: 700 var(--fs-16)/1.4 var(--font-mono); letter-spacing: .12em; }
.home-code svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-muted); }
.home-empty { display: grid; justify-items: start; gap: var(--sp-16); }

/* --- What can I do ------------------------------------------------------------ */
.home-activity { grid-template-columns: 1.5rem minmax(0, 1fr) auto; min-height: 56px; }
.home-activity-body { display: flex; flex-direction: column; min-width: 0; }
.home-row-meta { color: var(--fg-muted); font: 400 var(--fs-13)/1.45 var(--font-sans); overflow-wrap: anywhere; }
.home-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-8); }
.home-library { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid var(--border); }
.home-library .home-note { margin: 0; }

/* --- Assign: which class --------------------------------------------------------- */
.home-assign .modal-body { text-align: left; }
.home-assign-list { display: grid; gap: var(--sp-8); margin: var(--sp-16) 0 0; padding: 0; list-style: none; }
.home-assign-option {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  width: 100%; min-height: 48px; padding: var(--sp-8) var(--sp-16);
  background: var(--card); color: var(--fg); border: 1px solid var(--border-strong); border-radius: var(--r-btn);
  font: 500 var(--fs-14)/1.4 var(--font-sans); text-align: left; cursor: pointer;
}
.home-assign-option:hover:not(:disabled) { background: var(--surface-hover); }
.home-assign-option:focus-visible { outline: none; box-shadow: 0 0 0 var(--ring-w) var(--ring); }
.home-assign-option:disabled { cursor: default; border-color: var(--border); color: var(--fg-muted); }
.home-assign-name { min-width: 0; overflow-wrap: anywhere; }
.home-assign-meta { flex: none; color: var(--fg-muted); font-size: var(--fs-13); }

@media (max-width: 820px) {
  /* The page scrolls below this, like the other teacher panels. */
  .t-home { overflow: visible; }
  .home { padding: var(--sp-16) var(--sp-16) var(--sp-32); }
}
@media (max-width: 640px) {
  .home-section { padding: var(--sp-16); }
  .home-section-head > button { width: 100%; }
  .home-queue-row { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .home-activity { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .home-row-actions { grid-column: 2; justify-content: flex-start; }
}

/* The selected Home queue has a name and an action, not the class table's
   numeric columns. Keep that layout independent at desktop and phone widths. */
.cls-card-progress .home-review-tools {
  align-items: center; justify-content: space-between; gap: var(--sp-8) var(--sp-16);
  flex-wrap: wrap; margin-bottom: var(--sp-8);
}
.home-review-tools .review-summary { flex: 1 1 14rem; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.home-review-tools .home-review-all { flex: none; min-height: 44px; }
.cls-card-progress .cls-results-list.home-review-list { min-width: 0; width: 100%; }
/* 52px rows: the 44px buttons set the height, so the rows need no inset. */
.cls-card-progress .home-review-list .cls-result-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--sp-8) var(--sp-16); min-height: 52px; padding: 0;
}
.cls-card-progress .home-review-list .cls-result-name {
  min-width: 0; grid-column: 1; grid-row: auto; position: static;
}
.cls-card-progress .home-review-list .cls-attempts-toggle {
  width: auto; min-height: 44px; justify-self: end; text-align: center;
}