/* =========================================================================
   App menu — the homepage's menu disc and pop-up, shared by Studio and the
   Wiki so both apps have it in the same corner. The disc is the last thing
   in each app's top bar (60px on a phone, 68px from 1000px, 16/24px from the
   right edge), and the panel pins to the screen under it, so the two apps
   put it at identical coordinates. The panel is always the site's dark
   glass, whatever theme the app is in.
   ========================================================================= */

/* until app-menu.js has built it, the slot's raw settings stay out of the bar */
[data-amenu]:not(.amenu) { display: none; }
.amenu { position: relative; flex: none; margin-left: 4px; }

.amenu__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 6%, transparent);
  color: inherit;
  cursor: pointer;
  transition: background-color .25s cubic-bezier(0.16, 1, 0.3, 1), transform .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.amenu__btn:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.amenu__btn:active { transform: scale(.92); }

/* three unequal rules, longest first — the homepage burger's mark */
.amenu__mark { display: grid; gap: 4px; width: 18px; }
.amenu__mark i {
  display: block;
  /* whole pixels: 2px rules, 6px apart, so the × closes exactly */
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s;
}
.amenu__mark i:nth-child(1) { width: 100%; }
.amenu__mark i:nth-child(2) { width: 72%; }
.amenu__mark i:nth-child(3) { width: 44%; }
.amenu__btn[aria-expanded="true"] .amenu__mark i:nth-child(1) { width: 100%; transform: translateY(6px) rotate(45deg); }
.amenu__btn[aria-expanded="true"] .amenu__mark i:nth-child(2) { opacity: 0; }
.amenu__btn[aria-expanded="true"] .amenu__mark i:nth-child(3) { width: 100%; transform: translateY(-6px) rotate(-45deg); }

.amenu__panel {
  /* dark glass in every theme; app controls inside read these */
  --fg: #FFFFFF;
  --bg: #000000;
  --line: color-mix(in srgb, #FFFFFF 14%, transparent);
  --well: color-mix(in srgb, #FFFFFF 10%, transparent);
  --muted: color-mix(in srgb, #FFFFFF 62%, transparent);
  position: fixed;
  z-index: 40;
  right: 16px;
  top: calc(60px + env(safe-area-inset-top, 0px));
  width: min(280px, calc(100vw - 32px));
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  display: grid;
  padding: 12px;
  border-radius: 28px;
  color: #FFFFFF;
  background: color-mix(in srgb, #000000 94%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #FFFFFF 10%, transparent),
    inset 0 1px 0 0 color-mix(in srgb, #FFFFFF 14%, transparent),
    0 18px 40px -20px rgba(0, 0, 0, .6);
  transform-origin: top right;
  animation: amenuIn .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.amenu__panel[hidden] { display: none; }
@keyframes amenuIn { from { opacity: 0; transform: translate3d(0, -8px, 0) scale(.97); } }
@media (min-width: 1000px) {
  .amenu__panel { right: 24px; top: 68px; }
}

.amenu__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 4px; }
.amenu__tiles--apps { grid-template-columns: repeat(3, 1fr); padding-top: 4px; }
.amenu__tiles + .amenu__tiles { border-top: 1px solid var(--line); }
/* Contact and Shop share a row; Donate takes the full width under them */
.amenu__tiles--links .amenu__tile--donate { grid-column: 1 / -1; }
.amenu__tile {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 12px 8px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  color: #FFFFFF;
  background: color-mix(in srgb, #FFFFFF 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #FFFFFF 8%, transparent);
  transition: background-color .2s, opacity .2s;
}
.amenu__tile:hover, .amenu__tile:focus-visible { background: color-mix(in srgb, #FFFFFF 16%, transparent); outline: none; }
/* the app you're in reads as chosen, not as a link */
.amenu__tile[aria-current="page"] { box-shadow: inset 0 0 0 1.5px #FFFFFF; background: transparent; }
.amenu__tile--donate { background: #FFFFFF; color: #130F0C; box-shadow: none; }
.amenu__tile--donate:hover, .amenu__tile--donate:focus-visible { background: #FFFFFF; opacity: .88; }

/* an app's own settings (Studio: guides, appearance) */
.amenu__extra { display: grid; padding: 8px 0; border-top: 1px solid var(--line); }
.amenu__extra:empty { display: none; }

.amenu__social { display: flex; gap: 8px; padding: 12px 12px 4px; border-top: 1px solid var(--line); }
.amenu__social a { display: grid; place-content: center; width: 40px; height: 40px; border-radius: 999px; color: #FFFFFF; transition: background-color .2s; }
.amenu__social a:hover, .amenu__social a:focus-visible { background: color-mix(in srgb, #FFFFFF 10%, transparent); outline: none; }
.amenu__social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.amenu__social svg .fill { fill: currentColor; stroke: none; }

@media (prefers-reduced-motion: reduce) {
  .amenu__panel { animation: none; }
  .amenu__mark i { transition: none; }
}

/* ── Settings in the sidebar (desktop) ─────────────────────────────────── */
.asettings { display: none; }
@media (min-width: 1000px) {
  .asettings { display: block; position: absolute; left: 10px; right: 10px; bottom: 12px; }
}
.asettings__btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px;
  border: 0; border-radius: 14px; background: transparent;
  color: var(--muted); font: inherit; font-size: 15px; letter-spacing: 0; text-align: left;
  cursor: pointer; transition: background-color .2s, color .2s;
}
.asettings__btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.asettings__btn:hover, .asettings__btn[aria-expanded="true"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.asettings__pop {
  --fg: #FFFFFF; --bg: #000000;
  --line: color-mix(in srgb, #FFFFFF 14%, transparent);
  --well: color-mix(in srgb, #FFFFFF 10%, transparent);
  --muted: color-mix(in srgb, #FFFFFF 62%, transparent);
  position: absolute; left: 0; bottom: calc(100% + 8px);
  width: 300px; padding: 8px;
  border-radius: 22px; color: #FFFFFF;
  background: color-mix(in srgb, #000000 94%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.25); backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #FFFFFF 10%, transparent), 0 18px 40px -20px rgba(0,0,0,.6);
  transform-origin: bottom left;
  animation: amenuIn .22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 40;
}
.asettings__pop[hidden] { display: none; }
.asettings__pop .amenu__extra { border-top: 0; padding: 0; }

/* the settings rows, for apps that don't style their own (the Wiki) */
.amenu__extra .menu__row { display: grid; gap: 10px; padding: 10px 12px 12px; }
.amenu__extra .menu__label { font-size: 15px; }
.amenu__extra .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 100%; padding: 4px; border-radius: 999px; background: var(--well); }
.amenu__extra .seg__btn { min-height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; transition: background-color .2s, color .2s; }
.amenu__extra .seg__btn[aria-checked="true"] { background: var(--fg); color: var(--bg); }