/**
 * FineNights global UI polish — selection, tap/focus, touch targets,
 * safe-area, empty states, motion. Load after fn-tokens / fn-components / fn-shell.
 */

/* —— 1. Selection: chrome UI not selectable; forms & long copy ok —— */
html,
body,
.fn-body,
.fn-app,
.fn-header,
.fn-bottom-nav,
.fn-explore-page,
.account-page,
.public-profile-page,
.fn-btn,
.fn-icon-btn,
.fn-chip,
.fn-tab,
.fn-cat-btn,
.fn-badge,
.fn-header-link,
.fn-bottom-nav-item,
.fn-city-btn,
.fn-brand,
.account-nav-dock,
.account-nav-dock-item,
.topbar,
.topbar-actions,
button,
[role="button"],
.fn-view-toggle,
.fn-view-toggle-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
select,
[contenteditable="true"],
.fn-selectable,
.fn-prose,
.fn-review-card-text,
.account-empty-state-lead,
.venue-card-desc,
.venue-popup-description,
.public-bio,
.fn-meetup-body,
.fn-catalog-lead,
.search-input,
.region-picker-search,
.fn-search input {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* —— 2. Tap highlight + focus rings that match rounded chrome —— */
html {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
.fn-btn,
.fn-icon-btn,
.fn-chip,
.fn-cat-btn,
.fn-tab,
.fn-header-link,
.fn-bottom-nav-item,
.fn-city-btn,
.fn-view-toggle-btn,
.account-nav-dock-item,
.geo-region-btn,
.geo-locate-btn,
.search-box,
.search-close-btn,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.explore-venue-primary-cta,
.explore-venue-secondary-btn,
.explore-venue-more-item,
.explore-venue-secondary .venue-engage-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.fn-btn,
.fn-icon-btn,
.fn-chip,
.fn-cat-btn,
.fn-view-toggle-btn,
.fn-city-btn,
.fn-header-link,
.fn-bottom-nav-item,
.account-nav-dock-item,
.geo-region-btn,
.geo-locate-btn,
.search-box-compact,
.search-close-btn,
.fn-home-pillar,
.fn-home-quick-cta {
  overflow: hidden;
  outline: none;
}

.fn-btn:focus:not(:focus-visible),
.fn-icon-btn:focus:not(:focus-visible),
.fn-chip:focus:not(:focus-visible),
.fn-cat-btn:focus:not(:focus-visible),
.fn-tab:focus:not(:focus-visible),
.fn-header-link:focus:not(:focus-visible),
.fn-bottom-nav-item:focus:not(:focus-visible),
.fn-city-btn:focus:not(:focus-visible),
.fn-view-toggle-btn:focus:not(:focus-visible),
.account-nav-dock-item:focus:not(:focus-visible),
.geo-region-btn:focus:not(:focus-visible),
.geo-locate-btn:focus:not(:focus-visible),
.search-close-btn:focus:not(:focus-visible),
.fn-home-pillar:focus:not(:focus-visible),
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.fn-btn:focus-visible,
.fn-icon-btn:focus-visible,
.fn-chip:focus-visible,
.fn-cat-btn:focus-visible,
.fn-view-toggle-btn:focus-visible,
.fn-city-btn:focus-visible,
.fn-header-link:focus-visible,
.fn-home-pillar:focus-visible,
.fn-home-quick-cta:focus-visible,
.geo-region-btn:focus-visible,
.geo-locate-btn:focus-visible,
.search-close-btn:focus-visible,
.account-nav-dock-item:focus-visible,
.fn-bottom-nav-item:focus-visible {
  outline: 2px solid rgba(139, 92, 246, 0.85);
  outline-offset: 2px;
}

.fn-btn-primary:focus-visible {
  outline-color: #fff;
  outline-offset: 3px;
}

select:focus-visible,
.fn-select:focus-visible {
  outline: none;
  border-color: rgba(255, 138, 0, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 138, 0, 0.16);
}

/* —— 3. Touch targets ≥44px on primary mobile controls —— */
@media (max-width: 959px) {
  .fn-icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .fn-city-btn {
    min-height: 44px;
  }

  .fn-chip {
    min-height: 40px;
  }

  .fn-btn {
    min-height: 44px;
  }

  .explore-venue-footer-engagement .explore-venue-secondary-btn,
  .explore-venue-footer-engagement .venue-engage-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .fn-header-inner {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* —— 4. Safe-area: sticky chrome & sticky footers —— */
.fn-header {
  padding-top: env(safe-area-inset-top, 0px);
}

.fn-bottom-nav {
  padding-left: max(4px, env(safe-area-inset-left, 0px));
  padding-right: max(4px, env(safe-area-inset-right, 0px));
}

.fn-toast {
  bottom: calc(var(--fn-bottom-nav-h, 64px) + var(--fn-safe-bottom, 0px) + 16px);
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
}

body.fn-sheet-open,
html.fn-sheet-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

body.fn-sheet-open .fn-main,
body.fn-sheet-open .account-main,
body.fn-sheet-open .public-main {
  overscroll-behavior: none;
}

/* Modal sheets cover chrome; restore nav taps when no sheet lock is active. */
body.fn-sheet-open .fn-bottom-nav {
  pointer-events: none;
}

/* —— 5. Typography hierarchy / readable line length —— */
.fn-prose,
.fn-review-card-text,
.account-empty-state-lead,
.fn-catalog-lead,
.fn-meetup-body p,
.public-bio {
  max-width: 42rem;
  line-height: 1.55;
}

@media (min-width: 960px) {
  .fn-main > .fn-home,
  .fn-main > .fn-catalog,
  .fn-main > .fn-meetups,
  .fn-main > .fn-compare {
    font-size: 15px;
  }

  .fn-empty,
  .account-empty-state-lead {
    font-size: 15px;
    line-height: 1.55;
  }
}

@media (max-width: 959px) {
  .fn-empty,
  .account-empty-state-lead {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* —— 7. Unified empty / loading —— */
.fn-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 32px 20px;
  text-align: center;
  color: var(--fn-text-secondary, #a7abb2);
  font-size: 14px;
  line-height: 1.5;
  border: 1px dashed rgba(255, 138, 0, 0.18);
  border-radius: var(--fn-radius, 14px);
  background: rgba(255, 138, 0, 0.03);
}

.fn-empty-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--fn-text, #fff);
}

.fn-empty-lead {
  margin: 0;
  max-width: 26rem;
  color: var(--fn-text-muted, #7a7f88);
}

.fn-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--fn-radius-control, 6px);
  background: var(--fn-orange-soft, rgba(255, 138, 0, 0.16));
  color: var(--fn-orange, #ff8a00);
}

.fn-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}

.fn-loading-block {
  display: grid;
  gap: 10px;
  padding: 18px;
}

.fn-loading-line {
  height: 12px;
  border-radius: 6px;
}

.fn-loading-line.is-short {
  width: 42%;
}

.fn-loading-line.is-med {
  width: 68%;
}

/* Align home empty copy with shared empty language */
.fn-home-empty {
  margin: 0;
  padding: 20px 14px;
  text-align: center;
  color: var(--fn-text-muted, #7a7f88);
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--fn-radius, 14px);
  border: 1px dashed rgba(255, 138, 0, 0.14);
  background: rgba(255, 138, 0, 0.03);
}

.fn-home-empty .fn-home-section-link {
  display: inline-flex;
  margin-top: 6px;
}

/* —— 8. Nav / account dock mobile affordances —— */
@media (max-width: 899px) {
  .account-nav-dock-item {
    min-height: 44px;
    gap: 0.22rem;
  }

  .account-nav-dock-item.is-active {
    color: var(--fn-orange, #ff8a00);
    background: rgba(255, 138, 0, 0.1);
  }

  .account-nav-dock-item:active {
    transform: scale(0.96);
  }
}

.fn-bottom-nav-item.is-active {
  background: rgba(139, 92, 246, 0.1);
}

.fn-bottom-nav-item:active {
  transform: scale(0.96);
}

/* —— 9. Quieter secondary noise —— */
.fn-btn-ghost,
.fn-btn-create,
.fn-btn-outline,
.fn-btn-join {
  box-shadow: none;
}

.fn-btn-primary {
  box-shadow: none;
}

.fn-badge {
  letter-spacing: 0.03em;
}

/* —— 10. Intentional motion (presence, not noise) —— */
@keyframes fn-enter-soft {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fn-sheet-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fn-page-enter,
.fn-home > .fn-home-hero,
.fn-home > .fn-home-pillars,
.fn-home > .fn-home-quick-ctas,
.fn-home > section.fn-home-section {
  animation: fn-enter-soft 320ms var(--fn-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.fn-home > section.fn-home-section:nth-of-type(2) {
  animation-delay: 40ms;
}

.fn-home > section.fn-home-section:nth-of-type(3) {
  animation-delay: 80ms;
}

.venue-tour-list-sheet-panel,
.region-picker-panel,
.account-user-panel.is-mobile-sheet {
  animation: fn-sheet-rise 280ms var(--fn-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.fn-bottom-nav-item.is-active .fn-bottom-nav-icon .fn-icon,
.account-nav-dock-item.is-active .fn-icon {
  transform: translateY(-1px) scale(1.06);
  transition: transform 180ms var(--fn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/* —— Control radius: square-ish buttons / chips / filters (same token) —— */
.fn-btn,
.fn-icon-btn,
.fn-chip,
.fn-cat-btn,
.fn-badge,
.fn-search,
.fn-select,
.fn-view-toggle,
.fn-view-toggle-btn,
.fn-header-link,
.fn-btn-signin,
.fn-toast,
.fn-city-btn,
.fn-home-cat,
.fn-home-quick-cta,
.fn-home-pillar,
.category-chip,
.bottom-nav-item,
.search-box,
.search-box-compact,
.search-close-btn,
.geo-region-btn,
.geo-locate-btn,
.filter-toggle-btn,
.fn-explore-filters-trigger,
.fn-explore-sidebar-search-clear,
.explore-venue-primary-cta,
.explore-venue-secondary-btn,
.explore-venue-secondary .venue-engage-btn,
.fn-social-detail-btn,
.fn-social-detail-chip,
.account-audience-tab,
.account-tag-chip,
.account-venue-offer-chip,
.account-submit,
.account-link-btn,
.fn-join-mode-btn,
.fn-party-btn,
.fn-meetup-host-chip,
.fn-meetup-count-chip {
  border-radius: var(--fn-radius-control, 6px);
}

@media (prefers-reduced-motion: reduce) {
  .fn-page-enter,
  .fn-home > .fn-home-pillars,
  .fn-home > .fn-home-quick-ctas,
  .fn-home > section.fn-home-section,
  .venue-tour-list-sheet-panel,
  .region-picker-panel,
  .account-user-panel.is-mobile-sheet,
  .fn-bottom-nav-item.is-active .fn-bottom-nav-icon .fn-icon,
  .account-nav-dock-item.is-active .fn-icon,
  .fn-btn:active,
  .fn-bottom-nav-item:active,
  .account-nav-dock-item:active {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}