/* The teachers' page, over site.css: this week's quiz as Jean shows it, what comes out of a lesson, the three
   worries answered, whom to hand the work to and the last Try. Logical properties only; classes start with tch-. */

/* The promise, and this week's quiz as it is played */
.tch-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.tch-hero .site-hero-text { max-inline-size: none; }
.tch-pane { min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); box-shadow: var(--site-float); overflow: hidden; }
.tch-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1.1rem; border-block-end: 1px solid var(--line); background: var(--site-side); font-size: 0.875rem; font-weight: 600; }
.tch-chip { padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--room-2); color: var(--ink-soft); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.tch-quiz { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.2rem 1.2rem 1.1rem; }
.tch-count { color: var(--ink-soft); font-size: 0.8125rem; }
.tch-question { font: 700 1.25rem/1.3 var(--display); }
.tch-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.tch-answers li { display: grid; place-items: center; padding: 0.7rem 0.5rem; border: 1px solid var(--line-strong); border-radius: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The right answer, circled by the felt-tip pen round the whole answer, not just its figures. */
.tch-answers .felt { padding: 0.15em 0.7em; }
.tch-why { padding: 0.7rem 0.9rem; border-radius: 0.875rem; background: var(--room-2); color: var(--ink-soft); font-size: 0.875rem; }
.tch-ways { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.8rem 1.1rem; border-block-start: 1px solid var(--line); }
.tch-ways li { padding: 0.2rem 0.7rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-soft); font-size: 0.8125rem; }

/* What comes out: the quiz and the worksheet side by side, then the other three */
.tch-out { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.tch-out li { grid-column: span 2; display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); }
.tch-out li:nth-child(-n + 2) { grid-column: span 3; }
.tch-out li:first-child { border-color: var(--line-strong); }
.tch-out .icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--flame); }
.tch-out p { color: var(--ink-soft); font-size: 0.95rem; }
.tch-out .tch-ask { color: var(--ink-faint); font-size: 0.875rem; font-style: italic; }
.tch-out .button { align-self: flex-start; margin-block-start: auto; font-size: 0.8125rem; }

/* What teachers ask first */
.tch-worries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.tch-worries > div { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); }
.tch-worries h3 { font: 700 1.3rem/1.25 var(--display); }
.tch-worries .site-ticks { gap: 0.6rem; font-size: 0.95rem; }
.tch-worries .site-source { margin-block-start: auto; }

/* Then hand it on */
.tch-hand { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.tch-hand li { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); }
.tch-hand .icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--flame); }
.tch-hand p { color: var(--ink-soft); }
.tch-hand a { margin-block-start: auto; font-weight: 600; }

/* The last Try: three steps, and the button the felt-tip pen points at */
.tch-end ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2rem; counter-reset: step; }
.tch-end ol li { counter-increment: step; display: flex; align-items: baseline; gap: 0.5rem; color: var(--ink-soft); }
.tch-end ol li::before { content: counter(step); display: grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; flex: none; border-radius: 50%; background: var(--room-2); color: var(--ink); font-weight: 600; font-size: 0.85rem; }
.tch-go { position: relative; }
.tch-go .felt-point { position: absolute; inset-inline-end: calc(100% + 0.75rem); inset-block-start: -1.5rem; inline-size: 5rem; block-size: 3.3rem; }

/* A narrower window: two columns, the quiz across them; a phone: one */
@media (max-width: 60rem) {
  .tch-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tch-out li, .tch-out li:nth-child(-n + 2) { grid-column: auto; }
  .tch-out li:first-child { grid-column: 1 / -1; }
}
@media (max-width: 52rem) {
  .tch-hero, .tch-worries { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .tch-out { grid-template-columns: minmax(0, 1fr); }
  .tch-out li:first-child { grid-column: auto; }
  .tch-go .felt-point { display: none; }
}
@media (max-width: 30rem) {
  .tch-end ol { flex-direction: column; align-items: flex-start; text-align: start; }
}
@media (forced-colors: active) {
  .tch-answers li.is-right { border-width: 2px; }
}