/* =====================================================================
   Phone bottom bar: Home, Spy, New check, Ideas, More.
   "More" opens the full side menu, so nothing is lost — the bar is just
   the five places people go most. Hidden on wider screens.
   ===================================================================== */

.mtab { display: none; }

@media (max-width: 760px) {
  body.app { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

  .mtab {
    position: fixed; z-index: 42;
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    height: 64px; padding: 0 6px;
    background: var(--navy); color: #fff;
    border-radius: 22px;
    box-shadow: 0 2px 6px rgba(15, 14, 30, .18), 0 16px 34px -12px rgba(15, 14, 30, .45);
  }

  body.app .mtab .mtab-i {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    height: 56px; padding: 0; margin: 0;
    background: none; border: 0; box-shadow: none; border-radius: 16px;
    color: rgba(255, 255, 255, .62);
    font: 500 10.5px var(--sans); letter-spacing: .01em;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, transform 120ms ease;
  }
  .mtab-i svg { width: 21px; height: 21px; padding: 3px 12px; box-sizing: content-box; border-radius: 999px;
    fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
    transition: background-color 160ms ease; }
  .mtab-i:active { transform: scale(.94); }

  /* Current page: brighter label, soft violet pill behind the icon. */
  body.app .mtab .mtab-i.nav-on { color: #fff; }
  .mtab-i.nav-on svg { background: rgba(181, 157, 240, .24); color: #DCCFFB; }

  /* New check: a raised violet button in the middle. */
  .mtab-new b { display: grid; place-items: center; width: 50px; height: 50px; margin-top: -26px;
    border-radius: 50%; background: var(--violet); color: #fff;
    box-shadow: 0 0 0 5px var(--page), 0 10px 22px -8px rgba(122, 91, 192, .8); }
  .mtab-new b svg { width: 22px; height: 22px; stroke-width: 2; padding: 0; background: none; color: #fff; }
  .mtab-new.nav-on b svg { background: none; }
  body.app .mtab .mtab-new.nav-on { color: #fff; }

  .mtab-dot { position: absolute; top: 8px; left: calc(50% + 8px); width: 8px; height: 8px;
    border-radius: 50%; background: #F06A6A; box-shadow: 0 0 0 2px var(--navy); }

  @media (prefers-reduced-motion: reduce) { .mtab-i, .mtab-i svg { transition: none; } }
}

@media print { .mtab { display: none !important; } }

/* The bottom bar already has New check, Ideas and Spy, so the page-top
   shortcut buttons would only repeat it on a phone. */
@media (max-width: 760px) {
  body.app #dashBody .db-head .db-actions { display: none; }
  body.app .rp-actions [data-rp="again"] { display: none; }
}