html.poli21-static-app {
  --p21-app-tabbar-space: calc(68px + env(safe-area-inset-bottom, 0px));
}

html.poli21-static-app body {
  padding-bottom: var(--p21-app-tabbar-space) !important;
}

.p21-app-tabbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-sizing: border-box;
  min-height: 56px;
  border-top: 1px solid rgba(16, 16, 18, 0.1);
  padding: 6px max(8px, env(safe-area-inset-right, 0px))
    calc(6px + env(safe-area-inset-bottom, 0px))
    max(8px, env(safe-area-inset-left, 0px));
  background: #fff;
  box-shadow: 0 -8px 28px rgba(16, 16, 18, 0.055);
  font-family: inherit;
}

.p21-app-tabbar__item {
  display: flex;
  min-width: 44px;
  min-height: 44px;
  appearance: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 16px;
  padding: 3px 5px;
  color: #66666d;
  background: transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.p21-app-tabbar__item:active {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(0.94);
}

.p21-app-tabbar__item[aria-current="page"] {
  color: #006fc9;
  background: #eef7ff;
  box-shadow: inset 0 -3px 0 currentColor;
}

.p21-app-tabbar__item[data-pending="true"] {
  color: #006fc9;
  background: #eef7ff;
  cursor: progress;
}

.p21-app-tabbar__stack {
  position: relative;
  display: flex;
  min-width: 52px;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}

.p21-app-tabbar__item[data-pending="true"] .p21-app-tabbar__icon {
  opacity: 0.18;
}

.p21-app-tabbar__item[data-pending="true"] .p21-app-tabbar__stack::after {
  position: absolute;
  top: 1px;
  left: 50%;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
  animation: p21-app-tabbar-spin 0.72s linear infinite;
}

.p21-app-tabbar__status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes p21-app-tabbar-spin {
  to { transform: translateX(-50%) rotate(360deg); }
}

.p21-app-tabbar__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--p21-app-icon) center / contain no-repeat;
  mask: var(--p21-app-icon) center / contain no-repeat;
}

.p21-app-tabbar__icon--back {
  --p21-app-icon: url("/app-nav/back.svg");
}

.p21-app-tabbar[dir="rtl"] .p21-app-tabbar__icon--back {
  transform: scaleX(-1);
}

.p21-app-tabbar__icon--home {
  --p21-app-icon: url("/app-nav/home.svg");
}

.p21-app-tabbar__icon--book {
  --p21-app-icon: url("/app-nav/book.svg");
}

.p21-app-tabbar__icon--plus {
  --p21-app-icon: url("/app-nav/plus.svg");
}

.p21-app-tabbar__icon--more {
  --p21-app-icon: url("/app-nav/more.svg");
}

.p21-app-more[hidden] {
  display: none;
}

.p21-app-more {
  position: fixed;
  inset: 0;
  z-index: 400;
  font-family: inherit;
}

.p21-app-more__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 18, 0.28);
}

.p21-app-more__dialog {
  position: absolute;
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  max-height: calc(100vh - var(--p21-app-tabbar-space) - 24px);
  max-height: calc(100dvh - var(--p21-app-tabbar-space) - 24px);
  max-width: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-inline: auto;
  box-sizing: border-box;
  border: 1px solid rgba(16, 16, 18, 0.1);
  border-radius: 24px;
  padding: 14px;
  color: #161719;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16, 16, 18, 0.24);
}

.p21-app-more__title {
  margin: 0;
  padding: 4px 10px 10px;
  font-size: 14px;
  font-weight: 800;
}

.p21-app-more__link,
.p21-app-more__close {
  display: flex;
  min-height: 44px;
  width: 100%;
  align-items: center;
  box-sizing: border-box;
  border: 0;
  border-radius: 13px;
  padding: 10px 12px;
  color: #161719;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: start;
  text-decoration: none;
}

.p21-app-more__link:active,
.p21-app-more__close:active {
  background: rgba(0, 0, 0, 0.05);
}

.p21-app-more__close {
  justify-content: center;
  margin-top: 6px;
  border-top: 1px solid rgba(16, 16, 18, 0.08);
  color: #66666d;
}

/* The visible bottom Back replaces these module-owned upper Back controls.
   Visibility keeps established header geometry stable while removing the
   duplicate action from pointer, keyboard and accessibility navigation. */
html.poli21-static-app .p21-app-back-source,
html.poli21-static-app [data-poli21-relocated-back] {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.poli21-static-app[data-poli21-edu-module="conditionals-switchboard"]
  .action-dock > .p21-app-back-source,
html.poli21-static-app[data-poli21-edu-module="relative-clauses-lab"]
  .action-dock > .p21-app-back-source,
html.poli21-static-app[data-poli21-edu-module="induction-lab"]
  .action-dock > .p21-app-back-source {
  display: none !important;
}

html.poli21-static-app[data-poli21-edu-module="conditionals-switchboard"]
  .action-dock > #primary-action,
html.poli21-static-app[data-poli21-edu-module="relative-clauses-lab"]
  .action-dock > #primary-action,
html.poli21-static-app[data-poli21-edu-module="induction-lab"]
  .action-dock > #primary-action {
  grid-column: 1 / -1;
}

/* Immersive modules own their own viewport or sticky action dock, so body
   padding alone cannot reserve space. Every exception below consumes the same
   shell token; future tab-bar sizing therefore has one source of truth. */
html.poli21-static-app[data-poli21-edu-module="book-atlas"] .app,
html.poli21-static-app[data-poli21-edu-module="passage-coach"] .app,
html.poli21-static-app[data-poli21-edu-module="passive-machine"] .app,
html.poli21-static-app[data-poli21-edu-module="sound-lab"] .app,
html.poli21-static-app[data-poli21-edu-module="conditionals-lab"] .app {
  height: calc(100vh - var(--p21-app-tabbar-space)) !important;
  height: calc(100dvh - var(--p21-app-tabbar-space)) !important;
}

html.poli21-static-app[data-poli21-edu-module="relative-clauses-lab"] .action-dock,
html.poli21-static-app[data-poli21-edu-module="conditionals-switchboard"] .action-dock.is-ready {
  bottom: calc(10px + var(--p21-app-tabbar-space)) !important;
}

html.poli21-static-app[data-poli21-edu-module="relative-clauses"] .rc-actions {
  inset-block-end: var(--p21-app-tabbar-space) !important;
}

html.poli21-static-app[data-poli21-edu-module="induction-lab"] .lesson {
  height: calc(100vh - 62px - var(--p21-app-tabbar-space)) !important;
  height: calc(100dvh - 62px - var(--p21-app-tabbar-space)) !important;
  min-height: calc(100vh - 62px - var(--p21-app-tabbar-space)) !important;
  min-height: calc(100dvh - 62px - var(--p21-app-tabbar-space)) !important;
}

html.poli21-static-app[data-poli21-edu-module="birkari"] .nav-bar {
  bottom: var(--p21-app-tabbar-space) !important;
}

/* A module-owned modal temporarily owns the whole viewport. Let its backdrop
   and focus contract be complete instead of leaving global navigation above
   it or reachable behind it. */
html.poli21-static-app[data-poli21-edu-module="birkari"]:has(
    .formula-zoom-overlay.open,
    .menu-overlay.open,
    .glossary-drawer-overlay.open,
    .unlock-sheet-wrap.open,
    .tour-wrap.open
  )
  .p21-app-tabbar,
html.poli21-static-app[data-poli21-edu-module="birkari"]
  body.qnav-open
  .p21-app-tabbar {
  visibility: hidden;
  pointer-events: none;
}

.p21-app-tabbar--module-modal {
  visibility: hidden;
  pointer-events: none;
}

html.poli21-static-app .reader-nav {
  bottom: calc(2px + var(--p21-app-tabbar-space)) !important;
}

html.poli21-static-app .protection-toast {
  bottom: calc(10px + var(--p21-app-tabbar-space)) !important;
}

@media (max-width: 339px) {
  .p21-app-tabbar__stack {
    min-width: 46px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p21-app-tabbar__item:active {
    transform: none;
  }

  .p21-app-tabbar__item[data-pending="true"] .p21-app-tabbar__stack::after {
    border-color: currentColor;
    animation: none;
  }
}