/* MyGoal Signal — menu.css: the header menu; on narrow screens it folds behind a button into a panel. */
/* Results in the header: the six played days drop down under it. */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; color: var(--slate); padding: 0.375rem 0; border-bottom: 2px solid transparent; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-left: 0.4rem; border: solid currentColor;
  border-width: 0 2px 2px 0; transform: translateY(-0.2rem) rotate(45deg); }
.menu[open] summary::after { transform: translateY(0.05rem) rotate(-135deg); }
.menu > div { position: absolute; top: calc(100% + 0.5rem); left: -0.75rem; z-index: 6; min-width: 15rem; padding: 0.375rem;
  border-radius: 0.75rem; background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: var(--tile-depth), var(--tile-hover); }
.menu > div a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; color: var(--ink); font-weight: 600; white-space: nowrap; }
.menu > div a:hover, .menu > div a[aria-current="page"] { background: var(--pale); color: var(--cobalt); }
.lang-in-menu { display: none; }

/* Narrow screens: the menu folds behind a button and opens as a panel under the header, with large
   rows for a finger; a panel taller than the screen scrolls inside itself. */
@media (max-width: 900px) {
  .tools { margin-left: auto; }
  .top > .wrap { position: relative; }
  .burger { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; padding: 0; cursor: pointer; border-radius: 0.5625rem;
    border: 1px solid var(--tile-edge); background: var(--tile); box-shadow: var(--tile-depth); }
  .burger span, .burger span::before, .burger span::after { display: block; width: 1.05rem; height: 2px; border-radius: 1px; background: currentColor; position: relative; }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
  .burger span::before { top: -0.35rem; }
  .burger span::after { top: 0.35rem; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 6; flex-direction: column; gap: 0; margin: 0;
    padding: 0.5rem var(--inset) 1.25rem; background: var(--paper); border-bottom: 1px solid var(--border); box-shadow: var(--tile-hover);
    max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; }
  .nav-open .nav { display: flex; }
  .nav > a, .menu summary { padding: 0.9375rem 0; border-bottom: 1px solid var(--border); font-size: 1.0625rem; color: var(--ink); }
  .nav > a[aria-current="page"], .menu summary[aria-current="page"] { padding-left: 0.875rem; font-weight: 700; }
  .nav > a[aria-current="page"]::before, .menu summary[aria-current="page"]::before { right: auto; top: 0.75rem; bottom: 0.75rem; width: 0.25rem; height: auto; }
  /* The played days: raised tiles two by two, each its own target, the shown one lit as a pick. */
  .menu > div { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; min-width: 0;
    margin: 0.75rem 0; padding: 0; border: 0; background: none; box-shadow: none; }
  .menu > div a, .lang-in-menu a { padding: 0.75rem 0.5rem; text-align: center; font-size: 0.9375rem; color: var(--ink);
    border-radius: 0.625rem; background: var(--tile); border: 1px solid var(--tile-edge); box-shadow: var(--tile-depth); }
  .menu > div a[aria-current="page"], .lang-in-menu a[aria-current="true"] { background: var(--pick-bg); color: var(--cobalt);
    box-shadow: inset 0 0 0 1.5px var(--cobalt); }
}
/* A phone: the languages leave the header for the foot of the panel, three equal buttons. */
@media (max-width: 480px) {
  .tools > .lang { display: none; }
  .lang-in-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; padding-top: 1rem; }
}