/* Navigation chrome — the quiet top nav, account menu, sheet animations, and
   mobile tap fixes. Imported by app/assets/tailwind/application.css (so the
   var(--…) design tokens resolve). See docs/DESIGN.md (Navigation). */

/* --- Base interactive cursor ------------------------------------------- */
/* Tailwind v4's reset removed the default `cursor: pointer` for buttons. */
@layer base {
  button:not(:disabled), [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

/* --- Sheet animations (mobile drawer: slide in/out, fade backdrop) ------ */
@keyframes sheet-slide-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes sheet-slide-left-out {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@keyframes sheet-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-fade-out { from { opacity: 1; } to { opacity: 0; } }

.sheet-enter-left    { animation: sheet-slide-left 220ms cubic-bezier(0.32, 0.72, 0, 1); }
.sheet-exit-left     { animation: sheet-slide-left-out 200ms cubic-bezier(0.32, 0.72, 0, 1) forwards; }
.sheet-backdrop-enter { animation: sheet-fade-in 220ms ease-out; }
.sheet-backdrop-exit  { animation: sheet-fade-out 200ms ease-in forwards; }

/* --- Mobile touch interaction fixes ------------------------------------- */
/* iOS Safari auto-zooms when focusing form fields under 16px. */
input, select, textarea { font-size: 16px; }

/* Eliminate the legacy 300ms double-tap-zoom delay on interactive elements. */
button, a, [role="button"], input[type="submit"], input[type="button"],
label[for], summary, select { touch-action: manipulation; }

/* Avoid the sticky tap-highlight gray on iOS without losing active state. */
a, button, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Native-feeling momentum scroll on mobile scroll containers. */
html, body { -webkit-overflow-scrolling: touch; }

/* Hide scrollbar chrome while keeping scrollable (horizontal strips). */
.no-scrollbar { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* --- Community shell --------------------------------------------------- */
.community-navigation-shell { width: 100%; }

@media (min-width: 1024px) {
  .community-navigation-shell { width: var(--community-sidebar-width, 16rem); }
  .community-navigation-panel { animation: none; }
}

/* Ported from the CMS/code-browser generator's resize handle. Keep the hit
   target wide while drawing only a one-pixel rule until hover/focus/drag. */
.community-sidebar-resizer:hover > span,
.community-sidebar-resizer:focus-visible > span,
.community-sidebar-resizer[data-resizing] > span {
  width: 2px;
  background: color-mix(in srgb, var(--color-orange-deep) 52%, transparent);
}

.community-sidebar-resizer:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-orange) 35%, transparent);
  outline-offset: -2px;
}

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sheet-enter-left,
  .sheet-exit-left,
  .sheet-backdrop-enter,
  .sheet-backdrop-exit {
    animation-duration: 0.01ms !important;
  }
}