/* App shell on phones: a 56px top bar (logo, or back arrow + title on inner pages) and a labelled five-item bottom bar.
   This file owns the bottom bar; no other stylesheet styles .tabbar. */
:root { --hdr-h: 68px; --tab-h: 60px; --tab-space: calc(var(--tab-h) + env(safe-area-inset-bottom)); }

/* Back arrows: the arrow icon points forward, so it is mirrored in LTR and left as is in RTL */
.ic.back { transform: scaleX(-1); }
[dir="rtl"] .ic.back { transform: none; }

.bar-back { display: none; }
.tabbar { display: none; }

@media (max-width: 960px) {
  :root { --hdr-h: 56px; }
  .site-header .nav { gap: .5rem; height: calc(var(--hdr-h) - 1px); }
  .site-header .nav-actions { gap: .15rem; margin-inline-start: auto; }
  .site-header .nav-actions .icon-btn { width: 44px; height: 44px; border-radius: 50%; }
  .site-header .mobile-nav .avatar { --s: 32px !important; }
  .site-header .icon-btn:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }

  .bar-back { display: flex; align-items: center; gap: .15rem; flex: 1; min-width: 0; margin-inline-start: -.6rem; }
  .bar-back .icon-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; box-shadow: none; color: var(--ink); }
  .bar-back .icon-btn:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
  .bar-title { min-width: 0; font: 600 1.05rem/1.25 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .has-back .logo { display: none; }
  body:has(.site-header.has-back) .page-back { display: none !important; }

  /* Bottom bar */
  .tabbar { position: fixed; inset: auto 0 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    height: var(--tab-space); padding: 0 .25rem env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 96%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -12px rgba(10, 20, 40, .25); }
  .tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; height: var(--tab-h); min-width: 0;
    color: var(--muted); font: 500 11px/1.2 var(--f-display); text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .tab > span:last-child { max-width: 100%; padding-inline: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab > svg, .tab > .avatar, .tabbar-plus { transition: transform .15s ease; }
  .tab:active > svg, .tab:active > .avatar, .tabbar-new:active .tabbar-plus { transform: scale(.88); }
  .tab.on { color: var(--accent); font-weight: 700; }
  .tab.on > svg { stroke-width: 2.25; }
  .tab.on > svg > * { fill: currentColor; fill-opacity: .2; }
  .tab-me .avatar { --s: 26px !important; font-size: .62rem; }
  .tab-me.on .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

  /* Create: a raised 56px circle that sits above the bar, above any badge or overlay in the bar */
  .tabbar-new { align-content: end; padding-bottom: 7px; color: var(--ink-2); z-index: 1; }
  .tabbar-plus { display: grid; place-items: center; width: 56px; height: 56px; margin-top: -26px; border-radius: 50%;
    background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--surface), 0 10px 20px -8px rgba(21, 101, 216, .6); }
  .tabbar-new:hover .tabbar-plus { background: var(--accent-2); }

  /* 24px of clear space under the last thing on every page, the bar and the safe area included */
  body:has(.tabbar) { padding-bottom: calc(var(--tab-space) + 24px); }
  body:has(.tabbar) .site-footer { display: none; }
  /* No floating button over the cards: tapping the current tab, or the title on inner pages, goes back to the top */
  .to-top, .to-top.show { display: none; }
  .bar-title { cursor: pointer; }
  body .toasts, body[data-me] .toasts { bottom: calc(var(--tab-space) + 16px); }
  .qs-list, .drawer-body { padding-bottom: 24px; }

  /* The "built with" badge sits at the top of the page and scrolls away, never over the bottom bar */
  #__uttra-watermark { position: absolute !important; top: calc(var(--hdr-h) + 8px) !important; bottom: auto !important;
    left: auto !important; right: 8px !important; transform: none !important; z-index: 30 !important; }
}

@media (min-width: 961px) and (max-width: 1100px) {
  .site-header .mobile-nav .avatar { --s: 34px !important; }
}

html[data-theme="dark"] .tabbar { box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .tab > svg, .tab > .avatar, .tabbar-plus { transition: none; } }