/* Course toolbar: handedness switcher + mirror tool. Selectors are body-prefixed
   so they beat the legacy rules that print later in the page. */
body .handtools{
  position:fixed; right:18px; bottom:18px; left:auto; top:auto;
  z-index:9998; display:flex; align-items:center; gap:10px;
  width:auto; max-width:calc(100vw - 24px);
  padding:6px 8px 6px 15px;
  background:#fff;
  border:1px solid var(--bs-line);
  border-radius:var(--bs-radius-pill);
  box-shadow:var(--bs-shadow-hover);
  font-family:var(--bs-sans); font-size:13px; line-height:1;
  color:var(--bs-text); text-align:left; text-transform:none;
}
body .handtools .ht-legend{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bs-muted); white-space:nowrap;
}
body .handtools .ht-seg{
  display:flex; gap:2px; padding:3px;
  background:var(--bs-surface-2); border-radius:var(--bs-radius-pill);
}
body .handtools .ht-opt,
body .handtools .ht-mirror{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; margin:0; border:0;
  border-radius:var(--bs-radius-pill);
  background:transparent; color:var(--bs-muted);
  font-family:inherit; font-size:13px; font-weight:600; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
body .handtools .ht-opt:hover{ background:#fff; color:var(--bs-brand-strong); }
body .handtools .ht-opt.is-on{
  background:var(--bs-brand); color:#fff; box-shadow:0 1px 2px #0b1b2e26;
}
body .handtools .ht-opt.is-on:hover{ background:var(--bs-brand-strong); color:#fff; }
body .handtools .ht-left .ht-i{ transform:scaleX(-1); }
body .handtools .ht-i{
  width:19px; height:19px; flex:none; display:block;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
body .handtools .ht-i .ht-fill{ fill:currentColor; stroke:none; }
body .handtools .ht-div{ width:1px; height:26px; background:var(--bs-line); flex:none; }
body .handtools .ht-mirror{ color:var(--bs-deep); }
body .handtools .ht-mirror:hover{ background:var(--bs-accent-soft); color:var(--bs-accent-strong); }
body .handtools a:focus-visible,
body .handtools button:focus-visible{ outline:2px solid var(--bs-brand); outline-offset:2px; }
body .bsl-current-setting{ display:none !important; }
@media (max-width:820px){
  body .handtools{ right:10px; bottom:10px; padding:5px 6px; gap:6px; }
  body .handtools .ht-legend{ display:none; }
  body .handtools .ht-mirror .ht-t{ display:none; }
  body .handtools .ht-mirror{ padding:9px 11px; }
}

/* Mirror tool window */
body #mirrorrouter .resize-drag,
body .mirrorframe{
  background:#0b1b2e;
  border:1px solid #ffffff2e;
  border-radius:14px;
  box-shadow:0 24px 60px #0b1b2e59, 0 4px 14px #0b1b2e38;
  padding:0;
  margin:24px;
  overflow:hidden;
  color:#fff;
  font-family:var(--bs-sans);
}
body .mirrorframe::before{
  content:"Mirror";
  position:absolute; top:0; left:0; right:0; height:52px;
  display:flex; align-items:flex-start; padding:12px 0 0 16px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 3px #0b1b2ecc;
  background:linear-gradient(180deg,#0b1b2ea6 0%,#0b1b2e00 100%);
  cursor:move; pointer-events:none; z-index:2;
}
body #mirrorcontainer{ display:block; overflow:hidden; border-radius:13px; }
body #mirrorcontainer video{ display:block; width:100%; height:auto; }
body .closevid,
body .sizevid{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; top:10px; z-index:3;
  background:#0b1b2eb3; border:1px solid #ffffff40; border-radius:999px;
  color:#fff; font-size:0; line-height:1; opacity:1;
  transition:background .15s ease, border-color .15s ease;
}
body .closevid{ right:10px; }
body .sizevid{ right:44px; }
body .closevid::before{ content:"\00d7"; font-size:20px; font-weight:400; }
body .sizevid::before{ content:"\2921"; font-size:14px; }
body .sizevid > *{ display:none; }
body .closevid:hover{ background:#bb4242; border-color:#bb4242; }
body .sizevid:hover{ background:var(--bs-brand); border-color:var(--bs-brand); }
body .vidmessage,
body .vidmessage2{
  font-family:var(--bs-sans); font-size:11px; line-height:1.45;
  color:#ffffffe6; background:#0b1b2e99;
  border-radius:8px; padding:7px 10px; z-index:2;
}
body .vidmessage:empty,
body .vidmessage2:empty{ display:none; }