/*
 * THE COURSE'S CALLOUT BOX (safety, tip, term, teacher), one rule for every page that shows one: the course
 * (learn.css sets the --ln-* tokens) and the sound board inside a practice screen (public/mix, which has none
 * of them, so each token falls back to the app's own: global.css / site.css).
 */
/* callouts: safety is red, a tip is blue, a term is green, a teacher note is gold */
.ln_callout{position:relative;margin:0 0 14px;padding:12px 14px 12px 18px;border-radius:8px;background:var(--ln-panel,var(--card));
  border:1px solid var(--ln-line,var(--primary-lighter-alt));color:var(--ln-ink,var(--ink-strong));font:400 var(--ln-fs,14px)/1.55 roboto-regular,sans-serif}
.ln_callout::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:8px 0 0 8px;background:var(--ln-blue,var(--accent-blue))}
.ln_callout_k{display:block;margin-bottom:3px;font:700 calc(var(--ln-fs,14px) * 0.66)/1.3 roboto-medium,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ln-blue,var(--accent-blue))}
.ln_callout.is-safety::before,.ln_callout.is-safety .ln_callout_k{background:var(--ln-red,var(--accent-maroon));color:var(--ln-red,var(--accent-maroon))}
.ln_callout.is-safety .ln_callout_k{background:none}
.ln_callout.is-term::before{background:var(--ln-green,var(--accent-sea-green))}.ln_callout.is-term .ln_callout_k{color:var(--ln-green,var(--accent-sea-green))}
.ln_callout.is-teacher::before{background:var(--ln-gold,var(--accent-gold))}.ln_callout.is-teacher .ln_callout_k{color:var(--ln-gold,var(--accent-gold))}
.ln_callout p{margin:0 0 6px}.ln_callout p:last-child{margin:0}