/* ══════════════════════════════════════════════════════════════════
   notes.css – student slide notes panel and the printable slide handout.
   Shared by every HUMB1001 lecture (master copy: files/notes.css). Pairs with notes.js.
   ══════════════════════════════════════════════════════════════════ */

/* ── Notes button (beside Transcript) ── */
#notes-btn { position:fixed; bottom:14px; left:244px; z-index:9999; background:#fff; color:var(--green, #1B4332); border:1.5px solid var(--green, #1B4332); border-radius:6px; font-family:var(--sans, 'DM Sans', sans-serif); font-size:11px; font-weight:500; padding:6px 12px; cursor:pointer; opacity:.9; }
#notes-btn.on { background:var(--green, #1B4332); color:#fff; }
#notes-btn.has-note::after { content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gold, #C9972B); margin-left:6px; vertical-align:1px; }

/* ── Notes panel (right-hand side; the slide shrinks to make room on wide screens) ── */
#notes-panel { position:fixed; top:104px; right:12px; bottom:56px; width:min(340px, calc(100vw - 24px)); z-index:9999; display:none; flex-direction:column; gap:8px; background:#fff; border:1px solid #DADAD2; border-top:4px solid var(--gold, #C9972B); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,.18); padding:14px 16px; font-family:var(--sans, 'DM Sans', sans-serif); color:#1A1A1A; }
#notes-panel.show { display:flex; }
#notes-panel .np-head { display:flex; justify-content:space-between; align-items:center; }
#notes-panel .np-title { margin:0; font-size:15px; font-weight:700; color:var(--green, #1B4332); }
#notes-panel .np-close { background:none; border:0; font-size:22px; line-height:1; color:#6A6A64; cursor:pointer; padding:0 4px; }
#notes-panel .np-slide { margin:0; font-size:12px; color:#6A6A64; line-height:1.35; }
#notes-panel textarea { flex:1; min-height:120px; resize:none; border:1px solid #C9C9C2; border-radius:6px; padding:10px; font-family:inherit; font-size:14px; line-height:1.5; color:#1A1A1A; }
#notes-panel textarea:focus { outline:2px solid var(--gold, #C9972B); outline-offset:1px; }
#notes-panel .np-status { margin:0; font-size:11px; color:#6A6A64; }
#notes-panel .np-actions { display:flex; flex-direction:column; gap:6px; }
#notes-panel .np-actions button { background:var(--green, #1B4332); color:#fff; border:0; border-radius:6px; padding:8px 10px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; text-align:left; }
#notes-panel .np-actions .np-download { background:#fff; color:var(--green, #1B4332); border:1.5px solid var(--green, #1B4332); }
#notes-panel .np-help { margin:0; font-size:10.5px; line-height:1.4; color:#6A6A64; }
@media (min-width: 900px) { body.notes-open .reveal { width:calc(100% - 364px) !important; } }

/* ── Title slide: print button ── */
.handout-btn { align-self:flex-start; width:auto; display:inline-block; margin-top:16px; background:transparent; color:#fff; border:1.5px solid var(--gold, #C9972B); border-radius:6px; padding:7px 14px; font-family:var(--sans, 'DM Sans', sans-serif); font-size:12px; font-weight:600; cursor:pointer; }
.handout-btn:hover { background:rgba(201,151,43,.18); }

/* ── Notes page: the student's slide notes ── */
.notes-slide-notes { margin-top:10px; max-height:150px; overflow:auto; }
.notes-slide-notes dl { margin:0; }
.notes-slide-notes dt { font-weight:600; font-size:12px; margin-top:6px; color:var(--green, #1B4332); }
.notes-slide-notes dd { margin:2px 0 0; font-size:12px; line-height:1.45; white-space:pre-wrap; }

/* ── Printing the slides: built off-screen while printing, never shown on screen ──
   Each page is one slide at its real size, 1280×720 CSS px (338.67×190.5 mm). Nothing is scaled
   here: Chrome uses the named page size; Safari ignores it and shrinks the page to fit the paper
   itself (it mis-prints slides scaled with transform or zoom). */
#handout { position:absolute; left:-20000px; top:0; width:1280px; }
.ho-page { page:slide; position:relative; width:1280px; height:720px; overflow:hidden; background:#fff; font-family:var(--sans, 'DM Sans', sans-serif); color:#1A1A1A; }
.ho-num { position:absolute; right:14px; bottom:10px; font-size:12px; color:#6A6A64; background:rgba(255,255,255,.85); padding:2px 8px; border-radius:4px; }
.ho-reveal { position:absolute; left:0; top:0; width:1280px; height:720px; }
.ho-reveal .slides { position:relative !important; width:1280px !important; height:720px !important; inset:auto !important; margin:0 !important; transform:none !important; zoom:1 !important; pointer-events:none; }
.ho-reveal .slides > section { display:block !important; position:absolute !important; left:0 !important; top:0 !important; width:1280px !important; height:720px !important; opacity:1 !important; visibility:visible !important; transform:none !important; }
.ho-reveal .fragment { opacity:1 !important; visibility:visible !important; transform:none !important; }
/* controls and "try again" bits that make no sense on paper */
.ho-reveal .print-btn, .ho-reveal .handout-btn, .ho-reveal .drag-btn-row, .ho-reveal .mcq-continue, .ho-reveal .confidence-row, .ho-reveal .conf-prompt,
.ho-reveal .drag-cat-pool-label, .ho-reveal .seq-hint, .ho-reveal .seq-btns, .ho-reveal .seq-move, .ho-reveal .reflect-save-row, .ho-reveal .explore-count,
.ho-reveal .ping, .ho-reveal .shortcut-legend, .ho-reveal [id$="-count"] { display:none !important; }
.ho-reveal .ho-gallery-all .gallery-panel { opacity:1 !important; }
.ho-reveal .sort-pool.ho-empty { display:none !important; }
.ho-reveal .confidence-mcq-options { opacity:1 !important; }
/* answers */
.ho-reveal .mcq-opt.ho-correct { border-color:#2D6A4F !important; background:#EBF5EE !important; font-weight:600; }
.ho-reveal .mcq-opt.ho-correct::after { content:"✓ Answer"; margin-left:auto; padding-left:12px; color:#2D6A4F; font-weight:700; white-space:nowrap; }
.ho-reveal .sort-chip.ho-placed { border-color:#2D6A4F !important; }
.ho-reveal .gradedloc-hotspot.ho-answer .hotspot-badge { fill:#C9972B !important; stroke:#1B4332 !important; stroke-width:5px; }
.ho-reveal .gradedloc-hotspot.ho-answer .hotspot-hit { fill:rgba(201,151,43,.35) !important; stroke:#C9972B !important; stroke-width:4px; }
.ho-reveal .ho-typed { white-space:pre-wrap; border:1px solid #C9C9C2; border-radius:6px; padding:10px 12px; min-height:60px; font-size:15px; line-height:1.5; background:#fff; }
/* explorer key page */
.ho-keypage { padding:48px 56px; box-sizing:border-box; }
.ho-keypage h2 { margin:0 0 18px; font-family:var(--serif, 'Source Serif 4', serif); font-size:28px; color:var(--green, #1B4332); }
.ho-key { width:100%; border-collapse:collapse; font-size:15px; line-height:1.35; }
.ho-key th { text-align:left; font-weight:700; color:var(--green, #1B4332); border-bottom:2px solid #C9C9C2; padding:5px 8px; }
.ho-key td { border-bottom:1px solid #E4E4DE; padding:5px 8px; vertical-align:top; }
.ho-key td.ho-key-name { font-weight:600; white-space:nowrap; }

@media print {
  @page slide { size:1280px 720px; margin:0; }
  html.print-pdf, html.print-pdf body.printing-handout { width:auto !important; height:auto !important; overflow:visible !important; }
  body.printing-handout > *:not(#handout) { display:none !important; }
  body.printing-handout { background:#fff !important; margin:0 !important; }
  body.printing-handout #handout { position:static; left:auto; }
  body.printing-handout .ho-page { break-after:page; page-break-after:always; break-inside:avoid; page-break-inside:avoid; }
  body.printing-handout .ho-page:last-child { break-after:auto; page-break-after:auto; }
  body.printing-handout #handout, body.printing-handout #handout * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .notes-slide-notes { max-height:none; overflow:visible; }
  #notes-btn, #notes-panel { display:none !important; }
}