/* Lesson pages, the offline page, and the home page's offline panel. Builds on styles.css. */

/* ---------- Lesson pages ---------- */
.note { max-width: 46rem; padding-block: clamp(2rem, 6vw, 3.5rem); }
.note h1 { margin: .2rem 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 5.5vw, 2.9rem); line-height: 1.15; letter-spacing: -.02em; }
.note h2 { margin: 2rem 0 .75rem; font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; }
.note-switch { margin: 0 0 1.5rem; font-weight: 600; }
.note-body { background: var(--card); border: 3px solid var(--ink); border-radius: 12px; padding: clamp(1.25rem, 4vw, 2rem); }
.note-body > :first-child { margin-top: 0; }
.note-body > :last-child { margin-bottom: 0; }
.note-body p { margin: 0 0 1.1rem; }
.note-body ol { margin: 0 0 1.25rem; padding-left: 2.2rem; }
.note-body ol > li { margin-bottom: .85rem; padding-left: .35rem; }
.note-body ol > li::marker { font-weight: 700; color: var(--green-dark); }
.note-body strong { color: var(--ink); }
.note-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.note-group { margin-top: 2rem; }
.note-list { margin: 0; padding-left: 1.4rem; }
.note-list li { margin-bottom: .6rem; }
.note-list a { font-weight: 600; }

/* ---------- Home page: offline panel ---------- */
.offline-panel { padding-block: clamp(2.5rem, 6vw, 4rem); }
.offline-box { max-width: 46rem; background: var(--card); border: 3px solid var(--ink); border-radius: 14px; padding: clamp(1.25rem, 4vw, 2rem); }
.offline-box h2 { margin: 0 0 .5rem; font-family: var(--serif); font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1.2; }
.offline-box p { margin: 0 0 1rem; }
.offline-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 .5rem; }
.offline-actions .btn[disabled] { opacity: .6; cursor: progress; }
.offline-box .status { font-weight: 600; color: var(--ink); }
.offline-box .hint { color: var(--ink-soft); }

/* ---------- Offline page ---------- */
.offline-banner { display: flex; gap: 1.25rem; align-items: flex-start; }
.offline-banner svg { width: 4.5rem; height: 4.5rem; flex: none; margin-top: .4rem; }
.offline-banner p { margin: 0 0 1rem; color: var(--ink-soft); font-size: 1.3rem; }
.back-online { margin: 0 0 1rem; padding: .75rem 1rem; background: var(--green-wash); border-left: 6px solid var(--green); font-weight: 700; }
#saved-lessons h2:first-child { margin-top: 1.5rem; }
@media (max-width: 30rem) {
  .offline-banner { flex-direction: column; gap: .5rem; }
}

/* ---------- Print: just the steps, large and plain ---------- */
@media print {
  .site-header, .site-footer, .skip-link, .note-actions, .note-switch, .offline-panel { display: none !important; }
  body { background: #fff; font-size: 14pt; }
  .note { max-width: none; padding: 0; }
  .note-body { border: 0; padding: 0; background: #fff; }
  .note .eyebrow { color: #000; }
}