/* Space Slinky and Mushtrology, under the site's bar: loaded after the apps' own css so it wins */

/* a computer: the buttons and their letters a little smaller */
@media (min-width: 641px) {
  main.vortex header, main.vortex footer, main.astrology header, main.astrology footer { font-size: 11px }
  main.vortex h1, main.astrology h1 { font-size: 11px }
  main.vortex button, main.astrology button { padding: 5px 10px; min-height: 28px }
  main.astrology .views button { padding: 3px 9px; min-height: 24px }
  main.vortex header nav, main.astrology header nav { gap: 5px }
}

/* the eye and, on a phone, the controls button: the site's colours, outside the app */
.appctl { position: fixed; right: 16px; top: 76px; z-index: 25; display: flex; gap: 8px }
.appctl button { display: grid; place-items: center; width: 38px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--ink); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-tap-highlight-color: transparent }
.appctl button:hover { border-color: var(--soft) }
.appctl button[aria-expanded="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink) }
.appctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.appctl .knobs { display: none }
/* a computer: only there to bring everything back */
@media (min-width: 641px) {
  body:not(.app-clean) .appctl { display: none }
  body.app-clean .appctl .eye { opacity: .5 }
  body.app-clean .appctl .eye:hover, body.app-clean .appctl .eye:focus-visible { opacity: 1 }
}

@media (max-width: 640px) {
  .appctl .knobs { display: grid }
  body.app-clean .appctl .knobs { display: none }
  /* everything hidden: the site's bar goes too, and the sky has the whole screen */
  body.app-clean > .top { display: none }
  body.app-clean .appctl { top: calc(12px + env(safe-area-inset-top)) !important }
  body.app-clean .appctl .eye { opacity: .6 }
  /* the app's title on its own row, beside the two buttons; its other buttons into the menu */
  main.vortex h1, main.astrology h1 { flex: 1 0 100%; line-height: 36px; padding-right: 96px; box-sizing: border-box }
  main.vortex header, main.astrology header { row-gap: 8px }
  main.vortex header nav, main.astrology header nav { display: none }
  body.app-menu main.vortex header nav, body.app-menu main.astrology header nav {
    display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px;
    position: absolute; top: 56px; right: 16px; z-index: 5; width: min(220px, calc(100vw - 32px)); max-height: calc(100dvh - 200px); overflow-y: auto;
    padding: 8px; box-sizing: border-box; border: 1px solid rgba(223, 230, 255, .25); border-radius: 16px; background: #1c1b19;
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7)
  }
  body.app-menu main header nav button { text-align: left; min-height: 40px; padding: 8px 14px; border-color: transparent; background: none }
  body.app-menu main header nav button[aria-pressed="true"] { border-color: currentColor }
  /* the eye does this now */
  main header nav button[aria-label^="hide the buttons"] { display: none }
}