/* Hide the sidebar (owner's permission 2.10.2026).

   Nothing here applies until #screen-game carries .sb-collapsed, which only
   happens when this browser holds a saved "hidden" for the student. The
   sidebar is otherwise exactly as it was; the only addition to the open state
   is the small chevron button next to the mute button.

   A tutorial or tour always shows the sidebar (the slides picture it), and a
   phone-width screen never hides it: both are decided here, not in script. */

.motor-theme .sb-hide-btn {
  position: absolute; top: 8px; right: 42px; z-index: 20;
  width: 26px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6); border-radius: 6px;
  font-size: 15px; line-height: 1; cursor: pointer;
}
/* The slides picture the sidebar and the frame sits just above it: the extra
   button is not drawn behind a tutorial or tour. */
.motor-theme.motor-tutorial-open .sb-hide-btn,
.motor-theme.motor-guide-open .sb-hide-btn { display: none; }

.motor-theme .sb-hide-btn:hover,
.motor-theme .sb-hide-btn:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

.motor-theme .sb-reveal-btn { display: none; }

@media (min-width: 701px) {
  .motor-theme:not(.motor-tutorial-open):not(.motor-guide-open) #screen-game.sb-collapsed > .sidebar { display: none; }
  .motor-theme:not(.motor-tutorial-open):not(.motor-guide-open) #screen-game.sb-collapsed > .sb-reveal-btn {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 60;
    width: 18px; height: 64px; padding: 0;
    background: #102a3a; color: rgba(255, 255, 255, 0.85);
    border: 0; border-radius: 0 8px 8px 0; cursor: pointer;
    box-shadow: 1px 0 6px rgba(16, 42, 58, 0.25);
    font-size: 16px; line-height: 1;
  }
  .motor-theme #screen-game.sb-collapsed > .sb-reveal-btn:hover,
  .motor-theme #screen-game.sb-collapsed > .sb-reveal-btn:focus-visible { background: #16344a; color: #fff; }
  .motor-theme #screen-game.sb-collapsed > .sb-reveal-btn .sb-reveal-dot {
    position: absolute; top: 5px; right: 3px; width: 7px; height: 7px;
    border-radius: 50%; background: #f59e0b;
  }
  .motor-theme #screen-game.sb-collapsed > .sb-reveal-btn .sb-reveal-dot[hidden] { display: none; }
}

/* The notice column sits flush against the sidebar's edge when it is open;
   flush against the screen's edge looks unfinished, and the edge tab is there. */
@media (min-width: 701px) {
  .motor-theme:not(.motor-tutorial-open):not(.motor-guide-open) #screen-game.sb-collapsed .notif-area { margin-left: 28px; }
}

@media (max-width: 700px) {
  .motor-theme .sb-hide-btn, .motor-theme .sb-reveal-btn { display: none !important; }
}