/* =====================================================================
   DEMOS.CSS  -  interactive demo tools for the course pages
   Builds on site.css tokens. Default accent is violet (MTH 161); a page
   can override --acc / --acc-t / --acc-line on .demos to recolor.
   ===================================================================== */
.demos{--acc:var(--violet);--acc-t:rgba(181,140,255,.13);--acc-line:rgba(181,140,255,.34)}
.demos .lede{color:var(--text-dim);font-size:16px;max-width:74ch;margin:-6px 0 26px}

.demo{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 28px;margin-bottom:26px;border-top:3px solid var(--acc)}
.demo-head{display:flex;gap:15px;align-items:flex-start;margin-bottom:20px}
.demo-ix{flex:none;width:42px;height:42px;border-radius:11px;background:var(--acc-t);border:1px solid var(--acc-line);
  display:grid;place-items:center;font-family:var(--serif);font-weight:600;font-size:18px;color:var(--acc)}
.demo-head h3{font-size:21px;color:var(--text);margin-bottom:5px}
.demo-head p{font-size:15px;color:var(--text-dim);line-height:1.55;margin:0;max-width:70ch}

.demo-step{margin-top:22px}
.demo-step:first-of-type{margin-top:6px}
.demo-step-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-size:13px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;color:var(--acc);margin-bottom:13px}

/* shared canvas stage look */
.gcanvas{display:block;width:100%;border-radius:9px;background:#0c0c0e;border:1px solid var(--line)}

/* ---------- guided walkthrough ---------- */
.dwalk{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.dwalk-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--bg-1)}
.dwalk-top .wt-t{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--text)}
.dwalk-top .wt-t svg{width:17px;height:17px;color:var(--acc)}
.dwalk-top .wt-c{font-size:12.5px;color:var(--text-faint);font-variant-numeric:tabular-nums}
.dwalk-grid{display:grid;grid-template-columns:1.18fr 1fr;gap:0}
@media(max-width:760px){.dwalk-grid{grid-template-columns:1fr}}
.dwalk-stage{padding:16px;border-right:1px solid var(--line);background:radial-gradient(120% 90% at 50% 0%,var(--acc-t),transparent 62%)}
@media(max-width:760px){.dwalk-stage{border-right:0;border-bottom:1px solid var(--line)}}
.dwalk-cap{font-size:12.5px;font-weight:600;color:var(--text-dim);text-align:center;margin-bottom:8px;min-height:1.2em}
.dwalk-side{padding:20px 22px;display:flex;flex-direction:column}
.dwalk-dots{display:flex;gap:7px;margin-bottom:15px}
.dwalk-dots button{width:9px;height:9px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-strong);padding:0;cursor:pointer;transition:.15s}
.dwalk-dots button.on{background:var(--acc);border-color:var(--acc);transform:scale(1.2)}
.dwalk-dots button.seen{background:var(--text-faint)}
.dwalk-narr{font-size:16px;line-height:1.62;color:var(--text);flex:1;margin:0 0 18px}
.dwalk-narr b{color:var(--acc);font-weight:600}
.dwalk-narr .num{font-family:var(--serif);font-variant-numeric:tabular-nums}
.dwalk-nav{display:flex;gap:9px;align-items:center}
.dwalk-nav .sp{flex:1}
.dwalk-done{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--green);font-weight:600}
.dwalk-done svg{width:16px;height:16px}

/* ---------- sandbox ---------- */
.sandbox{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sb-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:0}
@media(max-width:760px){.sb-grid{grid-template-columns:1fr}}
.sb-stage{padding:16px;border-right:1px solid var(--line)}
@media(max-width:760px){.sb-stage{border-right:0;border-bottom:1px solid var(--line)}}
.sb-controls{padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.ctrl{display:flex;flex-direction:column;gap:7px}
.ctrl-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ctrl-name{font-size:14px;color:var(--text);font-weight:500}
.ctrl-name .v{font-family:var(--serif);font-style:italic;color:var(--acc);margin-right:2px}
.ctrl-val{font-family:var(--serif);font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
input[type=range].sl{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:5px;
  background:var(--bg-3);outline:none;cursor:pointer}
input[type=range].sl::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--acc);border:2px solid var(--bg-1);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.5)}
input[type=range].sl::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--acc);border:2px solid var(--bg-1);cursor:pointer}
input[type=range].sl:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.sb-toggle{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-dim);cursor:pointer;user-select:none}
.sb-toggle input{width:0;height:0;opacity:0;position:absolute}
.sb-toggle .tk{width:42px;height:24px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line-strong);position:relative;transition:.16s;flex:none}
.sb-toggle .tk::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text-faint);transition:.16s}
.sb-toggle input:checked+.tk{background:var(--acc-t);border-color:var(--acc-line)}
.sb-toggle input:checked+.tk::after{transform:translateX(18px);background:var(--acc)}
.sb-toggle input:focus-visible+.tk{outline:3px solid var(--acc);outline-offset:3px}
.eqn{font-family:var(--serif);font-size:20px;color:var(--text);background:var(--bg-1);border:1px solid var(--line);
  border-radius:9px;padding:12px 15px;text-align:center;letter-spacing:.01em}
.eqn .hl{color:var(--acc);font-weight:600}
.readout{font-size:14px;color:var(--text-dim);line-height:1.6}
.readout b{color:var(--text);font-weight:600}
.readout .chip{display:inline-block;font-family:var(--serif);font-variant-numeric:tabular-nums;color:var(--acc);
  background:var(--acc-t);border:1px solid var(--acc-line);border-radius:6px;padding:1px 8px;margin:0 2px}
.btn-reset{align-self:flex-start;background:var(--bg-1);border:1px solid var(--line-strong);color:var(--text-dim);
  font:inherit;font-size:13px;font-weight:500;padding:7px 14px;border-radius:8px;cursor:pointer;transition:.14s;display:inline-flex;align-items:center;gap:7px}
.btn-reset:hover{background:var(--bg-3);color:var(--text)}
.btn-reset svg{width:14px;height:14px}

/* ---------- quick check (no grade) ---------- */
.dcheck{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:var(--radius);padding:20px 22px}
.dcheck-intro{font-size:14.5px;color:var(--text-dim);margin:0 0 16px;line-height:1.55}
.dcheck-q{padding:16px 0;border-top:1px solid var(--line)}
.dcheck-q:first-of-type{border-top:0;padding-top:0}
.dcheck-prompt{font-size:16px;color:var(--text);margin-bottom:12px;font-weight:500;line-height:1.5}
.dcheck-prompt .qn{color:var(--acc);font-weight:700;margin-right:6px}
.dcheck-prompt .mono{font-family:var(--serif);font-style:italic}
.dcheck-opts{display:flex;flex-direction:column;gap:8px}
.dcheck-opts button{text-align:left;background:var(--bg-1);border:1px solid var(--line-strong);color:var(--text);font:inherit;
  font-size:15px;padding:11px 14px;border-radius:8px;cursor:pointer;transition:.13s;display:flex;align-items:center;gap:11px}
.dcheck-opts button:hover:not(:disabled){background:var(--bg-3);border-color:var(--text-faint)}
.dcheck-opts button::before{content:"";width:17px;height:17px;border-radius:50%;border:2px solid var(--text-faint);flex:none;transition:.13s}
.dcheck-opts button.correct{border-color:var(--green);background:rgba(61,220,145,.12)}
.dcheck-opts button.correct::before{border-color:var(--green);background:var(--green);box-shadow:inset 0 0 0 3px var(--bg-1)}
.dcheck-opts button.wrong{border-color:var(--coral);background:rgba(251,111,134,.12)}
.dcheck-opts button.wrong::before{border-color:var(--coral);background:var(--coral);box-shadow:inset 0 0 0 3px var(--bg-1)}
.dcheck-opts button:disabled{cursor:default;opacity:.95}
.dcheck-fb{font-size:14px;line-height:1.6;color:var(--text-dim);margin-top:11px;padding:10px 14px;border-radius:8px;
  background:var(--bg-1);border:1px solid var(--line);display:none}
.dcheck-fb.show{display:block}
.dcheck-fb.ok{border-color:color-mix(in srgb,var(--green) 40%,var(--line))}
.dcheck-fb.no{border-color:color-mix(in srgb,var(--coral) 40%,var(--line))}
.dcheck-fb b{color:var(--text)}
.dcheck-fb .tag{font-weight:600}.dcheck-fb .tag.v{color:var(--green)}.dcheck-fb .tag.x{color:var(--coral)}
.dcheck-fb .fb-review{display:inline-block;margin-left:6px;font-weight:600;color:var(--acc);white-space:nowrap}

/* practice report (downloadable, turned in like MTH 155) */
.report{background:var(--bg-1);border:1px solid var(--line);border-top:3px solid var(--acc);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px 26px}
.report .rp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.report .rp-head>div:first-child{font-size:15px;color:var(--text-dim)}
.report .rp-head b{color:var(--text);font-weight:600}
.report .rp-edit{background:none;border:0;color:var(--acc);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;margin-left:8px;text-decoration:underline}
.report .rp-meter{font-size:13.5px;color:var(--text-faint)}
.report .rp-meter b{color:var(--text)}
.rp-table{width:100%;border-collapse:collapse;font-size:14.5px}
.rp-table th,.rp-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
.rp-table th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);font-weight:600}
.rp-table td:first-child{color:var(--text);font-weight:500}
.rp-table tbody tr:last-child td{border-bottom:0}
.rp-pill{display:inline-flex;font-family:var(--serif);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;padding:3px 11px;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-faint);background:var(--bg-2)}
.rp-pill.first{color:var(--blue);background:var(--blue-t);border-color:color-mix(in srgb,var(--blue) 38%,var(--line))}
.rp-pill.ever{color:var(--green);background:rgba(61,220,145,.12);border-color:color-mix(in srgb,var(--green) 38%,var(--line))}
.rp-pill.all{box-shadow:0 0 0 1px currentColor inset}
.rp-actions{margin-top:20px}
.rp-note{font-size:13px;color:var(--text-faint);margin:16px 0 0;line-height:1.6;max-width:74ch}
.rp-note b{color:var(--text)}

/* print: show only the practice report, light theme */
@media print{
  body{background:#fff!important;color:#111!important}
  body::before{display:none!important}
  header.site,footer.site,.canvasbar,.howto,.taughtas,.lessons-head,.reader-head,.outline-grid,.callout-note,.whatsnext,
  .video-frame,.playlist-side,.book-frame,.dwalk,.sandbox,.dcheck,.res-grid,.t2r-wrap,.t2r-h,.backhome,.page-head .lede,.kicker{display:none!important}
  .demo{border:0;box-shadow:none;padding:0;margin:0}
  .demo-head,.demo-step-k,.demo-step{display:none!important}
  #practice-report,#practice-report *{visibility:visible}
  .report{border:1px solid #ccc;box-shadow:none;padding:0}
  .report .rp-head>div,.report b,.rp-table td:first-child{color:#111!important}
  .rp-table th{color:#555!important}.rp-table td,.rp-table th{border-color:#ddd!important}
  .rp-pill{border:1px solid #bbb!important;background:#fff!important}
  .rp-pill.first{color:#1c5fb0!important}.rp-pill.ever{color:#137a43!important}
  .rp-actions{display:none!important}.rp-note{color:#555!important}
  .report-print-head{display:block!important}
}
.report-print-head{display:none}

/* segmented selector (parent functions, bases) */
.seg{display:flex;flex-wrap:wrap;gap:6px;background:var(--bg-1);border:1px solid var(--line);border-radius:10px;padding:5px}
.seg button{flex:1;min-width:48px;background:transparent;border:0;color:var(--text-dim);font-family:var(--serif);
  font-size:16px;padding:8px 10px;border-radius:7px;cursor:pointer;transition:.13s}
.seg button:hover{background:var(--bg-3);color:var(--text)}
.seg button.on{background:var(--acc-t);color:var(--acc);font-weight:600;box-shadow:inset 0 0 0 1px var(--acc-line)}
.seg button:focus-visible{outline:3px solid var(--acc);outline-offset:2px}