/* ==========================================================================
   PassMan — premium motion + mobile layer
   Loaded after styles.css. Pure progressive enhancement: everything here is
   disabled by prefers-reduced-motion, and nothing changes layout on desktop
   except motion and depth.
   ========================================================================== */

:root {
  --ease-spring: cubic-bezier(.34,1.56,.64,1);   /* slight overshoot */
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --dur-slow: 420ms;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 60px;
  --glow: 0 6px 20px -6px color-mix(in srgb, var(--violet-600) 55%, transparent);
}

html { -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; text-rendering: optimizeLegibility; }
button, a, .row, .nav-item { touch-action: manipulation; }

/* Smooth light/dark switch (class is added briefly by JS) */
html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, box-shadow .35s ease !important;
}

/* ---------- Boot + auth ---------- */
.boot img { animation: breathe 1.8s var(--ease-smooth) infinite; }
@keyframes breathe { 0%,100% { transform: scale(1); opacity:.9; } 50% { transform: scale(1.12); opacity:1; } }

.auth::before {            /* slow drifting aurora behind the card */
  content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(600px 400px at 20% 20%, color-mix(in srgb, var(--violet-500) 14%, transparent), transparent 70%),
    radial-gradient(500px 360px at 80% 75%, color-mix(in srgb, #ed0e78 8%, transparent), transparent 70%),
    radial-gradient(420px 320px at 70% 15%, color-mix(in srgb, #f9c815 8%, transparent), transparent 70%);
  animation: aurora 24s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.08); } }
.auth-panel, .auth-foot { position: relative; z-index: 1; }
.auth-panel { animation: panel-in var(--dur-slow) var(--ease-smooth) both; }
.auth-foot { animation: fade-in .8s .25s var(--ease-smooth) both; }
@keyframes panel-in { from { opacity:0; transform: translateY(18px) scale(.985); } }
.brand-stripe { background-size: 200% 100%; animation: stripe-slide 6s linear infinite; }
@keyframes stripe-slide { to { background-position: -200% 0; } }
.auth-view:not(.hidden) { animation: view-in .35s var(--ease-smooth) both; }
.auth-view:not(.hidden) > * { animation: view-in .4s var(--ease-smooth) both; }
.auth-view:not(.hidden) > *:nth-child(2) { animation-delay: .04s; }
.auth-view:not(.hidden) > *:nth-child(3) { animation-delay: .08s; }
.auth-view:not(.hidden) > *:nth-child(4) { animation-delay: .12s; }
.auth-view:not(.hidden) > *:nth-child(5) { animation-delay: .16s; }
@keyframes view-in { from { opacity:0; transform: translateY(8px); } }
.alert:not(.hidden) { animation: alert-in .35s var(--ease-spring) both; }
@keyframes alert-in { from { opacity:0; transform: translateY(-6px) scale(.98); } }
.alert-error:not(.hidden) { animation: alert-in .35s var(--ease-spring) both, shake .4s .05s ease; }
@keyframes shake { 20%,60% { transform: translateX(-4px); } 40%,80% { transform: translateX(4px); } }
.code-input:focus { letter-spacing: .5em; }
.code-input { transition: letter-spacing .25s var(--ease-smooth), border-color var(--dur-fast), box-shadow var(--dur-fast); }

/* ---------- Buttons: depth, glow, press ---------- */
.btn { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out), transform .15s var(--ease-spring), box-shadow .25s var(--ease-out); }
.btn:active:not(:disabled), .icon-btn:active, .nav-item:active { transform: scale(.96); }
.btn-primary { position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, var(--glow); transform: translateY(-1px); }
.btn-primary::after {      /* sheen sweep on hover */
  content:""; position:absolute; inset:0; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transition: transform .7s var(--ease-smooth);
}
.btn-primary:hover:not(:disabled)::after { transform: translateX(120%) skewX(-18deg); }
.btn-secondary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn.is-busy { pointer-events: none; }
.icon-btn { transition: background-color var(--dur-fast), color var(--dur-fast), transform .15s var(--ease-spring); }
.icon-btn:hover { transform: scale(1.06); }

/* Favorite star pops */
.icon-btn.is-on .icon { animation: star-pop .45s var(--ease-spring); }
@keyframes star-pop { 0% { transform: scale(.6) rotate(-20deg); } 60% { transform: scale(1.35) rotate(8deg); } 100% { transform: none; } }

/* Copy confirmation (JS adds .copied for ~900ms) */
.copied { color: var(--status-success-fg) !important; animation: copy-pop .5s var(--ease-spring); }
@keyframes copy-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); background: var(--status-success-bg); } 100% { transform: scale(1); } }

/* Inputs: focus glow already exists; add lift */
input:focus, select:focus, textarea:focus { transition: border-color .2s, box-shadow .25s var(--ease-out); }

/* ---------- Sidebar ---------- */
.nav-item { transition: background-color var(--dur-fast), color var(--dur-fast), transform .15s var(--ease-spring), padding-left .2s var(--ease-smooth); }
.nav-item:hover { padding-left: calc(var(--space-2) + 3px); }
.nav-item.active::before {
  content:""; position:absolute; left:-12px; top:6px; bottom:6px; width:3px; border-radius:0 3px 3px 0;
  background: var(--color-primary); animation: grow-y .35s var(--ease-spring);
}
@keyframes grow-y { from { transform: scaleY(0); } }
.sidebar-scrim { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.user-chip { transition: background-color var(--dur-fast), transform .15s var(--ease-spring); }
.user-chip:active { transform: scale(.98); }

/* ---------- Topbar: frosted ---------- */
.topbar { background: color-mix(in srgb, var(--surface-card) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); position: relative; z-index: 5; }
.search input { transition: background-color .2s, border-color .2s, box-shadow .25s var(--ease-out), transform .25s var(--ease-smooth); }
.search input:focus { transform: translateY(-1px); box-shadow: var(--shadow-md), 0 0 0 3px color-mix(in srgb, var(--violet-500) 22%, transparent); }

/* ---------- List: staggered entrance, tactile rows ---------- */
.list .row { animation: row-in .45s var(--ease-smooth) both; }
.list .row:nth-child(1) { animation-delay: .00s; } .list .row:nth-child(2) { animation-delay: .03s; }
.list .row:nth-child(3) { animation-delay: .06s; } .list .row:nth-child(4) { animation-delay: .09s; }
.list .row:nth-child(5) { animation-delay: .12s; } .list .row:nth-child(6) { animation-delay: .15s; }
.list .row:nth-child(7) { animation-delay: .18s; } .list .row:nth-child(8) { animation-delay: .21s; }
.list .row:nth-child(n+9) { animation-delay: .24s; }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } }
.row { transition: background-color var(--dur-fast), transform .2s var(--ease-smooth), box-shadow .2s; }
.row:hover { transform: translateX(2px); }
.row:active { transform: scale(.992); }
.row.selected::before { animation: grow-y .35s var(--ease-spring); }
.tile { transition: transform .25s var(--ease-spring), box-shadow .25s; }
.row:hover .tile { transform: scale(1.06) rotate(-2deg); box-shadow: var(--shadow-sm); }
.skeleton-row { animation: shimmer 1.4s ease-in-out infinite; }
.list-title { animation: view-in .4s var(--ease-smooth) both; }
.empty { animation: view-in .5s var(--ease-smooth) both; }
.empty-icon { animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }

/* ---------- Detail pane ---------- */
.detail { animation: detail-in .4s var(--ease-smooth) both; }
@keyframes detail-in { from { opacity: 0; transform: translateX(14px); } }
.detail .card { animation: view-in .5s var(--ease-smooth) both; }
.detail .card:nth-of-type(2) { animation-delay: .06s; } .detail .card:nth-of-type(3) { animation-delay: .12s; }
.detail-head .tile-lg { animation: pop-in .5s var(--ease-spring) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.7) rotate(-8deg); } }
.card { transition: box-shadow .25s, border-color .25s; }
.fields > *:hover { background: color-mix(in srgb, var(--surface-hover) 60%, transparent); }

/* ---------- Menus + modals + toasts ---------- */
.menu { transform-origin: top left; animation: menu-in .2s var(--ease-spring); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,.02); }
@keyframes menu-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } }
.menu-item { transition: background-color .12s, padding-left .15s var(--ease-smooth); }
.menu-item:hover { padding-left: calc(var(--space-3) + 3px); }

.modal-scrim { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal-panel { animation: modal-in .38s var(--ease-spring) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }

.toast { animation: toast-in .45s var(--ease-spring) both; backdrop-filter: blur(10px); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.toast.leaving { opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .2s, transform .2s var(--ease-smooth); }
.toast.success .toast-dot { animation: dot-ping 1s ease-out; }
@keyframes dot-ping { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.7); } 100% { box-shadow: 0 0 0 10px rgba(16,185,129,0); } }

/* ---------- Device approval / apps ---------- */
.device-code { background-image: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--violet-500) 14%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: shimmer 3s linear infinite; }
.device-check { animation: pop-in .6s var(--ease-spring) both; }
.app-card { transition: transform .25s var(--ease-smooth), box-shadow .25s, border-color .25s; }
.app-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-primary-subtle); }

/* ---------- Mobile tab bar (hidden on desktop) ---------- */
.tabbar { display: none; }

/* ==========================================================================
   Mobile / tablet  (<= 960px)  — feels like a native app
   ========================================================================== */
@media (max-width: 960px) {
  /* Safe areas (notch / home indicator) */
  .topbar { padding-top: var(--safe-top); height: calc(var(--topbar-h) + var(--safe-top)); padding-left: max(var(--space-3), env(safe-area-inset-left)); padding-right: max(var(--space-3), env(safe-area-inset-right)); }
  .sidebar { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); width: min(86vw, 320px); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; transition: transform .42s var(--ease-smooth); }
  .auth { padding-top: calc(var(--space-10) + var(--safe-top)); padding-bottom: calc(var(--space-10) + var(--safe-bottom)); }

  /* iOS zooms into inputs < 16px: stop that, and make targets thumb-sized */
  input[type="text"], input[type="email"], input[type="password"], input[type="url"],
  input[type="search"], input[type="number"], select, textarea { font-size: 16px; height: 46px; border-radius: var(--radius-md); }
  textarea { height: auto; }
  .btn { height: 46px; font-size: var(--text-md); border-radius: var(--radius-md); }
  .btn-sm { height: 38px; }
  .icon-btn { width: 44px; height: 44px; }
  .icon-btn-sm { width: 40px; height: 40px; }
  .nav-item { height: 44px; }
  .menu-item { height: 48px; }
  .row { min-height: 68px; }
  .tile { width: 42px; height: 42px; }
  .search input { height: 42px; border-radius: 12px; }
  .row:hover, .nav-item:hover, .menu-item:hover { transform: none; padding-left: revert; }
  .row:hover .tile { transform: none; }

  /* Hide the desktop "+" split (tab bar has Add) and theme toggle (in user menu) */
  .topbar-actions .split, #theme-btn { display: none; }

  /* Tab bar */
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
    height: calc(var(--tabbar-h) + var(--safe-bottom)); padding: 6px 8px var(--safe-bottom);
    background: color-mix(in srgb, var(--surface-card) 80%, transparent);
    backdrop-filter: saturate(1.8) blur(18px); -webkit-backdrop-filter: saturate(1.8) blur(18px);
    border-top: 1px solid var(--border-default);
  }
  .tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; background: none; color: var(--text-muted); font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
    border-radius: 12px; cursor: pointer; position: relative;
    transition: color .2s, transform .2s var(--ease-spring);
  }
  .tab .icon { width: 22px; height: 22px; transition: transform .3s var(--ease-spring); }
  .tab:active { transform: scale(.9); }
  .tab.active { color: var(--color-primary); }
  .tab.active .icon { transform: translateY(-1px) scale(1.12); }
  .tab.active::after { content: ""; position: absolute; top: -7px; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--color-primary); animation: grow-y .3s var(--ease-spring); transform-origin: top; }
  .tab-add { flex: 0 0 56px; }
  .tab-add span.fab {
    width: 48px; height: 48px; margin-top: -18px; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); color: #fff;
    box-shadow: var(--glow), 0 0 0 4px var(--surface-card);
    transition: transform .3s var(--ease-spring);
  }
  .tab-add:active span.fab { transform: scale(.9) rotate(90deg); }
  .tab-add .fab .icon { width: 24px; height: 24px; }
  .tab-add small { display: none; }
  .list { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-6)); }
  .page { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
  .toast-root { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-3)); }
  .view-vault.show-detail ~ * .tabbar, .app:has(.view-vault.show-detail) .tabbar { transform: translateY(110%); transition: transform .35s var(--ease-smooth); }
  .tabbar { transition: transform .35s var(--ease-smooth); }

  /* Detail slides like an iOS push with a parallax edge shadow */
  .detail-pane { box-shadow: -12px 0 32px rgba(0,0,0,.12); transition: transform .42s var(--ease-smooth); padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
  .detail { animation: none; }
  .detail-top { position: sticky; top: calc(-1 * var(--space-4)); z-index: 3; background: color-mix(in srgb, var(--surface-page) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); margin-top: calc(-1 * var(--space-4)); padding: var(--space-2) 0; }

  /* Menus + modals become bottom sheets with a grab handle */
  .menu {
    left: 8px !important; right: 8px; top: auto !important; bottom: calc(8px + var(--safe-bottom)); width: auto; min-width: 0;
    border-radius: 20px; padding: 14px 8px 8px; transform-origin: bottom center;
    animation: sheet-in .4s var(--ease-smooth);
  }
  .menu::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
  @keyframes sheet-in { from { transform: translateY(100%); opacity: .6; } }
  #menu-root:not(:empty)::before { content: ""; position: fixed; inset: 0; z-index: 59; background: var(--surface-overlay); animation: fade-in .25s both; }

  .modal { align-items: flex-end; padding: 0; }
  .modal-panel, .modal-panel.wide {
    max-width: none; border-radius: 22px 22px 0 0; border-bottom: 0; max-height: 92dvh;
    animation: sheet-in .45s var(--ease-smooth) both; padding-bottom: var(--safe-bottom);
  }
  .modal-panel::before { content: ""; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--border-strong); }
  .modal-head { padding-top: var(--space-6); }
  .modal-foot { border-radius: 0; flex-wrap: wrap; }
  .modal-foot .btn { flex: 1; }
  .auth-panel { max-width: 440px; }
}

@media (max-width: 600px) {
  .auth { justify-content: flex-start; padding-top: calc(var(--space-8) + var(--safe-top)); }
  .auth-panel { border-radius: 20px; }
  .list-title { font-size: 28px; letter-spacing: -.02em; }
  .tile-lg { width: 56px; height: 56px; }
  .detail-head h2 { font-size: 24px; }
}

/* Touch devices: no sticky hover lift */
@media (hover: none) {
  .btn-primary:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .app-card:hover { transform: none; }
  .btn-primary::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .auth::before, .brand-stripe, .boot img, .empty-icon, .device-code { animation: none !important; }
  .list .row, .detail, .detail .card { animation: none !important; }
}

/* Tab bar only exists inside the signed-in app */
#app.hidden ~ .tabbar { display: none !important; }