/* App shell: skip link, phone tab bar, 404 card, message menu, viewer keys. Loaded after studio.css. */
:root { --tabbar-h: 60px; }

.skip-link { position: fixed; left: var(--sp-3); top: var(--sp-3); z-index: 100; transform: translateY(-200%); background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: var(--sp-3) var(--sp-4); min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; box-shadow: var(--shadow-block); }
.skip-link:focus { transform: none; }
#app:focus { outline: none; }

.not-found { text-align: center; }
.not-found .empty-art { width: 160px; height: 160px; }
.not-found .row.center-row { justify-content: center; gap: var(--sp-3); }
.btn.big { min-height: 52px; padding: 12px 24px; font-size: 1rem; flex: 1 1 140px; }

.msg-menu { position: relative; display: inline-block; margin-top: var(--sp-1); }
.msg-menu-btn { min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--muted); font: 700 1.25rem/1 var(--font-body); cursor: pointer; letter-spacing: .1em; }
.msg-menu-btn:hover { color: var(--text); }
.msg-menu-list { position: absolute; left: 0; bottom: 100%; z-index: 20; min-width: 160px; background: var(--surface); border: var(--border-w) solid var(--border-strong); box-shadow: var(--shadow-block); display: flex; flex-direction: column; }
.msg-menu-list[hidden] { display: none; }
.msg-menu-item { background: none; border: 0; color: var(--text); text-align: left; padding: var(--sp-3) var(--sp-4); min-height: 44px; font: 600 .875rem/1.2 var(--font-body); cursor: pointer; }
.msg-menu-item:hover { background: var(--surface-2); }

.viewer-keys { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: .8rem; border-top: var(--border-w) solid var(--border); background: var(--surface); }

.account-extras { display: none; }

@media (max-width: 640px) {
  /* Phones: top bar = mark + credits; the five pages become a bottom tab bar (UX review 18). */
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .top { flex-wrap: nowrap; }
  .top .only-desktop { display: none; }
  .top .credits { margin-left: auto; }
  .top nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; order: 0; flex: none; flex-wrap: nowrap; overflow: visible; gap: 0; background: var(--surface); border-top: var(--border-w) solid var(--border-strong); padding-bottom: env(safe-area-inset-bottom); }
  .top nav a { flex: 1 1 0; min-width: 0; min-height: var(--tabbar-h); justify-content: center; text-align: center; padding: var(--sp-1) 2px; font-size: .72rem; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; border-bottom: 0; border-top: 3px solid transparent; }
  .top nav a[aria-current="page"] { border-top-color: var(--accent); color: var(--accent); }
  /* the Studio fills the viewport: keep the composer above the tab bar (body padding is inside its 100dvh) */
  .toasts { top: 64px; }
  .account-extras { display: block; margin-top: var(--sp-4); }
  .account-extras select { width: 100%; min-height: 44px; }
}