/* Seven Pillars — Custom Styles */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/playfair-display-latin.woff2") format("woff2");
}

/* Base resets and utilities */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
}

#app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#main-content {
  height: 100%;
  min-height: 0;
}

#app-header {
  height: calc(56px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}

/* Touch action for buttons to prevent double-tap zoom */
button, a, [role="button"] {
  touch-action: manipulation;
}

/* Focus styles for accessibility */
:focus-visible {
  outline: 2px solid #6B7F5E;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Minimum tap target size */
button, a, input, select, textarea {
  min-height: 44px;
}

button, [role="button"] {
  min-width: 44px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

body.modal-open {
  overflow: hidden;
}

#screen-container {
  min-height: 0;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

#bottom-tab-bar {
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
}

#bottom-tab-bar .tab-item {
  height: 56px;
}

.card-view-shell {
  min-height: calc(100vh - 56px - 56px - 80px);
  min-height: calc(100dvh - 56px - 56px - 80px - env(safe-area-inset-bottom));
}

.full-screen-state {
  min-height: calc(100vh - 56px - 56px);
  min-height: calc(100dvh - 56px - 56px - env(safe-area-inset-bottom));
}

.card-action-bar {
  bottom: calc(56px + env(safe-area-inset-bottom));
}

@media (min-width: 1024px) {
  #screen-container {
    padding-bottom: 1rem;
  }

  .card-view-shell {
    min-height: calc(100vh - 56px - 80px);
    min-height: calc(100dvh - 56px - 80px);
  }

  .full-screen-state {
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
  }

  .card-action-bar {
    bottom: 0;
    left: 220px;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Card question text responsive sizing */
.question-text {
  font-size: clamp(1.35rem, 5.5vw, 2rem);
  line-height: 1.4;
}

/* Progress ring */
.progress-ring-circle {
  transition: stroke-dashoffset 0.35s ease;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* Bottom sheet animation */
#bottom-sheet.open {
  transform: translateY(0);
}

/* Toast animation */
.toast {
  animation: toast-in 0.3s ease-out forwards;
  pointer-events: auto;
}

.toast.toast-out {
  animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Card swipe animation */
.card-enter {
  animation: card-fade-in 0.25s ease-out forwards;
}

.card-exit-left {
  animation: card-slide-left 0.25s ease-in forwards;
}

.card-exit-right {
  animation: card-slide-right 0.25s ease-in forwards;
}

@keyframes card-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes card-slide-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-80px);
  }
}

@keyframes card-slide-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(80px);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .card-enter,
  .card-exit-left,
  .card-exit-right {
    animation: card-crossfade 0.15s ease forwards;
  }

  @keyframes card-crossfade {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  #bottom-sheet {
    transition-duration: 0.15s;
  }

  .toast {
    animation-duration: 0.15s;
  }

  .celebration-card,
  .skeleton {
    animation: none;
  }

  .progress-ring-circle,
  .progress-bar {
    transition: none;
  }
}

/* Active nav states */
.nav-item.active,
.tab-item.active {
  color: #6B7F5E;
}

.nav-item.active {
  background-color: #F5F0EB;
}

.tab-item {
  position: relative;
}

.tab-item.active {
  font-weight: 600;
}

.tab-item.active::before {
  position: absolute;
  top: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: #6B7F5E;
  content: "";
}

/* Category tile hover */
.category-tile {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.category-tile:hover,
.category-tile:focus-visible {
  border-color: #6B7F5E;
  box-shadow: 0 4px 12px rgba(107, 127, 94, 0.15);
}

/* Scrollbar styling */
#screen-container::-webkit-scrollbar {
  width: 6px;
}

#screen-container::-webkit-scrollbar-track {
  background: transparent;
}

#screen-container::-webkit-scrollbar-thumb {
  background: #E8E2D9;
  border-radius: 3px;
}

/* Textarea styling */
textarea {
  resize: vertical;
  min-height: 100px;
}

/* Progress bar */
.progress-bar {
  transition: width 0.35s ease;
}

/* Swipe area */
.swipe-area {
  touch-action: pan-y;
  user-select: none;
}

/* Card action button */
.card-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.card-action-btn:active {
  transform: scale(0.92);
}

.card-action-btn.discussed-btn {
  width: 64px;
  height: 64px;
  background-color: #6B7F5E;
  color: white;
}

.card-action-btn.discussed-btn:hover {
  background-color: #4A5A3F;
}

.card-action-btn.discussed-btn.is-discussed {
  background-color: #4A5A3F;
}

/* Celebration card */
.celebration-card {
  animation: celebrate-pulse 0.6s ease-out;
}

@keyframes celebrate-pulse {
  0% { transform: scale(0.9); opacity: 0; }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

/* Loading spinner */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #E8E2D9;
  border-top-color: #6B7F5E;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, #E8E2D9 25%, #F5F0EB 50%, #E8E2D9 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}