/* Shared lesson chrome for /interactives/* — side navigation and the stepped quiz.
   Both explainers load this so the two pages cannot drift apart. Page-specific
   visuals stay in each page; only the wrapper lives here.
   The colour variables (--s1, --card, --border, …) are defined by each page. */

/* ---------- layout: sidebar + content column ---------- */
.shell{max-width:920px;margin:0 auto;}
.shell>.col{min-width:0;}          /* min-width:0 or wide children stretch the grid */
.sidenav{display:none;}

@media (min-width:1120px){
  .shell{
    max-width:1260px;display:grid;grid-template-columns:252px minmax(0,1fr);
    gap:46px;padding:0 24px;align-items:start;
  }
  .shell>.col{grid-column:2;}
  .sidenav{display:block;position:sticky;top:20px;align-self:start;
    max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;padding-bottom:10px;}
  .shell header.hero{max-width:none;margin:0;padding-left:0;padding-right:0;padding-top:30px;}
  .shell .wrap{max-width:none;margin:0;padding-left:0;padding-right:0;}
  /* the sidebar carries progress and contents, so the in-hero copies are redundant */
  .shell header.hero nav.toc,.shell header.hero .lessonbar{display:none;}
  /* keep the back-link aligned with the widened layout */
  .sitebar{max-width:1260px;padding-left:24px;padding-right:24px;}
}

/* ---------- side navigation ---------- */
.sn-head{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;}
.sn-prog{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.sn-track{flex:1;height:7px;border-radius:999px;background:var(--track);overflow:hidden;}
.sn-fill{display:block;height:100%;width:0;border-radius:999px;background:var(--s1);
  transition:width .45s cubic-bezier(.2,.7,.2,1);}
.sn-pct{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text-secondary);min-width:32px;text-align:right;}
.sn-list{list-style:none;margin:0;padding:0;border-left:2px solid var(--border);}
.sn-list a{display:flex;gap:9px;align-items:flex-start;text-decoration:none;padding:7px 10px;
  margin-left:-2px;border-left:2px solid transparent;font-size:13.5px;line-height:1.35;
  color:var(--text-secondary);font-weight:600;}
.sn-list a:hover{color:var(--text-primary);}
.sn-list a .sn-n{flex:0 0 auto;width:19px;height:19px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
  background:var(--track);color:var(--text-secondary);margin-top:1px;}
.sn-list a.done .sn-n{background:var(--s3);color:#fff;}
.sn-list a.done .sn-n::before{content:"✓";}
.sn-list a.done .sn-n span{display:none;}
.sn-list a.here{color:var(--text-primary);border-left-color:var(--s1);background:var(--surface-1);
  border-radius:0 7px 7px 0;}
.sn-list a.here .sn-n{background:var(--s1);color:#fff;}
.sn-list a.here.done .sn-n{background:var(--s3);}
.sn-reset{margin-top:14px;font-family:inherit;font-size:11.5px;font-weight:700;padding:6px 11px;
  border-radius:8px;cursor:pointer;border:1px solid var(--border);background:var(--card);
  color:var(--muted);}
.sn-reset:hover{color:var(--text-primary);border-color:var(--baseline);}

/* ---------- quiz: stepper ---------- */
.qdots{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 4px;}
.qdot{width:29px;height:29px;border-radius:9px;border:1px solid var(--border);background:var(--card);
  color:var(--text-secondary);font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  font-variant-numeric:tabular-nums;}
.qdot:hover{border-color:var(--baseline);color:var(--text-primary);}
.qdot.here{border-color:var(--s1);box-shadow:0 0 0 2px rgba(42,120,214,.18);color:var(--text-primary);}
.qdot.ok{background:var(--s3);border-color:transparent;color:#fff;}
.qdot.no{background:var(--s2);border-color:transparent;color:#fff;}
.qnav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;}
.qnav .spacer{flex:1;}
.qbtn{font-family:inherit;font-size:14px;font-weight:700;padding:9px 17px;border-radius:9px;
  cursor:pointer;border:1px solid var(--border);background:var(--card);color:var(--text-primary);}
.qbtn:hover:not(:disabled){border-color:var(--baseline);}
.qbtn:disabled{opacity:.42;cursor:default;}
.qbtn.primary{background:var(--s1);color:#fff;border-color:transparent;}
.qbtn.primary:hover{filter:brightness(1.06);}
.qskip{font-size:12.5px;color:var(--muted);}
.qmissed{margin-top:12px;font-size:14px;color:var(--text-secondary);}
.qmissed b{color:var(--text-primary);}
.qjump{font-family:inherit;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:7px;
  border:1px solid var(--border);background:var(--card);color:var(--text-primary);cursor:pointer;margin:3px 4px 0 0;}
.qjump:hover{border-color:var(--s1);color:var(--s1);}

@media print{ .sidenav{display:none!important;} .shell{display:block!important;max-width:none!important;padding:0!important;} }