/* Same paper palette and Nunito face as the modelling slides. */
@font-face {
  font-family: "Nunito";
  src: url("fonts/Nunito.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #f2e7d3;
  --ink: #4a4640;
  --muted: #6c6458;
  --rule: rgb(74 70 64 / 22%);
  --body-color: var(--ink);
  --body-bg-color: var(--paper);
  background: var(--paper);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  max-width: 76rem;
  min-height: 100svh;
  margin: 0 auto;
  padding: 2.5rem clamp(.75rem, 2vw, 1.5rem) 1rem;
  color: var(--ink);
  background: var(--paper);
  font-family: "Nunito", sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.course-header { margin-bottom: 1.25rem; text-align: center; }
.course-code { margin: 0 0 .35rem; color: var(--muted); }
h1 { margin: 0; font-size: clamp(1.65rem, 5vw, 2.25rem); line-height: 1.2; font-weight: 400; text-wrap: balance; }
h2 { margin: 0 0 .65rem; font-size: 1.65rem; font-weight: 400; }
p { margin: 0 0 1rem; }
input, button { font: inherit; }

.login-panel {
  max-width: 27rem;
  margin: 0 auto;
  padding: clamp(1.4rem, 5vw, 2.2rem);
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: rgb(255 255 255 / 18%);
}
#instructions, #code-recipient { color: var(--muted); }
#code-recipient { overflow-wrap: anywhere; }
label { display: block; margin-bottom: .45rem; }
input {
  display: block;
  width: 100%;
  min-height: 3rem;
  margin: 0 0 1rem;
  padding: .55rem .75rem;
  border: 1px solid rgb(74 70 64 / 35%);
  border-radius: 4px;
  color: var(--body-color);
  background: rgb(255 255 255 / 30%);
}
input:hover { border-color: var(--ink); }
button {
  width: 100%;
  min-height: 3rem;
  padding: .55rem 1rem;
  border: 1px solid var(--body-color);
  border-radius: 4px;
  color: var(--body-bg-color);
  background: var(--body-color);
  cursor: pointer;
}
button:hover { background: #302d28; border-color: #302d28; }
button:disabled { opacity: .5; cursor: wait; }
:is(input, button, a):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
button:focus-visible { outline-color: var(--body-color); }
.secondary-button {
  width: auto;
  min-height: 2.5rem;
  margin: .7rem auto 0;
  padding: .3rem .4rem;
  border: 0;
  color: var(--body-color);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.secondary-button:hover { color: #302d28; background: transparent; }
#code {
  min-height: 4.2rem;
  padding: .65rem .3rem;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: clamp(1.6rem, 7vw, 2rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
  text-align: center;
}
#code::placeholder { color: rgb(74 70 64 / 35%); opacity: 1; }
.code-hint { margin: -.3rem 0 1.3rem; text-align: center; font-size: 1rem; color: var(--muted); }
#message { margin: 1.2rem 0 0; white-space: pre-wrap; }
#message:empty { display: none; }

/* The signed-in course is the home page; there is no welcome screen. */
.account-actions { position: absolute; top: .35rem; right: clamp(.75rem, 2vw, 1.5rem); }
.sign-out {
  width: auto;
  min-height: 2.5rem;
  padding: .3rem .2rem;
  border: 0;
  border-radius: 0;
  color: var(--body-color);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.sign-out:hover { color: #302d28; background: transparent; }
a, a:visited { color: inherit; text-underline-offset: .2em; }
a:hover { color: #302d28; }
.course-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.course-blocks { display: grid; gap: .75rem; }
.week-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .5rem 0 .5rem;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 600;
}
.week-divider::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.course-week:first-child .week-divider { margin-top: 0; }
.course-block.is-unpublished { opacity: .5; }
.course-block { padding: 1rem 1.15rem; border: 1px solid var(--rule); border-radius: 4px; background: rgb(255 255 255 / 12%); }
.course-item + .course-item { margin-top: .85rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.course-item h2, .course-item h3 { margin: 0; line-height: 1.4; font-weight: 500; }
.course-item.session h3 { font-size: 1.3rem; }
.course-item h3 { font-size: 1.125rem; }
.session-details { margin: .4rem 0 0; color: var(--muted); font-size: .95rem; }
.resource-links { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .5rem; font-size: 1rem; }
@media (max-width: 480px) { .course-block { padding: .85rem; } }

.back-link { display: inline-block; margin-bottom: 1.5rem; }
#quiz-title { margin-bottom: 1.3rem; font-size: 1.8rem; }
/* The marker and full-size footprint are independent of the floating player. */
.quiz-workspace {
  /* Fit the player plus pin control on short screens as well as wide ones. */
  --video-max-width: min(64rem, calc((100svh - 2.75rem) * 16 / 9));
  --video-floating-width: min(100%, calc((30vh - 1.75rem) * 16 / 9));
  --video-floating-width: min(100%, calc((30dvh - 1.75rem) * 16 / 9));
}
.quiz-video-marker { height: 1px; margin-bottom: -1px; }
.quiz-video-dock { position: relative; height: 0; }
/* Separate from the sticky box so the full-size footprint cannot push the
   floating player off-screen near the last question on a short viewport. */
.quiz-video-placeholder {
  width: min(100%, var(--video-max-width));
  padding-bottom: 1.75rem;
  margin: 0 auto 1rem;
}
.quiz-video-placeholder::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.quiz-video-dock:has(#quiz-video-toggle:checked) {
  position: sticky;
  top: 0;
  z-index: 10;
  pointer-events: none;
}
.quiz-video-panel {
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(50%);
  width: 100%;
  max-width: var(--video-max-width);
  pointer-events: auto;
  transition: width .3s ease, right .3s ease, transform .3s ease;
}
.quiz-video-dock[data-scrolled="true"]:has(#quiz-video-toggle:checked) .quiz-video-panel {
  right: 0;
  transform: translateX(0);
  width: var(--video-floating-width);
}
.quiz-video-controls { height: 1.75rem; display: flex; justify-content: flex-end; }
.quiz-video-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: auto;
  margin: 0;
  height: 1.75rem;
  padding: .1rem .55rem;
  border: 0;
  border-radius: .4rem;
  background: #e6d9c2;
  color: var(--body-color);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.quiz-video-toggle:hover { color: #302d28; background: #dccbb0; }
.quiz-video-toggle:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
.quiz-video-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
#quiz-video-toggle:checked ~ .quiz-video-pin-label,
#quiz-video-toggle:not(:checked) ~ .quiz-video-unpin-label { display: none; }
#quiz-video-toggle:not(:checked) ~ svg { transform: rotate(40deg); opacity: .6; }
@media (prefers-reduced-motion: reduce) { .quiz-video-panel { transition: none; } }

/* Reduce vertical framing around the quiz, especially on short screens. */
body:has(#quiz-content:not([hidden])) {
  padding-block: 1.75rem .75rem;
}
body:has(#quiz-content:not([hidden])) .course-header { margin-bottom: .75rem; }
#quiz-content .back-link { margin-bottom: .65rem; }
#quiz-content #quiz-title { margin-bottom: .85rem; }

/* Keep question wrapping constant; the video uses its normal width until scrolled. */
@media (min-width: 64rem) {
  body:has(#quiz-content:not([hidden])) { max-width: 112rem; }
  .quiz-workspace {
    --video-rail-width: min(55%, 54rem, var(--video-max-width));
    --video-floating-width: var(--video-rail-width);
  }
  .quiz-main { width: calc(100% - var(--video-rail-width) - 1rem); }
}
.quiz-video { aspect-ratio: 16 / 9; width: 100%; background: #111; }
.quiz-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.quiz-instructions { color: var(--muted); }
.quiz-question { margin: 0 0 .75rem; padding: 1rem; border: 1px solid var(--rule); border-radius: 4px; background: rgb(255 255 255 / 12%); }
.quiz-statement { margin: 0 0 1rem; overflow-wrap: anywhere; }
.confidence-labels { display: flex; justify-content: space-between; gap: 1rem; font-size: 1rem; }
input.confidence-slider { width: 100%; min-height: 2.5rem; margin: .3rem 0; padding: 0; accent-color: var(--ink); cursor: pointer; }
.confidence-value { display: block; margin: 0; text-align: center; font-size: 1.05rem; }
.quiz-question.needs-answer { border-color: #916c36; }
.quiz-feedback { border-top: 1px solid var(--rule); margin-top: 1.3rem; padding-top: 1.2rem; }
.quiz-feedback p { margin-bottom: .8rem; }
.quiz-feedback p:last-child { margin-bottom: 0; }
.quiz-passages { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; margin-top: .8rem; }
.question-submit { display: block; width: auto; min-width: 10rem; margin: 1rem auto 0; }
.question-status { margin: .7rem 0 0; text-align: center; }
.question-status:empty { display: none; }
#quiz-status { margin: 1.5rem 0; text-align: center; }
@media (max-width: 480px) { .quiz-question { padding: 1rem; } }
.confidence-labels { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.confidence-labels > :last-child { text-align: right; }


/* Reserve the sentence and changing word widths, including at the midpoint. */
.confidence-value { display: grid; justify-items: center; }
.confidence-sentence, .confidence-unsure { grid-area: 1 / 1; }
.confidence-percent { display: inline-block; width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.confidence-choice { display: inline-block; width: 5em; text-align: left; }
.confidence-value[data-undecided="true"] .confidence-sentence,
.confidence-value[data-undecided="false"] .confidence-unsure { visibility: hidden; }

.question-status.has-feedback {
  margin-top: 1.1rem;
  padding: .8rem 1rem;
  border-left: 2px solid var(--feedback-line);
  background: var(--feedback-bg);
  text-align: left;
}
.feedback-arrived .question-status { animation: feedback-notice .85s ease-out both; }
.feedback-arrived .quiz-feedback { animation: feedback-reveal .3s ease-out .12s both; }
@keyframes feedback-notice {
  from { opacity: 0; transform: translateY(6px); background: var(--feedback-flash); }
  30% { opacity: 1; transform: translateY(0); }
  to { opacity: 1; transform: translateY(0); background: var(--feedback-bg); }
}
@keyframes feedback-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-arrived .question-status, .feedback-arrived .quiz-feedback { animation: none; }
}

.question-status[data-outcome="right"] {
  --feedback-bg: rgb(72 167 108 / 16%);
  --feedback-flash: rgb(72 167 108 / 32%);
  --feedback-line: #2d6b43;
}
.question-status[data-outcome="wrong"] {
  --feedback-bg: rgb(207 89 89 / 16%);
  --feedback-flash: rgb(207 89 89 / 32%);
  --feedback-line: #a23f3f;
}

/* Decorative footer shared by sign-in, course overview and quiz pages. */
.course-footer { width: 75%; max-width: 48rem; margin: 1.5rem auto 0; flex-shrink: 0; }
.course-footer img { display: block; width: 100%; height: auto; }

body { display: flex; flex-direction: column; padding-bottom: 0; }
body:has(#quiz-content:not([hidden])) { padding-bottom: 0; }
main { flex: 1; min-width: 0; }

/* Session status is separate from the sign-in form until authentication is known. */
.session-status { text-align: center; color: var(--muted); padding-block: 1rem; }
.session-status button { width: auto; }