@import url('styles.css');

.activity-page { width:min(100% - 2rem, 760px); margin-inline:auto; padding:2rem 0 4rem; }
.back { color:var(--muted); text-decoration:none; }.back:hover { color:var(--ink); }
.activity-header { display:flex; gap:1rem; align-items:center; padding:2rem 0 1.25rem; border-bottom:1px solid var(--line); }.activity-header > span { display:grid; place-items:center; width:3rem; height:3rem; border-radius:.35rem; background:var(--tag); font-size:1.45rem; }.activity-header h1 { margin:0; font-size:clamp(1.9rem,7vw,3rem); }.activity-header p { margin:.25rem 0 0; color:var(--muted); }
.instructions { padding-top:1.25rem; }.instructions h2 { margin:2.2rem 0 .65rem; font-size:1.3rem; letter-spacing:-.025em; }.instructions h3 { margin:1.5rem 0 .5rem; font-size:1rem; }.instructions p,.instructions li { max-width:68ch; }.instructions ul,.instructions ol { padding-left:1.2rem; }.instructions li { margin:.3rem 0; }.instructions aside { margin:1rem 0; padding:.8rem 1rem; border-left:3px solid var(--accent); background:var(--surface); color:var(--muted); }.instructions code { padding:.08rem .25rem; border-radius:.2rem; background:var(--tag); font-family:ui-monospace, monospace; font-size:.9em; }.instructions a { color:var(--accent); }.quiet { color:var(--muted); }
.instructions .table-scroll { margin:1rem 0; overflow-x:auto; }.instructions table { width:100%; border-collapse:collapse; font-size:.95rem; }.instructions th,.instructions td { padding:.5rem .6rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }.instructions th { border-bottom:2px solid var(--line); color:var(--muted); font-size:.8rem; font-weight:650; letter-spacing:.03em; text-transform:uppercase; }.instructions tr:last-child td { border-bottom:0; }.instructions li.task { list-style:none; margin-left:-1.2rem; }
.primary-link,.canvas-link { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem 0; border-radius:0; color:var(--accent); font-weight:650; text-decoration:none; }.primary-link:hover,.canvas-link:hover { text-decoration:underline; }.completion { margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--line); }.completion h2 { margin:0; font-size:1.1rem; }.completion p { color:var(--muted); }
.submission-steps { margin:.85rem 0 1rem; padding-left:1.3rem; }.submission-steps li { margin:.4rem 0; max-width:52ch; }
@media print { .back { display:none; }.instructions .table-scroll,.instructions tr { break-inside:avoid; }.completion { break-inside:avoid; margin-top:1.75rem; }.activity-page { width:auto; padding:0; }.activity-header { padding-top:0; } }
.worksheet-cue { display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; margin:1.25rem 0 0; padding:.75rem .9rem; border:1px solid var(--line); border-radius:.4rem; background:var(--surface); font-size:.85rem; }.worksheet-cue .quiet { flex:1 1 14rem; }.worksheet-cta { display:inline-flex; gap:.4rem; align-items:center; flex:0 0 auto; padding:.5rem .9rem; border-radius:.35rem; background:var(--accent); color:#fff; font-size:.9rem; font-weight:650; text-decoration:none; }.worksheet-cta:hover { opacity:.85; }.worksheet-cta:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media print { .worksheet-cue { display:none; } }
.instructions figure { margin:1.25rem 0; }.instructions img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:.4rem; background:var(--tag); }.instructions figcaption { margin-top:.45rem; color:var(--muted); font-size:.85rem; max-width:68ch; }
/* Photos show small on the page and open full size on click (image-zoom.js). */
.instructions figure img { width:auto; max-width:100%; max-height:70vh; cursor:zoom-in; }.instructions figure img:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media (min-width: 700px) { .instructions figure img { max-height:340px; } }
.image-zoom { max-width:96vw; max-height:96vh; padding:0; border:0; border-radius:.5rem; background:var(--surface); color:var(--ink); cursor:zoom-out; }.image-zoom::backdrop { background:rgb(0 0 0 / .8); }
.image-zoom figure { display:flex; flex-direction:column; max-height:96vh; margin:0; }.image-zoom img { display:block; flex:1 1 auto; min-height:0; max-width:96vw; width:auto; height:auto; margin:auto; object-fit:contain; }.image-zoom figcaption { flex:none; max-width:68ch; padding:.6rem .9rem .8rem; color:var(--muted); font-size:.9rem; }
.image-zoom-close { position:absolute; top:.5rem; right:.5rem; width:2.4rem; height:2.4rem; border:0; border-radius:999px; background:rgb(0 0 0 / .6); color:#fff; font-size:1.1rem; cursor:pointer; }
@media print { .instructions figure { display:none; } }
.activity-settings { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0 !important; }
.step-id { display:inline-block; min-width:2.2em; color:var(--muted); font:600 .8em/1 ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.contributors { margin:2rem 0 0; color:var(--muted); font-size:.9rem; }.contributors a { color:var(--accent); }
.instructions code { overflow-wrap:anywhere; }
.instructions h2 .step-id, .instructions h3 .step-id { min-width:0; margin-right:.4em; font-size:.7em; vertical-align:.1em; }
.instructions.numbered ul, .instructions.numbered ol { padding-left:0; list-style:none; }.instructions.numbered li.task { margin-left:0; }
/* Portals (> 🌀 in the Markdown): a collapsed sneak peek of a later lecture. Instructor notes
   (> 🧑‍🏫) only ever appear in instructor view, and look unmistakably different when they do. */
.instructions details.portal { margin:1rem 0; border:1px dashed #7b61ff; border-radius:.6rem; background:#f4f1ff; }
.instructions details.portal summary { padding:.6rem .9rem; font-weight:650; cursor:pointer; }
.instructions details.portal p { margin:0; padding:0 .9rem .8rem; }
.instructions aside.instructor-note { border-left-color:#d49b00; background:#fff4d6; color:#5c4300; }
@media (prefers-color-scheme: dark) {
  .instructions details.portal { border-color:#a594ff; background:#1d1838; }
  .instructions aside.instructor-note { background:#3a2f12; color:#ffe29a; }
}
/* ==term== in a lecture: a follow-along blank. Highlighted here; a blank on the printed notes. */
.instructions mark.key-term { padding:0 .15em; border-radius:.2em; background:#fff1a8; color:inherit; font-weight:600; }
@media (prefers-color-scheme: dark) { .instructions mark.key-term { background:#5a4a00; } }
/* ``` code blocks: shown exactly as written. */
.instructions pre.code-block { margin:1rem 0; padding:.8rem 1rem; overflow-x:auto; border-radius:.6rem; background:var(--tag); font:13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space:pre-wrap; }
/* The Repo Improvement form at the end of every activity and checklist: a link, and a QR code for
   when the page is up on a laptop and the form should open on a phone. */
.repo-form-row { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; justify-content:space-between; }
.repo-form-row > div:first-child { flex:1 1 16rem; }
.repo-form .ws-qr { display:flex; flex-direction:column; gap:.25rem; width:6.5rem; text-align:center; }
.repo-form .ws-qr svg { display:block; width:100%; height:auto; background:#fff; border-radius:.3rem; }
.repo-form .ws-qr-cue { font-size:.6rem; font-weight:700; text-transform:uppercase; }
.repo-form .ws-qr-url { color:var(--muted); font-size:.55rem; overflow-wrap:anywhere; }