/* Student notes pages and cheat sheets (scripts/build_site/notes.py).
   Loaded after chrome.css and site.css; bump NOTES_CSS_VERSION in render.py when this changes. */

.notes-layout { display: grid; gap: 2rem; padding-top: 2rem; padding-bottom: 3rem }
@media (min-width: 960px) {
  .notes-layout { grid-template-columns: 15rem minmax(0, 1fr); align-items: start }
  .notes-toc { position: sticky; top: 1rem }
}

.notes-toc { border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; background: var(--paper) }
.notes-toc-head { margin: 0 0 0.5rem; font-weight: 700; color: var(--ink) }
.notes-toc ol { margin: 0; padding-left: 1.2rem }
.notes-toc li { margin: 0.25rem 0; font-size: 0.95rem }
.notes-toc a { color: var(--ink-soft); text-decoration: none }
.notes-toc a:hover { color: var(--blue); text-decoration: underline }

.notes-body { max-width: 46rem; min-width: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.65 }
.notes-body h2 { margin: 2.2rem 0 0.7rem; color: var(--navy); scroll-margin-top: 1rem }
.notes-body h2:first-child { margin-top: 0 }
.notes-body h3 { margin: 1.5rem 0 0.5rem; color: var(--ink) }
.notes-body p, .notes-body li { color: var(--ink) }
.notes-body li { margin: 0.3rem 0 }
.notes-body :not(pre) > code, .cheatsheet :not(pre) > code {
  font-family: Consolas, "Cascadia Mono", Menlo, monospace; font-size: 0.92em;
  background: var(--surface); color: var(--navy); border-radius: 4px; padding: 0.05em 0.3em
}
.notes pre {
  background: #10223a; color: #e8f1fb; border-radius: 10px; padding: 0.9rem 1rem; margin: 0.8rem 0 1.2rem;
  overflow-x: auto; font-size: 0.92rem; line-height: 1.5
}
.notes pre code { font-family: Consolas, "Cascadia Mono", Menlo, monospace; white-space: pre }
.notes .table-wrap { overflow-x: auto; margin: 0.8rem 0 1.2rem }
.notes table { border-collapse: collapse; width: 100%; font-size: 0.97rem }
.notes th, .notes td { border: 1px solid var(--line); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top }
.notes thead th { background: var(--surface); color: var(--ink) }

.callout {
  border-left: 4px solid var(--gold); background: var(--gold-surface); color: var(--ink);
  border-radius: 0 8px 8px 0; padding: 0.7rem 0.9rem
}
.qa { border: 1px solid var(--line); border-radius: 10px; margin: 0.6rem 0; padding: 0.2rem 0.9rem; background: var(--paper) }
.qa summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; color: var(--ink) }
.qa[open] summary { border-bottom: 1px solid var(--line); margin-bottom: 0.5rem }

.notes-teach { margin: 2.5rem 0 1rem; padding: 1.2rem 1.3rem; border-radius: 12px; background: var(--surface); color: var(--ink) }
.notes-teach h2 { margin: 0 0 0.5rem; color: var(--navy); font-size: 1.25rem }
.notes-teach p { color: var(--ink) }
.notes-more p { font-size: 0.97rem }

.notes-pager { display: grid; gap: 0.8rem; margin-top: 1.5rem }
@media (min-width: 640px) { .notes-pager { grid-template-columns: 1fr 1fr } }
.notes-pager a {
  display: block; border: 1px solid var(--line); border-radius: 10px; padding: 0.8rem 1rem;
  text-decoration: none; color: var(--navy); font-weight: 600
}
.notes-pager a:hover { border-color: var(--blue) }
.notes-pager span { display: block; font-size: 0.875rem; font-weight: 400; color: var(--muted) }
.pager-next { text-align: right; grid-column: 2 }
@media (max-width: 639px) { .pager-next { grid-column: auto } }

.notes-index { padding-top: 2rem; padding-bottom: 3rem; max-width: 52rem }
.notes-intro { font-size: 1.08rem; color: var(--ink) }
.notes-part h2 { color: var(--navy); margin-top: 2rem }
.notes-list { padding-left: 1.4rem }
.notes-list li { margin: 0.6rem 0 }
.notes-list a { font-weight: 600 }
.notes-list span { display: block; color: var(--ink-soft); font-size: 0.97rem }

/* The course landing's student-notes list. */
.notes-topics { columns: 2 18rem; column-gap: 2rem; padding-left: 1.4rem }
.notes-topics li { break-inside: avoid; margin: 0.25rem 0 }

/* Cheat sheet: dense on screen, two printed pages. */
.cheatsheet { padding: 2rem 0 3rem; columns: 2 22rem; column-gap: 2rem; font-size: 0.97rem; line-height: 1.5 }
.cheatsheet h2 { column-span: all; color: var(--navy); font-size: 1.15rem; margin: 1.2rem 0 0.4rem; border-bottom: 2px solid var(--line) }
.cheatsheet h3 { break-after: avoid; margin: 0.8rem 0 0.3rem; font-size: 1rem; color: var(--ink) }
.cheatsheet pre { break-inside: avoid; margin: 0.3rem 0 0.8rem; padding: 0.6rem 0.8rem; font-size: 0.875rem }
.cheatsheet .table-wrap { break-inside: avoid }
.sheet-head { column-span: all; display: none }

@media print {
  .site-head, .topbar, .site-foot, .wa-float, .skip-link, .notes-band .hero-actions, .notes-toc,
  .notes-teach, .notes-more, .notes-pager, .consent { display: none !important }
  .page-band { background: none !important; color: #000 !important; padding: 0 !important }
  .page-band h1, .page-band .lead, .page-band .band-tag, .page-band .crumbs { color: #000 !important }
  .notes-sheet .page-band { display: none !important }
  .sheet-head { display: block; font-size: 10pt; margin: 0 0 4pt }
  .notes-layout { display: block; padding: 0 }
  .cheatsheet { padding: 0; font-size: 9pt; column-gap: 1.2rem }
  .notes pre { background: #f4f6f9 !important; color: #000 !important; border: 1px solid #ccc; font-size: 8.5pt }
  .notes a { color: #000; text-decoration: none }
  .qa { border: none; padding: 0 } .qa > :not(summary) { display: block }
}