/* =========================================================
   IZORA — THE TEACHER'S PANEL (teacher.html) and the quiz page's extras
   Built on the sınaq cards and tables of css/practice.css.
   ========================================================= */

.t-row3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 560px) { .t-row3 { grid-template-columns: 1fr; } }
.t-hint { margin: 4px 0 12px; }
.t-dim { color: var(--text-3); font-size: 13px; }
.t-h { margin: 0 0 12px; }

/* The builder, the review and the request are one centred column (the
   sign-up form's width): on a wide screen the topic names sat at the left
   edge and their counts at the right, a whole screen apart, and the review
   left half the page empty. */
.t-col { max-width: 760px; margin-left: auto; margin-right: auto; }
.t-build .fld { margin-bottom: 14px; }

/* the way back: top left, above the title — back is left */
.t-back {
  display: block; width: max-content; margin-bottom: 14px; font-size: 14px; color: var(--text-2);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.t-back:hover { color: var(--text); border-bottom-color: var(--text); }
/* the way forward: right end of its bar */
.t-next { margin-left: auto; }

/* topics by level, each with a count and its stepper */
.t-levels { display: flex; flex-direction: column; gap: 6px; }
.t-level { border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--panel); }
.t-level summary {
  cursor: pointer; padding: 11px 14px; font-size: 14.5px; color: var(--text-2);
  display: flex; align-items: center; gap: 10px; list-style: none;
}
.t-level summary::-webkit-details-marker { display: none; }
.t-level summary::before { content: "▸"; color: var(--text-3); font-size: 12px; width: 10px; transition: transform .15s; }
.t-level[open] summary::before { transform: rotate(90deg); }
.t-lvl { color: var(--text); font-weight: 600; white-space: nowrap; }
.t-lvl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.t-lvl-n { margin-left: auto; color: var(--brand); white-space: nowrap; }
.t-lvl-n[hidden] { display: none; }
.t-level[open] summary { border-bottom: 1px solid var(--line-soft); }
.t-topics { list-style: none; margin: 0; padding: 4px 14px 8px 32px; }
.t-topics li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px;
}
.t-topics li:last-child { border-bottom: 0; }
.t-topic small { display: block; font-size: 12px; margin-top: 1px; }
.t-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.t-step button {
  width: 34px; height: 32px; border: 0; background: transparent; color: var(--text-2);
  font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
}
.t-step button:hover { background: var(--tint); color: var(--text); }
.t-step input {
  width: 44px; padding: 0; border: 0; border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
  background: transparent; color: var(--text); font: inherit; font-weight: 500; font-variant-numeric: tabular-nums; text-align: center;
  -moz-appearance: textfield; appearance: textfield; height: 32px;
}
.t-step input::-webkit-outer-spin-button, .t-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.t-step input:focus { outline: none; background: var(--tint); }
.mono-tag.late { color: var(--m-weak); }
.t-foot { position: sticky; bottom: 0; padding: 12px 0 2px; background: var(--panel); margin-top: 10px; border-top: 1px solid var(--line-soft); }

/* the review: the action bar, then the cards */
.t-review-bar .sn-act { margin-top: 0; }
.t-qlist { margin-top: 4px; }

/* the class in numbers: tiles in a row */
.t-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 18px; }
.t-tile {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--r-sm); background: var(--tint);
}
.t-tile-v { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.t-tile-k { font-size: 12px; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.t-tile-s { font-size: 12px; color: var(--text-3); }

/* the spread of scores: five bands, one column each, the count above */
.t-spread { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; max-width: 520px; height: 132px; align-items: end; }
.t-band { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.t-band-n { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; min-height: 18px; margin-top: auto; }
.t-band-bar { width: 100%; height: 80px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.t-band-bar i { display: block; width: 100%; background: var(--m-strong); border-radius: 4px 4px 0 0; min-height: 0; transition: height .3s; }
.t-band-k { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.t-ok { color: var(--m-strong); }
.t-fresh { border-color: var(--m-strong); }

/* a previewed question: swap / drop at the right of its bar */
.t-tools { margin-left: auto; display: flex; gap: 6px; }
.t-tools .btn { padding: 5px 12px; }

/* the link, copyable */
.t-link input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--tint); color: var(--text); font: inherit; font-size: 14px;
}

.t-table td { vertical-align: top; }
.t-table td a { color: inherit; text-decoration: none; }
.t-table td a:hover b { text-decoration: underline; }

/* per-question tally: the bar is the share who got it right */
.t-qstats { list-style: none; margin: 0; padding: 0; }
.t-qstats li { border-bottom: 1px solid var(--line-soft); }
.t-qrow {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(150px, 220px); gap: 14px; align-items: center;
  width: 100%; padding: 9px 2px; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.t-qrow:hover { background: var(--tint); }
.t-qnums { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-bar { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.t-bar i { display: block; height: 100%; background: var(--m-strong); border-radius: 4px; }
.t-qbody { padding: 0 0 12px; }
.t-qbody .pp-rev-body { padding: 8px 0 0; }
@media (max-width: 560px) {
  .t-qrow { grid-template-columns: 60px minmax(0, 1fr); }
  .t-qnums { grid-column: 1 / -1; text-align: left; }
}

/* a student's row opens their answers */
.t-students tr[data-s] { cursor: pointer; }
.t-students tr[data-s]:hover td, .t-students tr[data-s]:focus-visible td { background: var(--tint); }
.t-students tr[data-s]:focus-visible { outline: none; }
.t-go { color: var(--brand); font-weight: 500; text-align: right; }

/* one student's answers */
.t-mark { margin-left: auto; }
.t-mark.ok { color: var(--m-strong); }
.t-mark.bad { color: var(--m-weak); }
.t-mark.none { color: var(--text-3); }

/* quiz.html: the e-mail, then the code from the mail */
.qz-email { margin: 0 0 14px; max-width: 420px; }
.qz-code { margin-top: 4px; }
.qz-pw { margin: 14px 0 0; font-size: 14px; }
.sn-card .sn-act[hidden], .qz-code[hidden], .qz-email[hidden] { display: none; }
/* the name, once, before the first quiz (an account made by a code has none) */
.qz-name { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 420px; }
@media (max-width: 420px) { .qz-name { grid-template-columns: 1fr; gap: 0; } }
/* an account let in by a quiz link only: the app's pages are not theirs */
:root[data-quiz-only] .nav-in { display: none !important; }