/* Phase 64: low-risk app-wide polish found during desktop/mobile audit. */

:root {
  --phase64-focus: rgba(35, 101, 213, .32);
}

/* Make icon-only controls feel deliberately touchable without changing layout. */
header :where(button, [role="button"], .icon-btn, .tab-scroll-btn),
#project-nav :where(button, [role="button"], .nav-tab),
#bottom-nav :where(button, [role="button"], .bottom-tab, .bottom-nav-btn) {
  touch-action: manipulation;
}

header :where(button, [role="button"], .icon-btn, .tab-scroll-btn):focus-visible,
#project-nav :where(button, [role="button"], .nav-tab):focus-visible,
#bottom-nav :where(button, [role="button"], .bottom-tab, .bottom-nav-btn):focus-visible,
#project-hub :where(button, [role="button"], input, select):focus-visible {
  outline: 3px solid var(--phase64-focus) !important;
  outline-offset: 3px !important;
}

/* Avoid the home empty-state feeling swallowed by mobile bottom navigation. */
#project-hub .hub-empty {
  isolation: isolate;
}

@media (min-width: 761px) {
  header :where(.tab-scroll-btn, .icon-btn),
  #project-nav .nav-tab {
    min-height: 34px;
  }
}

@media (max-width: 760px) {
  body.phase61-mobile-ux #project-hub {
    padding-bottom: calc(176px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(190px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.phase61-mobile-ux #project-hub .hub-empty {
    min-height: 260px;
    margin: 56px auto calc(142px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 26px 20px;
    width: min(84vw, 360px);
    border-radius: 28px;
    background: rgba(255, 248, 234, .34);
    border: 1px solid rgba(118, 84, 39, .10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  }

  body.phase61-mobile-ux #project-hub .hub-empty span {
    font-size: 3.4rem;
    filter: drop-shadow(0 10px 16px rgba(151, 98, 19, .18));
  }

  body.phase61-mobile-ux #project-hub .hub-empty,
  body.phase61-mobile-ux #project-hub .hub-empty * {
    color: rgba(75, 55, 31, .62) !important;
  }

  body.phase61-mobile-ux header :where(button, [role="button"], .icon-btn, .tab-scroll-btn),
  body.phase61-mobile-ux #bottom-nav :where(button, [role="button"], .bottom-tab, .bottom-nav-btn) {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body.phase61-mobile-ux #bottom-nav {
    z-index: 5200;
  }

  body.phase61-mobile-ux #bottom-nav .bottom-tab .btab-label {
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.phase61-mobile-ux :where(.modal, .final-modal-card, [role="dialog"], .psych8q-window) {
    max-width: 100vw !important;
  }
}