/* homework-student.css — what a STUDENT sees around a homework, on a phone.
 *
 * Two families, both subject-neutral and both built from the house tokens in
 * static/css/core/theme.css (nothing here needs the science palette, so the
 * unit page and the Bootstrap assignment pages can load it too):
 *
 *   .hwr-*  the result page's partials (templates/courses/homework/):
 *           the comment card, the one next-step card, the retake, the
 *           "Read 1.3 / Watch" links under a missed question.
 *   .hws-*  the one status line a homework gets in any list: the score, one
 *           comment pill, or the due date in words. Never two pills.
 *
 * Colour jobs: gold = the comment (needs you / from a person), tangerine =
 * the one thing to do next, mint = done, cream = ground. Reading text is
 * never under 16px and every tap target is at least 44px tall.
 */

/* ---- eyebrow + small text ------------------------------------------ */
.hwr-eyebrow {
  margin: 0 0 8px;
  font-family: var(--jm-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

/* ---- under the score: the retake line ------------------------------ */
.hwr-attempts {
  margin: -8px 0 22px;
  text-align: center;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}

/* ---- the written comment ------------------------------------------- */
.hwr-comment {
  margin: 0 0 22px;
  padding: 16px 18px 18px;
  background: color-mix(in srgb, var(--gold) 12%, var(--cream));
  border: 2px solid color-mix(in srgb, var(--gold) 55%, var(--paper));
  border-left: 8px solid var(--gold);
  border-radius: 16px;
}
.hwr-comment .hwr-eyebrow { color: color-mix(in srgb, var(--gold) 55%, var(--ink)); }
.hwr-comment__text {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.hwr-comment__text a { color: var(--teal-deep); }

.hwr-held {
  margin: 0 0 22px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 12%, var(--cream));
  border-radius: 12px;
}

/* ---- the one next step --------------------------------------------- */
.hwr-next { margin: 0 0 26px; }

.hwr-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "action action" "title arrow";
  align-items: center;
  gap: 4px 14px;
  min-height: 76px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--tangerine);
  color: var(--teal-ink);
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--teal-ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.hwr-card:hover { color: var(--teal-ink); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--teal-ink); }
.hwr-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--teal-ink); }
.hwr-card:focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 3px; }
.hwr-card--retake { background: var(--gold); }
.hwr-card--review { background: var(--mint2); }

.hwr-card__action {
  grid-area: action;
  font-family: var(--jm-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}
.hwr-card__title {
  grid-area: title;
  min-width: 0;
  font-family: var(--jm-font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}
.hwr-card__arrow { grid-area: arrow; font-size: 30px; line-height: 1; font-weight: 800; }

.hwr-others { list-style: none; margin: 10px 0 0; padding: 0; }
.hwr-others li { margin: 0; }

.hwr-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-deep);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}
.hwr-link:hover { color: var(--teal-ink); text-decoration-color: var(--teal-deep); }

.hwr-retake {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 48px;
  margin-top: 14px;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}
.hwr-retake:hover { background: var(--mint); color: var(--ink); }
.hwr-retake__note { font-weight: 500; color: var(--muted); }

.hwr-practice { display: flex; flex-wrap: wrap; gap: 0 8px; margin-top: 6px; }
.hwr-practice__note { font-weight: 500; color: var(--muted); }

.hwr-note { margin: 12px 0 0; font-size: 16px; font-weight: 700; color: var(--ink); }

/* ---- under a missed question --------------------------------------- */
.hwr-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }

/* ---- the science result page: tap targets and reading sizes --------
   quiz.css sets some reading text at 15px and the top chip at 30px; the
   result page is read on a phone, so it gets 16px and 44px here. */
.hdwk--result .chip-link { height: 44px; padding: 0 16px; font-size: 16px; }
.hdwk--result .topbar__sub { font-size: 16px; }
/* On a phone the brand and the back chip share the first line and the
   homework's name takes the next, instead of the name wrapping word by word
   in the gap between them and the chip running off the right edge. */
@media (max-width: 600px) {
  .hdwk--result .topbar { flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 16px 0; }
  .hdwk--result .topbar__sub { flex: 1 1 100%; order: 3; line-height: 1.35; }
  .hdwk--result .topbar__controls { margin-left: auto; }
}
.hdwk--result .quiz-review__answer,
.hdwk--result .quiz-review__correct,
.hdwk--result .quiz-review__explain,
.hdwk--result .quiz-review__part,
.hdwk--result .quiz-review__held { font-size: 16px; }
.hdwk--result .quiz-endactions .quiz-btn { min-height: 48px; }
/* Room under the last link, so the fixed tab bar (and the cookie banner on
   a first visit) sit below the content rather than on it. */
.hdwk--result .quiz-wrap { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }

/* ---- a homework in a list ------------------------------------------ */
.hws-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.hws-status--done { color: var(--teal-deep); }
.hws-status--late { color: color-mix(in srgb, var(--tangerine) 72%, var(--ink)); }

.hws-comment {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--mint2);
  color: var(--teal-deep);
  font-family: var(--jm-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hws-comment__new { display: none; }
.hws-comment.is-new { background: var(--gold); color: var(--ink); }
.hws-comment.is-new .hws-comment__new { display: inline; }
.hws-comment.is-new .hws-comment__ready { display: none; }
.hws-comment--held { background: color-mix(in srgb, var(--gold) 18%, var(--paper)); color: var(--ink); }

.hws-label { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.hws-meta { font-size: 16px; color: var(--muted); }

/* The unit page's "Your homework" box (science-unit.css): phone sizes. The
   quiz gallery's rows are in science/quiz-gallery.css. */
.sci-homework a { min-height: 44px; align-items: center; }
.sci-homework .sci-hw-meta,
.sci-homework .sci-hw-done { font-size: 1rem; }
.sci-homework .hws-label { flex: 0 0 100%; }

/* The Bootstrap assignment pages: rows are links, so the whole row taps.
   On a phone the status sits UNDER the title, not beside it — beside, a
   long title wrapped word by word in the space the status left. */
.hws-row { min-height: 64px; }
.hws-row__inner { display: flex; flex-direction: column; gap: 6px; }
.hws-row__main { min-width: 0; }
@media (min-width: 576px) {
  .hws-row__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
  .hws-row__status { text-align: right; flex: 0 0 auto; }
}
.hws-row .hws-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 2px; }
.hws-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--mint);
  color: var(--teal-deep);
  font-family: var(--jm-font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hws-result-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-deep);
}