/* 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;
  }
}

/* --- Top nav (shared by landing + app) --------------------------------- */
.ak-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--color-soft-rule);
  backdrop-filter: saturate(180%) blur(12px);
}

.ak-nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 1120px;
  height: 58px;
  margin: 0 auto;
  padding: 0 20px;
}

.ak-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.ak-logo-mark {
  display: block;
  flex: 0 0 auto;
}

.ak-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.ak-nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: var(--radius-ak-sm);
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease, background 140ms ease;
}

.ak-nav-links a:hover {
  color: var(--color-ink);
  background: var(--color-surface-muted);
}

.ak-nav-links a.is-active,
.ak-nav-links a[aria-current="page"] {
  color: var(--color-ink);
  background: var(--color-surface-muted);
}

.ak-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.ak-nav-signin {
  padding: 7px 12px;
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.ak-nav-signin:hover { color: var(--color-primary); }

/* --- Account menu (dropdown on the right) ------------------------------ */
.ak-account {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.ak-account:hover {
  background: var(--color-surface-muted);
  border-color: var(--color-soft-rule);
}

.ak-account-avatar {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--color-surface-muted);
  color: var(--color-ink);
  font-size: 12px;
  font-weight: 600;
}

.ak-account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: 232px;
  padding: 6px;
  border: 1px solid var(--color-soft-rule);
  border-radius: var(--radius-ak-md);
  background: var(--color-surface);
  box-shadow: 0 8px 28px rgba(11, 50, 40, 0.12);
}

.ak-account-menu-head {
  display: grid;
  gap: 2px;
  margin-bottom: 4px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--color-soft-rule);
}

.ak-account-menu-name { color: var(--color-ink); font-size: 13px; font-weight: 600; }
.ak-account-menu-email { color: var(--color-faint); font-size: 11px; }

.ak-account-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-ak-sm);
  color: var(--color-ink);
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ak-account-menu-item:hover { background: var(--color-surface-muted); }
.ak-account-menu-item--danger { color: var(--color-sell); }
.ak-account-menu-item--danger:hover { background: var(--color-sell-bg); }
.ak-account-menu-sep { height: 1px; margin: 4px 0; background: var(--color-soft-rule); }

/* --- 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; }

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