/* The few rules PyIDE's stylesheet does not already cover.
 *
 * Everything else — the bar, the panes, the editor wrap, the stage, the
 * output, the sprite grid, both themes — comes from style.css, vendored from
 * PyIDE. This page is a full-page PyIDE with the school taken out, so the
 * right amount of styling here is nearly none. Anything that grows in this
 * file is probably a sign the two have started to diverge.
 */

/* The logo, where PyIDE has its snake. Sized to the bar's own type. */
.brand.brandlink { display: flex; align-items: center; gap: 7px; }
.logo-img { display: block; }

/* The site nav, in the space PyIDE gives the project and author fields.
   Nothing here is saved anywhere, so there is nothing to name — the room is
   better spent on the way back to the rest of the site. */
.site-nav { align-items: center; gap: 2px; flex-wrap: wrap; }
.site-nav a {
  color: var(--muted); text-decoration: none;
  padding: 5px 10px; border-radius: 6px; font-size: 13px;
}
.site-nav a:hover { color: var(--text); background: var(--hover-bg); }
.site-nav a.current { color: var(--text); background: var(--hover-bg); font-weight: 600; }

/* A square button for the theme toggle, so the glyph sits centred rather
   than being padded like a word. */
.btn-icon-only { padding-left: 9px; padding-right: 9px; }

/* Keyboard users land here first. PyIDE has no such link — it is one page
   behind a login, whereas this is a public page reached from a nav. */
.skip { position: absolute; left: -9999px; z-index: 20; }
.skip:focus {
  left: 12px; top: 12px; padding: 8px 12px; border-radius: 6px;
  background: var(--accent); color: var(--on-accent); text-decoration: none;
}

/* The canvas takes the keys, so it has to be obvious when it has them.
   "Click the picture first" is the commonest confusion on this page, and a
   focus ring is the answer that does not need reading. */
#canvas:focus { outline: none; box-shadow: inset 0 0 0 3px var(--green); }

/* At phone width the bar wraps rather than squeezing the buttons to nothing;
   the nav is the part that can afford to go to a second line. */
@media (max-width: 720px) {
  .bar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
  .site-nav { order: 3; flex-basis: 100%; }
  .split { height: auto; }
}