/* The policy manual. Long-form reading, on a phone as often as a laptop. */
.manual { max-width: 46rem; }
.manual h2 {
  margin-top: 2rem; padding-top: 1rem;
  border-top: 1px solid var(--border); font-size: 1.25rem;
}
.manual h3 { margin-top: 1.4rem; font-size: 1rem; }
.manual p, .manual li { line-height: 1.6; }
.manual ul, .manual ol { padding-left: 1.2rem; }
.manual li { margin-bottom: .4rem; }
.manual .lede { font-size: 1.02rem; color: var(--text-muted); }

.manual .toc {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem;
  padding: .8rem 1rem; margin: 1.2rem 0;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: .9rem;
}

/* Marks a policy the app itself changed, so a student reading an older copy of
   the manual can see which parts moved rather than following both. */
.manual .changed {
  background: var(--yellow-soft); color: var(--yellow-text);
  padding: .6rem .8rem; border-radius: var(--radius); font-size: .92rem;
}
.manual .note { color: var(--text-muted); font-size: .92rem; }
.manual .rules li { margin-bottom: .55rem; }

@media (max-width: 639px) {
  .manual .toc { flex-direction: column; gap: .5rem; }
}

/* === WALKTHROUGH VIDEOS =================================================
   Embedded rather than linked (Ben, 2026-09-01). Three deliberate choices:

   * youtube-nocookie.com, not youtube.com — the privacy-enhanced host does not
     set tracking cookies until a student actually presses play. This page is
     required reading for a course; it should not enrol anyone in ad profiling
     for opening it.
   * 🔴 referrerpolicy is strict-origin-when-cross-origin, NOT no-referrer.
     no-referrer shipped first and broke every player with "Error 153". YouTube
     uses the referrer to decide whether a domain may embed a video, so
     stripping it entirely leaves nothing to validate and the embed is refused.
     Measured, not guessed: the same embed URL returns playableInEmbed=true
     WITH a referrer and false WITHOUT. strict-origin sends only the origin —
     YouTube learns the site, never which page — which is the narrowest thing
     that works. A privacy setting that silently disables the feature is not a
     privacy win; it is an outage with good intentions.
   * loading="lazy" — six players would otherwise fetch the YouTube runtime on
     every page view, on a phone, on campus wifi, for videos most readers are
     not watching today.
   * aspect-ratio, not padding hacks — the frame stays 16:9 at every width
     without a wrapper whose height is a percentage of its own width.
   ======================================================================== */
.vid-grid {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin: 1rem 0 1.5rem;
}
.vid { margin: 0; }
.vid-frame {
  aspect-ratio: 16 / 9; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-secondary);
}
.vid-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vid figcaption { display: flex; flex-direction: column; gap: .15rem; padding-top: .5rem; }
.vid figcaption b { font-size: .95rem; }
.vid figcaption span { font-size: .86rem; color: var(--text-muted); line-height: 1.45; }
.vid figcaption a { font-size: .82rem; }

@media (max-width: 639px) {
  .vid-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}

/* === POLICY AGREEMENT + DOOR CODES ====================================== */
.agree-line {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: 1rem; border: 2px solid var(--mtm-blue); border-radius: var(--radius);
  background: var(--accent-soft); line-height: 1.55;
}
.agree-line input[type="checkbox"] {
  /* A deliberate action on a phone, not a 13px target next to a paragraph. */
  width: 24px; height: 24px; margin-top: .1rem; flex: 0 0 auto; cursor: pointer;
}
.agreed-stamp { color: var(--green-text); font-weight: 600; }

.codes { list-style: none; padding: 0; margin: .6rem 0 0; }
.codes li {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem .9rem; margin-bottom: .5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card);
}
.codes .where { font-size: .92rem; }
.codes .code {
  font-family: var(--mono); font-size: 1.35rem; letter-spacing: .06em;
  color: var(--mtm-blue);
}
@media (prefers-color-scheme: dark) {
  .codes .code { color: var(--accent); }
}
@media (max-width: 639px) {
  .codes li { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .codes .code { font-size: 1.5rem; }
}