/* Persistent navigation: a quiet floating capsule with one moving active pill. */
#bottom-nav-root[hidden],
.is-lesson #bottom-nav-root,
.is-onboarding #bottom-nav-root { display: none !important; }

.mobile-nav.gooey-nav { display: none; }
.gooey-nav__canvas { display: none; }

@media (max-width: 980px) {
  .mobile-nav.gooey-nav {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    display: block;
    padding: 8px 16px max(12px, env(safe-area-inset-bottom));
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  .gooey-nav__stage {
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    height: 72px;
    margin: 0 auto;
    padding: 5px;
    border: 1px solid rgb(36 43 71 / .11);
    border-radius: 999px;
    background: rgb(255 252 247 / .96);
    box-shadow: 0 4px 20px rgb(36 43 71 / .025);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: auto;
  }

  .gooey-nav__fallback {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    display: none;
    width: 0;
    height: 0;
    border-radius: 999px;
    background: var(--ink);
    pointer-events: none;
    transition: none;
  }

  .gooey-nav.has-gooey-fallback .gooey-nav__fallback { display: block; }

  .gooey-nav__links {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 2px;
    width: 100%;
    height: 100%;
  }

  .gooey-nav .nav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 44px;
    height: 100%;
    padding: 6px 2px;
    border-radius: 999px;
    color: var(--muted);
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    transform: none;
    transition: color .22s;
    -webkit-tap-highlight-color: transparent;
  }

  .gooey-nav .nav-item > .icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    stroke-width: 1.65;
  }

  .gooey-nav .nav-label { display: block; max-width: 100%; white-space: nowrap; }
  .gooey-nav .nav-item:hover { color: var(--ink); background: transparent; transform: none; }
  .gooey-nav .nav-item.active,
  .gooey-nav .nav-item[aria-current="page"] { color: var(--white); background: var(--ink); }

  .gooey-nav.has-gooey-fallback .nav-item.active,
  .gooey-nav.has-gooey-fallback .nav-item[aria-current="page"] { background: transparent; }
  .gooey-nav .nav-item[data-nav-key="today"][aria-current="page"] > .icon { fill: currentColor; }

  .gooey-nav .nav-item:focus-visible { z-index: 2; outline: 2px solid var(--focus); outline-offset: 2px; }

  .gooey-nav .nav-count {
    position: absolute;
    top: 3px;
    left: calc(50% + 9px);
    display: inline-grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0 3px;
    border: 1px solid var(--white);
    border-radius: 999px;
    color: var(--white);
    background: var(--ink);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
  }
  .gooey-nav .nav-item[aria-current="page"] .nav-count { color: var(--ink); background: var(--white); }
  .gooey-nav .nav-count[hidden] { display: none; }

  .workspace { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(105px + env(safe-area-inset-bottom)); }
  .is-lesson .toast, .is-onboarding .toast { bottom: max(24px, env(safe-area-inset-bottom)); }
}

@media (max-width: 520px) {
  .mobile-nav.gooey-nav { padding-left: 12px; padding-right: 12px; }
  .gooey-nav .nav-item { font-size: 11px; }
}

@media (max-width: 360px) {
  .mobile-nav.gooey-nav { padding-left: 8px; padding-right: 8px; }
  .gooey-nav__stage { padding: 4px; }
  .gooey-nav .nav-item { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .gooey-nav__fallback, .gooey-nav .nav-item { transition: none; }
}