@import url("./learning-math.css");

/* Learning Figure v2. Scope all rules; do not alter other lesson layouts. */
.lf-v2{margin:28px 0;padding:18px;border:1px solid #cbd5e1;border-radius:16px;background:#fff;scroll-margin-top:24px;min-width:0}
.lf-v2>figcaption{display:grid;gap:6px;font-size:1.14rem;line-height:1.55;color:#1d2939}
.lf-kicker{font-size:.78rem;letter-spacing:.05em;color:#475467}
.lf-reading,.lf-boundary{font-size:.95rem;color:#475467;line-height:1.75}
.lf-scroll{overflow-x:auto;overscroll-behavior-inline:contain;max-width:100%;background:#fff}
.lf-scroll:focus-visible{outline:3px solid #4f46e5;outline-offset:3px}
.lf-scroll>svg{display:block;width:100%;min-width:var(--lf-min);height:auto;max-width:none}
.lf-linear,.lf-full{display:none}
.lf-steps{padding:0;list-style:none;counter-reset:lf-step}
.lf-steps>li{counter-increment:lf-step;border:1px solid #cbd5e1;border-radius:10px;margin:12px 0;padding:14px;color:#1d2939;background:#f8fafc;break-inside:avoid;overflow-wrap:anywhere}
.lf-steps>li>strong:before{content:counter(lf-step) ' · '}
.lf-steps p{margin:4px 0;font-size:1rem;line-height:1.6}
.lf-takeaway{padding:12px 14px;border-left:3px solid #4f46e5;background:#eef2ff;color:#1d2939;line-height:1.75}
.lf-bindings{margin-top:18px;border-left:3px solid #cbd5e1;padding-left:14px}
@media(max-width:820px){.lf-v2{padding:12px}.lf-wide{display:none}.lf-linear,.lf-full{display:block}.lf-v2>.lf-full{background:#fff}.lf-full>summary{font-size:1rem}.lf-full .lf-scroll{margin:8px}}
@media print{.lf-v2{border:0;border-top:1px solid #cbd5e1;border-radius:0;padding:10px 0;break-inside:auto}.lf-wide,.lf-full{display:none!important}.lf-linear{display:block!important}.lf-steps>li{font-size:10.5pt;break-inside:avoid}.lf-steps p{font-size:10.5pt}.lf-takeaway,.lf-boundary{break-inside:avoid}}

/* Keep a figure caption and its reading instruction with the first printed step. */
@media print{.lf-v2>figcaption{break-inside:avoid;break-after:avoid}.lf-v2>.lf-reading{break-after:avoid}}

/* Pages-native teaching flow. The model is JSON; Jekyll renders semantic HTML. */
.lpf-v1{margin:28px 0;padding:20px;border:1px solid #d7dde7;border-radius:16px;background:#fff;min-width:0;scroll-margin-top:24px}
.lpf-v1>figcaption{display:grid;gap:6px;color:#1d2939;font-size:1.14rem;line-height:1.55}
.lpf-kicker{font-size:.78rem;letter-spacing:.05em;color:#475467}
.lpf-reading,.lpf-boundary{margin:10px 0;color:#596579;font-size:1rem;line-height:1.7}
.lpf-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:stretch;margin:18px 0}
.lpf-step{position:relative;min-width:0;padding:14px 14px 13px;border:1px solid #d7dde7;border-top:3px solid #667085;border-radius:12px;background:#f8fafc;overflow-wrap:anywhere}
.lpf-step>strong{display:block;color:#1d2939;line-height:1.45}
.lpf-step>p{margin:7px 0 0;color:#475467;font-size:1rem;line-height:1.62}
.lpf-tone-info{border-top-color:#4f46e5;background:#f7f7ff}.lpf-tone-success{border-top-color:#18794e;background:#f4fbf7}.lpf-tone-warn{border-top-color:#a16207;background:#fffaf0}.lpf-tone-risk{border-top-color:#b42318;background:#fff7f6}
.lpf-arrow{display:grid;place-items:center;min-width:24px;color:#667085;font-size:1.35rem;font-weight:700}
@media(min-width:821px){
  .lpf-track{display:flex;align-items:stretch;gap:8px}
  .lpf-step{flex:1 1 0}
  .lpf-arrow{flex:0 0 24px}
  .lpf-count-6,.lpf-count-7{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .lpf-count-6 .lpf-arrow,.lpf-count-7 .lpf-arrow{display:none}
}
.lpf-takeaway{margin:16px 0 10px;padding:12px 14px;border-left:3px solid #4f46e5;border-radius:0 8px 8px 0;background:#eef2ff;color:#1d2939;line-height:1.72}
@media(max-width:820px){.lpf-v1{padding:14px}.lpf-track{display:grid;grid-template-columns:1fr;gap:8px}.lpf-arrow{min-height:24px;font-size:0}.lpf-arrow:after{content:'↓';font-size:1.3rem}.lpf-step>p{font-size:1rem}}
@media print{.lpf-v1{border:0;border-top:1px solid #cbd5e1;border-radius:0;padding:10px 0;break-inside:auto}.lpf-track{display:block}.lpf-step{break-inside:avoid;margin:7px 0;background:#fff!important}.lpf-arrow{display:none}.lpf-v1>figcaption,.lpf-reading{break-after:avoid}.lpf-takeaway,.lpf-boundary{break-inside:avoid;background:#fff}}