/* assets/css/lesson-shell.css — the one layout every lesson page shares
   (2026-10-02): lesson-home, lesson-reflect, lesson-reflection, lesson-proof,
   lesson-plan.

   Rules
   · Full width. No max-width cap; 24px side gutters on desktop, 16px on phones.
   · Desktop (>920px): the page is an app screen that fits the window. The
     body never scrolls; the main area fills what's left under the header and
     its panels scroll inside themselves.
   · Phones: the normal stacked page that scrolls.
   · Header: a back link, a small label, a 22px title, actions on the right.
   · 12px between blocks.

   A page opts in with <body class="shell">, then marks:
     .shell-wrap    the page's outer column (usually its existing .wrap)
     .shell-fill    the block that takes the remaining height
     .shell-scroll  any panel that scrolls on its own when it overflows
   Everything else in .shell-wrap keeps its natural height. */

body.shell .shell-wrap{max-width:none;margin:0 auto;display:flex;flex-direction:column;gap:12px}

.shell-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 16px}
.shell-head .shell-titles{display:flex;flex-direction:column;gap:2px;min-width:0}
.shell-head .shell-back{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);text-decoration:none;font-weight:600;font-size:14px;margin-bottom:2px}
.shell-head .shell-back:hover{color:var(--text)}
.shell-head h1{margin:0;font-size:22px;font-weight:700;line-height:1.25;text-wrap:balance}
.shell-head .shell-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

@media (min-width:921px){
  html:has(body.shell),body.shell{height:100%}
  body.shell{padding:0;overflow:hidden}
  body.shell .shell-wrap{height:100vh;height:100dvh;padding:14px 24px 16px}
  body.shell .shell-fill{flex:1;min-height:0}
  body.shell .shell-scroll{min-height:0;overflow:auto}
}
@media (max-width:920px){
  body.shell{padding:16px 16px 40px}
  body.shell .shell-wrap{padding:0}
}