/* The teacher page, on the light field (STYLE.md). Laid out for a laptop; still usable on a phone. */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 1rem; }
.filters label { margin-top: 0.4rem; }
.filters > .ssui-help { grid-column: 1 / -1; }

.set-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.7rem; }
.set-row { display: grid; gap: 0.3rem; }
.set-main { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.set-title { font-weight: 800; color: var(--field); font-size: 1.05rem; }
.all-row { display: grid; gap: 0.3rem; }
.all-row .set-meta { margin: 0; }
/* The daily count: a key line, set apart in the accent pill (decision 32). */
.daily-count { display: block; width: fit-content; margin: 0.4rem auto; padding: 0.35rem 0.9rem; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 800; }
/* All games' filters on one row, wrapping only on a narrow phone. */
.filter-row { grid-template-columns: repeat(3, minmax(9rem, 1fr)); }
@media (max-width: 560px) { .filter-row { grid-template-columns: 1fr; } }
#screen-nickname, #screen-my > h2 { text-align: center; }
.set-tags, .set-meta, .review-tags, .review-meta { color: #666; font-size: 0.9rem; margin: 0; }
.set-wait { color: var(--field); font-weight: 700; margin: 0.2rem 0; }
.set-stuck, .set-failed { color: #a3261e; font-weight: 600; margin: 0.2rem 0; }
.set-actions { margin: 0.3rem 0 0; }

.faults { border-color: var(--wrong); }
.faults ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
.saved { color: #666; font-size: 0.85rem; }

.table-wrap { display: flex; flex-direction: column; overflow-x: auto; margin-top: 0.8rem; }
.table-wrap > .ssui-help { order: -1; }
.clue-table { border-collapse: collapse; width: 100%; min-width: 64rem; font-size: 0.9rem; }
.clue-table th { text-align: left; color: var(--field); font-weight: 800; border-bottom: 2px solid var(--field); padding: 0.4rem; }
.clue-table td { border-bottom: 1px solid #ece7f4; padding: 0.3rem; vertical-align: top; }
.clue-table td.clue-number { color: #888; font-weight: 700; width: 2.5rem; }
.clue-table select, .clue-table input[type="text"], .clue-table textarea {
  font-size: 0.88rem; padding: 0.3rem 0.4rem; border-width: 1px; min-height: 0; }
.clue-table textarea { min-height: 3.2rem; min-width: 16rem; }
.clue-table td.level input { display: block; margin-bottom: 0.2rem; min-width: 7rem; }
.clue-table td.level[data-level="easy"] { border-left: 4px solid var(--answer-green); }
.clue-table td.level[data-level="medium"] { border-left: 4px solid var(--answer-yellow); }
.clue-table td.level[data-level="hard"] { border-left: 4px solid var(--answer-red); }
.clue-table .readonly-cell { white-space: pre-wrap; }
.clue-table tr.has-fault td { background: #fff3f5; }

/* The top matter of each screen, centred (owner, 2026-11-04). */
#screen-list > .actions:first-of-type, #screen-review > .actions:first-of-type { justify-content: center; }
.review-tags, .review-meta, #review-readonly, #review-not-ready, #start-set { text-align: center; }

/* The start screen's Test view (phase 3, quad-screen-game-test): the launcher in the site's colours. */
#start-advanced { --quad-accent: var(--field); --quad-muted: #ece7f4; }
.test-view { margin-top: 1rem; }

/* New game: one box per unit of the class's textbook (owner, 2026-11-05). */
.unit-pick { border: 1px solid #ece7f4; border-radius: var(--radius-card); padding: 0.5rem 0.8rem; margin: 0.6rem 0; }
.unit-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.2rem 1rem; }
.unit-box { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; margin: 0; }
.book-line { font-weight: 700; color: var(--field); margin: 0.4rem 0; }

/* New game: the games already covering the ticked units (owner, 2026-11-05: reuse first). */
.reuse { border-color: var(--answer-green); }
.reuse-lead { font-weight: 700; margin: 0 0 0.4rem; }
.reuse-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.reuse-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.confirm-line { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.pill.replaced { background: #ddd; color: #555; }