@import url('../activity.css');
@import url('deck.css');
@import url('presenter.css');

.lecture-row { display:flex; align-items:center; gap:.75rem; min-height:4rem; padding:.75rem .25rem; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
a.lecture-row:hover { background:var(--tag); }
a.lecture-row:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.lecture-row .card-copy small:last-child { margin-top:.15rem; }
.lecture-row-quiet { color:var(--muted); }
.lecture-row .arrow { color:var(--muted); }
.section-title small { font-size:.8rem; font-weight:400; }
.lecture-list { padding:0 0 3rem; }
.lecture-list .section-title { margin-top:2rem; }
.lecture-nav { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.lecture-nav-link { display:grid; gap:.15rem; color:var(--accent); font-weight:650; text-decoration:none; }
.lecture-nav-link:last-child { text-align:right; }
.lecture-nav-link span { color:var(--muted); font-size:.85rem; font-weight:400; }
.lecture-nav-link:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
body[data-lecture-id] .activity-header h1 { font-size:clamp(1.45rem,5.5vw,2.25rem); line-height:1.15; }
.lecture-badge { display:inline-block; margin:0 .5rem .2rem 0; padding:.1rem .45rem; border-radius:.25rem; background:var(--accent); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; vertical-align:.08em; }
.activity-header .lecture-badge { margin-bottom:.4rem; }
.lecture-extras { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0 0; }
.lecture-extras a { padding:.45rem .8rem; border-radius:.5rem; background:var(--tag); color:var(--ink); font-weight:600; text-decoration:none; }
.lecture-extras a:hover { filter:brightness(.97); }
.instructor-banner { margin:1rem 0 0; padding:.6rem .9rem; border-radius:.5rem; background:#fff4d6; color:#5c4300; font-size:.9rem; }
.instructor-banner button { margin-left:.4rem; font:inherit; font-weight:650; color:inherit; background:none; border:0; text-decoration:underline; cursor:pointer; }
@media (prefers-color-scheme: dark) { .instructor-banner { background:#3a2f12; color:#ffe29a; } }
.draft-banner { margin:1rem 0 0; padding:.6rem .9rem; border-radius:.5rem; border:1px dashed var(--line); background:var(--tag); font-size:.9rem; }
/* Later lectures: closed by default; opening slides the list down. */
.lecture-later { margin-top:1.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lecture-later > summary { display:flex; align-items:baseline; gap:.5rem; padding:.8rem .25rem; cursor:pointer; list-style:none; font-weight:700; }
.lecture-later > summary::-webkit-details-marker { display:none; }
.lecture-later > summary::before { content:'▸'; display:inline-block; color:var(--muted); transition:transform .2s ease; }
.lecture-later[open] > summary::before { transform:rotate(90deg); }
.lecture-later > summary small { color:var(--muted); font-weight:400; }
.lecture-later > summary:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.lecture-later-body > .quiet { margin:0 .25rem .5rem; font-size:.9rem; }
.lecture-later[open] .lecture-later-body { animation:lecture-slide-down .28s ease-out; }
@keyframes lecture-slide-down { from { opacity:0; transform:translateY(-.6rem); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .lecture-later[open] .lecture-later-body { animation:none; } .lecture-later > summary::before { transition:none; } }
/* The way in is deliberately quiet: a π at the foot of the page, the way old films hid an easter egg. */
.instructor-switch { margin:2.5rem 0 0; text-align:right; }
.instructor-switch button { padding:.2rem .4rem; border:0; background:none; color:var(--line); font:inherit; font-size:.8rem; cursor:pointer; }
.instructor-switch button:hover, .instructor-switch button:focus-visible { color:var(--muted); }
/* Online fill-in (lectures/fill/?id=…) */
.fill-list { list-style:none; margin:1.25rem 0; padding:0; display:grid; gap:1rem; }
.fill-card { padding:1rem; border:1px solid var(--line); border-radius:.75rem; background:var(--surface); }
.fill-card.done { border-color:#34c759; }
.fill-where { display:block; margin-bottom:.35rem; color:var(--muted); font-size:.8rem; font-style:normal; }
.fill-prompt { margin:0 0 .75rem; font-weight:600; }
.fill-prompt .q-number { margin-right:.35rem; color:var(--accent); }
.fill-prompt code, .fill-option code, .fill-feedback code { padding:.05rem .25rem; border-radius:.2rem; background:var(--tag); font-size:.9em; }
.fill-blank { display:inline-block; width:4.5em; border-bottom:2px solid var(--muted); vertical-align:-.15em; }
.fill-options { display:grid; gap:.5rem; }
.fill-option { padding:.75rem .9rem; border:1px solid var(--line); border-radius:.6rem; background:var(--paper); color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.fill-option:hover:not(:disabled) { border-color:var(--accent); }
.fill-option.wrong { opacity:.55; text-decoration:line-through; }
.fill-option.right { border-color:#34c759; background:rgb(52 199 89 / .12); }
.fill-feedback { margin:.6rem 0 0; }
.fill-feedback.wrong { color:#d70015; }
.fill-yours { margin:0; color:var(--muted); }
.fill-text { box-sizing:border-box; width:100%; padding:.6rem .7rem; border:1px solid var(--line); border-radius:.5rem; background:var(--paper); color:var(--ink); font:inherit; }
.fill-check, .fill-copy, .fill-reset { margin-top:.6rem; padding:.55rem .9rem; border:0; border-radius:.5rem; background:var(--accent); color:#fff; font:inherit; font-weight:650; cursor:pointer; }
.fill-reset { background:var(--tag); color:var(--ink); }
.fill-done { margin:1.5rem 0; padding:1rem 1.1rem; border-radius:.75rem; background:var(--tag); }
.fill-code { font-family:ui-monospace, monospace; font-size:1.1em; letter-spacing:.03em; }
.fill-verify { margin-top:2rem; }
.fill-verify-input { padding:.45rem .6rem; border:1px solid var(--line); border-radius:.4rem; font:inherit; }
.instructor-banner a { margin-left:.4rem; color:inherit; font-weight:650; }
/* Follow-along blanks, online */
.fill-line { margin:0 0 .6rem; line-height:2; }
.fill-input { padding:.2rem .4rem; border:0; border-bottom:2px solid var(--accent); border-radius:.25rem .25rem 0 0; background:var(--tag); color:var(--ink); font:inherit; font-weight:600; max-width:100%; }
.fill-input.missed { border-bottom-color:#d70015; }
.fill-term { padding:.05rem .3rem; border-radius:.25rem; background:rgb(52 199 89 / .18); color:inherit; font-weight:650; }
.fill-term.revealed { background:rgb(255 159 10 / .22); }
.fill-line code { padding:.05rem .25rem; border-radius:.2rem; background:var(--tag); font-size:.9em; }
/* Online refresher */
.fill-point { margin:.5rem 0 0; padding:.5rem .7rem; border-left:3px solid #34c759; border-radius:.3rem; background:var(--tag); }
.fill-feedback.shown { color:#b25000; }
.fill-feedback-label { display:block; margin-bottom:.35rem; font-weight:600; }
.refresher-warning { margin:.75rem 0; padding:.7rem .9rem; border-radius:.6rem; background:#fff4d6; color:#5c4300; }
.refresher-warning p { margin:.25rem 0; }
.refresher-warning button { margin:.25rem .4rem 0 0; padding:.45rem .8rem; border:0; border-radius:.45rem; background:#fff; color:#5c4300; font:inherit; font-weight:650; cursor:pointer; }
@media (prefers-color-scheme: dark) { .refresher-warning { background:#3a2f12; color:#ffe29a; } .refresher-warning button { background:#5a4a1a; color:#ffe29a; } }
.refresher-receipt { max-height:16rem; overflow:auto; padding:.7rem; border-radius:.5rem; background:var(--paper); border:1px solid var(--line); font:12px/1.4 ui-monospace, Menlo, monospace; white-space:pre-wrap; }
.lecture-extras .extra-locked { padding:.45rem .8rem; border-radius:.5rem; background:var(--tag); color:var(--muted); font-weight:600; opacity:.6; cursor:not-allowed; }
/* 👀 Peek: the notes, filled in. A sheet over the page on a phone; a side panel on a wide screen. */
.fill-peek-row { margin:.6rem 0 0; }
.fill-peek { padding:.4rem .75rem; border:1px solid var(--line); border-radius:.5rem; background:var(--paper); color:var(--ink); font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; }
.fill-peek:hover:not(:disabled) { border-color:var(--accent); }
.peek[hidden] { display:none; }
.peek-backdrop { position:fixed; inset:0; z-index:40; background:rgb(0 0 0 / .35); }
.peek-sheet { position:fixed; inset:12vh 0 0; z-index:41; display:flex; flex-direction:column; border-radius:.9rem .9rem 0 0; background:var(--surface); color:var(--ink); box-shadow:0 -6px 30px rgb(0 0 0 / .25); }
.peek-head { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-bottom:1px solid var(--line); }
.peek-head strong { flex:1; min-width:0; overflow:hidden; font-size:.95rem; text-overflow:ellipsis; white-space:nowrap; }
.peek-close { flex:none; width:2.25rem; height:2.25rem; border:0; border-radius:50%; background:var(--tag); color:var(--ink); font:inherit; font-size:1rem; cursor:pointer; }
.peek-body { flex:1; overflow-y:auto; padding:.25rem 1rem 40vh; font-size:.95rem; line-height:1.45; overscroll-behavior:contain; }
.peek-body section { margin:0 -.6rem; padding:.1rem .6rem .3rem; border-left:4px solid transparent; border-radius:.3rem; }
.peek-body section.is-current { border-left-color:#ffd60a; background:rgb(255 214 10 / .16); }
.peek-body h2 { margin:1rem 0 .3rem; padding-bottom:.15rem; border-bottom:1px solid var(--line); font-size:1.05rem; }
.peek-body h3 { margin:.8rem 0 .2rem; font-size:1rem; }
.peek-body p, .peek-body li { margin:.25rem 0; }
.peek-body ul, .peek-body ol { margin:.2rem 0; padding-left:1.2rem; }
.peek-body img { max-width:100%; height:auto; }
.peek-body table { width:100%; border-collapse:collapse; font-size:.85em; }
.peek-body th, .peek-body td { padding:.2rem .35rem; border:1px solid var(--line); text-align:left; vertical-align:top; }
.peek-body blockquote, .peek-body aside { margin:.4rem 0; padding:.3rem .6rem; border-left:3px solid var(--line); color:var(--muted); font-size:.9em; }
.peek-body code { padding:0 .2em; border-radius:.2em; background:var(--tag); font-size:.88em; }
.peek-body pre { padding:.4rem .6rem; border:1px solid var(--line); border-radius:.3rem; font:12px/1.35 ui-monospace, Menlo, monospace; white-space:pre-wrap; }
.peek-body mark.key-term { padding:0 .12em; border-radius:.2em; background:#ffe066; color:#000; font-weight:700; }
body.peeking { overflow:hidden; }
@media (min-width: 900px) {
  .peek-backdrop { display:none; }
  .peek-sheet { inset:0 0 0 auto; width:min(42vw, 30rem); border-radius:0; border-left:1px solid var(--line); box-shadow:none; }
  body.peeking { overflow:auto; }
  body.peeking .activity-page { margin-right:calc(min(42vw, 30rem) + 1.5rem); }
}