/* The menu that sits in the top right of every page.
   
   It exists because of the offline copy. On the website a teacher who ends up
   somewhere odd can retype the address; opened off a USB stick there is no
   address to retype, and three pages had no way back to the index at all.

   Deliberately a <details> element and plain links: the navigation is in the
   HTML, so it works with no script, and the offline build rewrites the paths
   along with every other href. menu.js only closes it on an outside tap.

   Two token vocabularies are in play -- --panel/--line on the pages that
   style themselves, --card/--rule in suite.css and paper.css -- so every
   colour chains through both before falling back to a literal. */

.menu {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 80;
  font-family: var(--sans, ui-sans-serif, system-ui, sans-serif);
}

.menu > summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px 8px 11px;
  border-radius: 999px;
  border: 1px solid var(--line, var(--rule, #dbe3ed));
  background: var(--panel, var(--card, #fff));
  color: var(--soft, #55637a);
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 24, 38, .05), 0 8px 20px -10px rgba(15, 24, 38, .22);
  -webkit-tap-highlight-color: transparent;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { color: var(--ink, #0f1826); }
.menu > summary:focus-visible { outline: 2px solid var(--enamel, var(--violet, #0b6d7d)); outline-offset: 2px; }

/* Three lines that become an x. The middle one fades rather than rotating,
   which is one fewer thing to go wrong at the sizes a panel renders. */
.menu .bars { position: relative; width: 15px; height: 11px; flex: none; }
.menu .bars i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .18s ease, opacity .12s ease;
}
.menu .bars i:nth-child(1) { top: 0; }
.menu .bars i:nth-child(2) { top: 4.5px; }
.menu .bars i:nth-child(3) { top: 9px; }
.menu[open] .bars i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu[open] .bars i:nth-child(2) { opacity: 0; }
.menu[open] .bars i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.menu .card {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 212px;
  padding: 7px;
  border-radius: 14px;
  border: 1px solid var(--line, var(--rule, #dbe3ed));
  background: var(--panel, var(--card, #fff));
  box-shadow: 0 2px 6px rgba(15, 24, 38, .07), 0 24px 48px -18px rgba(15, 24, 38, .34);
  animation: menu-in .14s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .menu .card { animation: none; }
  .menu .bars i { transition: none; }
}

.menu .card a {
  display: block;
  padding: 9px 11px;
  border-radius: 9px;
  color: var(--ink, #0f1826);
  font-size: 14px; font-weight: 500; line-height: 1.25;
  text-decoration: none;
}
.menu .card a:hover { background: var(--panel-2, var(--slot, #f2f5f9)); }
.menu .card a:focus-visible { outline: 2px solid var(--enamel, var(--violet, #0b6d7d)); outline-offset: -2px; }
.menu .card a small {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 400; color: var(--faint, var(--soft, #8d9bad));
}

.menu .card hr {
  height: 1px; margin: 6px 9px; border: 0;
  background: var(--line-2, var(--rule, #e9eef5));
}
.menu .card .grp {
  padding: 7px 11px 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint, var(--soft, #8d9bad));
}

/* A panel at the front of a room is the one place this must not cover the
   thing a child is touching, so it shrinks rather than floating larger. */
@media (max-width: 460px) {
  .menu > summary { padding: 7px 10px 7px 9px; font-size: 12px; }
  .menu .card { min-width: 196px; }
}