/* ============================================================================
   moonmars-frame.css — the one frame that every MoonMars app wears.

   CANONICAL SOURCE: moonmars/shared/moonmars-frame.css
   The copies in moonbase, moonmarsmuseum and moonqr are written by
   moonmars/tools/sync-frame.sh. Edit this file, run the script, never the
   other way round.

   Design Book 2/6 — "One frame, every app":
     · top bar    ☾ (always to moonmars.com) · wordmark ▾ (universe panel) ·
                  profile (top right, 2px ring in the app's signature colour).
                  Geen terugkeer-lipje: de ☾ zegt al waar je heen kunt, en een
                  balkje dat vertelt waar je vandaan kwam voegt niets toe.
     · app menu   always exactly five slots; four belong to the app, the centre
                  belongs to the brand and is that app's ONE action button
     · responsive ≥900px AND pointer:fine — the bar leaves the bottom and the
                  same five items move into the top bar. Touch = app, mouse =
                  website; same content, one codebase.

   The app sets --mm-signature; everything else is shared. The frame never
   paints large surfaces in the signature colour — only the active tab, the
   profile ring and small accents.
   ========================================================================= */

:root {
  --mm-ink:       #0E0E0E;
  --mm-muted:     #6B6B6B;
  --mm-line:      #E6E3DA;
  --mm-surface:   #F4F2EC;
  --mm-bg:        #FFFFFF;
  --mm-gold:      #C8A24C;
  --mm-orange:    #E97F41;
  --mm-pink:      #EB70C0;
  --mm-purple:    #864EE5;
  --mm-teal:      #38A6BF;
  --mm-font:      'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --mm-signature: var(--mm-ink);   /* every app overrides this */
  --mm-topbar-h:  56px;
  --mm-tabbar-h:  calc(78px + env(safe-area-inset-bottom, 0px));
}

/* The bar floats over the page, so the last thing on it needs room to clear. */
body.mm-has-tabbar { padding-bottom: var(--mm-tabbar-h); }

/* ── TOP BAR ─────────────────────────────────────────────────────────────── */

.mm-topbar {
  position: sticky; top: 0; z-index: 9000;
  display: flex; align-items: center; gap: 14px;
  height: var(--mm-topbar-h);
  padding: 0 max(14px, env(safe-area-inset-left, 0px)) 0 max(14px, env(safe-area-inset-right, 0px));
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--mm-line);
  font-family: var(--mm-font);
}

/* ☾ — the universal way home. On moonmars.com it goes to the front page; on
   every other site it leaves for moonmars.com. One tap, from anywhere. */
.mm-home {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--mm-surface);
  flex: none; transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.mm-home:hover { background: #E4E0D4; }
.mm-home img { width: 22px; height: 22px; object-fit: contain; display: block; }

/* The site's own name, with the chevron that opens the universe. */
.mm-wordmark {
  display: flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 6px 4px;
  font-family: inherit; font-size: .82rem; font-weight: 800;
  letter-spacing: .03em; text-transform: uppercase; color: var(--mm-ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Open staat de naam er donkerder bij; dat is genoeg om te zien dat er iets
   openstaat, zonder een pijltje dat op een stofje lijkt. */
.mm-wordmark[aria-expanded="true"] { opacity: .55; }

/* Profile — always top right, never in the bottom menu. */
.mm-profile {
  margin-left: auto; flex: none; position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--mm-signature); color: var(--mm-signature);
  background: var(--mm-bg);
  display: grid; place-items: center; padding: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .18s;
}
.mm-profile:active { transform: scale(.94); }
.mm-profile svg {
  width: 17px; height: 17px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.mm-profile .mm-dot {
  position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--mm-gold); border: 2px solid var(--mm-bg);
  display: none;
}
body.mm-signedin .mm-profile .mm-dot { display: block; }

/* ── UNIVERSE PANEL ──────────────────────────────────────────────────────── */
/* One component, six apps, identical on every site. Bottom sheet on touch,
   dropdown under the wordmark on a pointer. */

.mm-scrim {
  position: fixed; inset: 0; z-index: 9400;
  background: rgba(14, 14, 14, .35);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.mm-scrim.mm-on { opacity: 1; pointer-events: auto; }

.mm-universe {
  position: fixed; z-index: 9500;
  left: 8px; right: 8px; bottom: 8px;
  background: var(--mm-bg);
  border-radius: 24px;
  padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .35);
  transform: translateY(115%);
  transition: transform .32s cubic-bezier(.3, .9, .3, 1);
  font-family: var(--mm-font);
  max-height: 80vh; overflow-y: auto;
}
.mm-universe.mm-on { transform: none; }

.mm-universe-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 8px 10px;
}
.mm-universe-head b {
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--mm-muted); font-weight: 700;
}
.mm-universe-close {
  background: none; border: 0; padding: 2px 6px; cursor: pointer;
  color: var(--mm-muted); font-size: .95rem; font-family: inherit; line-height: 1;
}

.mm-uitem {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 10px; border-radius: 12px;
  text-decoration: none; color: var(--mm-ink);
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.mm-uitem:hover { background: var(--mm-surface); }
.mm-uitem i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.mm-uitem b { font-size: .82rem; font-weight: 700; }
.mm-uitem small {
  margin-left: auto; text-align: right;
  font-size: .66rem; color: var(--mm-muted);
}
.mm-uitem.mm-here { background: var(--mm-surface); }
.mm-uitem.mm-here small { color: var(--mm-ink); font-weight: 700; }
/* Not built yet, so not a link — a dot and a word, nothing to tap. */
.mm-uitem.mm-soon { opacity: .55; cursor: default; }
.mm-uitem.mm-soon:hover { background: none; }
.mm-udivider { height: 1px; background: var(--mm-line); margin: 6px 10px; }

/* ── APP MENU · FIVE SLOTS ───────────────────────────────────────────────── */
/* Four slots belong to the app, the centre belongs to the brand and is always
   the app's one action — never plain navigation, never a cross-site link. */

.mm-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8800;
  display: flex;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid rgba(28, 29, 34, .12);
  padding: 8px max(6px, env(safe-area-inset-left, 0px))
           calc(10px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-right, 0px));
  font-family: var(--mm-font);
}
.mm-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 9px 2px 0;
  background: none; border: 0; text-decoration: none;
  color: #8A8A8A; cursor: pointer;
  font-family: inherit; transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}
.mm-tab svg {
  width: 24px; height: 24px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.mm-tab span {
  font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 700; white-space: nowrap;
}
.mm-tab.mm-active { color: var(--mm-signature); }
.mm-tab:active { transform: scale(.94); }

/* The centre: the real crescent, drop shadow, no label. */
.mm-tab-action { justify-content: center; padding-top: 0; }
.mm-tab-action img {
  width: 38px; height: 38px; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .18));
}

/* ── DESKTOP · the five slots move up ────────────────────────────────────── */
/* Width alone is not enough: an iPad in landscape is wide but still an app in
   your hands. Only a real pointer turns this into a website. */

@media (min-width: 900px) and (pointer: fine) {
  body.mm-has-tabbar { padding-bottom: 0; }
  .mm-tabbar { display: none; }

  .mm-topbar { height: 62px; gap: 20px; }
  .mm-topnav { display: flex; align-items: center; gap: 26px; margin-left: 22px; }
  .mm-topnav a, .mm-topnav button {
    background: none; border: 0; padding: 6px 0; cursor: pointer;
    font-family: inherit; font-size: .72rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--mm-muted); text-decoration: none;
    border-bottom: 2px solid transparent; transition: color .2s;
  }
  .mm-topnav a:hover, .mm-topnav button:hover { color: var(--mm-ink); }
  .mm-topnav a.mm-active, .mm-topnav button.mm-active {
    color: var(--mm-signature); border-bottom-color: var(--mm-signature);
  }
  /* The action keeps its crescent up here too — it is still the one thing we
     most want you to do, not another word in a row of words. */
  .mm-topnav .mm-topnav-action {
    display: flex; align-items: center; gap: 8px;
    color: var(--mm-ink); font-weight: 700;
  }
  .mm-topnav .mm-topnav-action img {
    width: 26px; height: 26px; object-fit: contain;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .18));
  }

  /* Dropdown under the wordmark rather than a sheet from the floor. */
  .mm-universe {
    left: 14px; right: auto; bottom: auto;
    top: calc(var(--mm-topbar-h) + 6px);
    width: 320px; max-height: none;
    border-radius: 16px;
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .38);
    transform: translateY(-8px) scale(.98); opacity: 0;
    transition: opacity .18s, transform .18s;
  }
  .mm-universe.mm-on { transform: none; opacity: 1; }
  .mm-scrim { background: rgba(14, 14, 14, .12); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (max-width: 899px), (pointer: coarse) {
  .mm-topnav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-universe, .mm-scrim { transition: opacity .15s linear; }
  .mm-universe { transform: none; }
  .mm-universe:not(.mm-on) { opacity: 0; pointer-events: none; }
}