/* Guide side panel readability (#2470 step 3, docs/phase1.md). Loaded after the guide's stylesheet variant
   (css/guides/), so these rules replace the variants' sizes, spacing and fixed heights in the side panel on every guide;
   fonts, colours and weights stay the variants'. The panel scrolls when its text is taller than the screen, and the
   controls stay pinned at its foot; at the end of the scroll they sit below the last box, so nothing is hidden
   under them. Below 760px wide the panel stacks above the screenshot and the controls follow the text. */

.side{padding:20px 22px 0;gap:0;overflow-x:hidden;overflow-y:auto}
.side>*{flex:none}
.side .meta{gap:6px;margin:0 0 14px}
.side .chip{font-size:11px;line-height:1.2;padding:5px 9px}
.side h2{font-size:19px;line-height:1.3;margin:0 0 10px}
.side .muted{display:block;height:auto;min-height:0;max-height:none;overflow:visible;margin:0;font-size:13px;line-height:1.55}
.side .muted+.muted{margin-top:12px}
.side .progress{margin:18px 0 8px}
.side .progress-row{font-size:12px;line-height:1.3;margin:0 0 14px}
.side .step-title{display:block;height:auto;min-height:0;max-height:none;overflow:visible;margin:0 0 8px;font-size:18px;line-height:1.3}
.side .instruction{display:block;height:auto;min-height:0;max-height:none;overflow:visible;margin:0 0 16px;font-size:14px;line-height:1.6}
.side .completion{display:block;height:auto;min-height:0;max-height:none;overflow:visible;margin:0 0 12px;padding:12px 14px;font-size:13px;line-height:1.55}
.side .completion b{font-size:11px;line-height:1.3;margin-bottom:6px}
.side .note{display:block;height:auto;min-height:0;max-height:none;overflow:visible;margin:0 0 12px;padding:12px 14px;font-size:13px;line-height:1.55}
.side .note:empty{display:none}
.side .controls{position:sticky;left:auto;right:auto;bottom:0;z-index:1;margin-top:auto;padding:14px 0 18px;background:#fbf8fa}

@media(max-width:1120px){
  .side{padding:16px 16px 0}
}

@media(max-width:760px){
  .side{overflow:visible;padding:18px 16px 0}
  .side .controls{position:static;margin-top:4px;padding:14px 0 16px}
}