/* Training lessons (/training/). Big readable text, numbered steps, pictures that fit a phone. Low-ink print. */
.training-page .narrowish { max-width: 820px; }
.training-page .lead { font-size: 1.15rem; line-height: 1.55; }
.lesson-meta { color: var(--muted); margin-top: -6px; }
.lesson-group h2 { margin-top: 30px; }
.lesson-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.lesson-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 16px 18px; border: 1px solid var(--line); border-left: 6px solid var(--blue); border-radius: var(--radius); background: var(--white); color: var(--ink); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.lesson-card a:hover, .lesson-card a:focus-visible { border-color: var(--blue); }
.lc-title { font-size: 1.2rem; font-weight: 800; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.lc-sum { line-height: 1.45; }
.lc-meta { color: var(--muted); font-size: .92rem; }
.toc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 20px; margin: 16px 0 8px; }
.toc h2 { font-size: 1.05rem; margin: 6px 0; }
.toc ol { margin: 0 0 8px; padding-left: 1.4em; } .toc li { margin: 4px 0; }
.lesson-step { margin: 28px 0; }
.lesson-step h2 { border-top: 2px solid var(--line); padding-top: 18px; }
ol.steps { list-style: none; counter-reset: st; padding: 0; margin: 0 0 14px; }
ol.steps > li { counter-increment: st; position: relative; padding: 4px 0 10px 50px; min-height: 36px; line-height: 1.55; font-size: 1.06rem; overflow-wrap: anywhere; }
ol.steps > li::before { content: counter(st); position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 800; display: grid; place-items: center; }
figure.shot { margin: 16px 0 6px; }
figure.shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 10px rgba(15, 23, 42, .08); background: #fff; }
figure.shot figcaption { color: var(--muted); font-size: .95rem; margin-top: 6px; }
.tip, .watch { padding: 10px 14px; border-radius: 10px; line-height: 1.5; }
.tip { background: var(--pale-blue); border-left: 5px solid var(--blue); }
.watch { background: var(--pale-gold); border-left: 5px solid var(--gold); margin: 24px 0; }
.lesson-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 10px; }
.lesson-nav .btn { max-width: 100%; white-space: normal; text-align: center; }
/* Quick start for secretaries: one page of boxes. */
.qs-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); margin-top: 16px; }
.qs-box { border: 2px solid var(--line); border-radius: var(--radius); padding: 6px 16px 8px; background: var(--white); min-width: 0; overflow-wrap: anywhere; }
.qs-box h2 { font-size: 1.15rem; margin: 8px 0 4px; }
.qs-box ol { margin: 0; padding-left: 1.3em; } .qs-box li { margin: 5px 0; line-height: 1.45; }
.qs-notes { grid-column: 1 / -1; } .qs-notes p { margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; }
.blank { flex: 1 1 140px; border-bottom: 1.5px solid var(--muted); min-height: 1.3em; }
@media (max-width: 520px) { ol.steps > li { padding-left: 44px; font-size: 1rem; } ol.steps > li::before { width: 30px; height: 30px; } }
@media print {
  .training-page .narrowish { max-width: none; }
  .lesson-card a, .toc, .qs-box, .tip, .watch { background: none !important; border-color: #999 !important; color: #000; }
  .lc-title { color: #000; }
  ol.steps > li::before { background: none; color: #000; border: 1.5px solid #000; }
  figure.shot { break-inside: avoid; } figure.shot img { max-height: 9cm; width: auto; box-shadow: none; border-color: #999; }
  .lesson-step h2 { break-after: avoid; }
  .quick-start .lead { font-size: 12.5pt; margin: 0 0 8pt; } .quick-start h1 { font-size: 22pt; margin: 0 0 4pt; } .quick-start .lesson-meta { display: none; }
  .quick-start .qs-grid { grid-template-columns: 1fr 1fr; gap: 10pt; margin-top: 6pt; }
  .quick-start .qs-box { padding: 4pt 10pt 8pt; border-width: 1px; break-inside: avoid; } .quick-start .qs-box h2 { font-size: 14pt; margin: 4pt 0 3pt; }
  .quick-start .qs-box li { font-size: 12pt; margin: 3pt 0; line-height: 1.35; }
  .quick-start main { padding: 0; } .quick-start .qs-notes p { font-size: 12pt; margin: 8pt 0; } .blank { border-color: #000; }
}