@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --background: 0 0% 99.2%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 91%;
  --input: 0 0% 91%;
  --ring: 240 5.9% 10%;
  --radius: 0.85rem;
  --card-radius: 14px;
  --thumb-radius: calc(var(--card-radius) - 4px);
  --header-glass-opacity: 0.85;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}

/* Subtle scrollbar */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 9999px;
}

/* iOS Frosted Glass Sticky Header */
#top-header {
  background-color: rgba(253, 253, 253, var(--header-glass-opacity, 0.85));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom-color: rgba(232, 232, 232, 0.85);
  transition: background-color 200ms ease, border-color 200ms ease;
}

@supports not ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
  #top-header {
    background-color: #fdfdfd;
  }
}

/* Accordion collapse/expand smooth animation */
.accordion-content {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease;
  opacity: 1;
  overflow: hidden;
}

.accordion-content.collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.accordion-inner {
  overflow: hidden;
  min-height: 0;
}

/* Chevron rotate */
.chevron-icon {
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chevron-icon.rotated {
  transform: rotate(-180deg);
}

/* Dropdown Overlay (Transparent click-outside backdrop - no blur, no color change) */
.dropdown-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: opacity 150ms ease, visibility 150ms ease;
}

.dropdown-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Routine Dropdown Menu */
.routine-dropdown-menu {
  top: calc(100% - 10px);
  left: 26px;
  right: 26px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-2px) scale(0.99);
  transform-origin: top left;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1), visibility 200ms ease;
}

.routine-dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* Dropdown Arrow rotation */
.dropdown-arrow {
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-arrow.rotated {
  transform: rotate(-180deg);
}

/* Modal animations & bottom anchoring */
.modal-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 220ms ease;
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 16px));
  justify-content: flex-end;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-card {
  margin-top: auto;
  transform-origin: center bottom;
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease;
}

.modal-overlay.active .modal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Content spacing: 32px margin from top, left, and right */
#sections-container {
  padding-top: 32px;
  padding-left: 32px;
  padding-right: 32px;
}

/* Bottom safe-area spacing: reduced to half clearance so the bottom white space is halved across all pages */
.safe-pb {
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 16px));
}

/* Press interaction effect */
.press-effect {
  transition: transform 120ms ease, opacity 120ms ease;
}

.press-effect:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* Modal Navigation Buttons */
.modal-nav-btn {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.modal-nav-btn:disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* Floating animation for navigation buttons below card */
.modal-nav-floating {
  transform: translateY(12px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1) 40ms, opacity 220ms ease 40ms;
}

.modal-overlay.active .modal-nav-floating {
  transform: translateY(0);
  opacity: 1;
}

/* Workout Exercise Card: 4px padding from outer edge to thumbnail, concentric rounded corners */
.thumb-trigger {
  border-radius: var(--card-radius, 14px);
  padding: 4px;
  padding-right: 14px;
  align-items: flex-start;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 200ms ease;
}

/* Card in-focus state while browsing in popup (50% grey stroke only) */
.thumb-trigger.card-in-focus {
  border-color: #71717a !important;
}

/* Card stroke pulse highlight when popup is dismissed (50% grey stroke darkening, no shadow/glow) */
@keyframes cardFocusPulse {
  0% {
    border-color: #71717a;
  }
  60% {
    border-color: #71717a;
  }
  100% {
    border-color: #e8e8e8;
  }
}

.thumb-trigger.card-highlight-pulse {
  animation: cardFocusPulse 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Card text details: consistent 9px padding-top from thumbnail content (13px from inner card top) */
.thumb-text-content {
  padding-top: 9px;
}

/* Enlarged Thumbnail Container: fits 4px card padding, corner radius = card radius - 4px */
.thumb-image-container {
  width: 72px;
  height: 72px;
  border: 1px solid rgba(232, 232, 232, 0.5);
  border-radius: var(--thumb-radius, calc(var(--card-radius, 14px) - 4px));
  overflow: hidden;
  flex-shrink: 0;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.chevron-btn {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.thumb-trigger:focus,
.thumb-trigger:focus-visible,
.thumb-trigger:active,
.chevron-btn:focus,
.chevron-btn:focus-visible,
.chevron-btn:active {
  outline: none;
  box-shadow: none;
}

:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Weight Dropdown Menu Animation & Styling */
.weight-dropdown-menu {
  bottom: calc(100% + 6px);
  right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(2px) scale(0.99);
  transform-origin: bottom right;
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1), visibility 200ms ease;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}

.weight-dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.weight-dropdown-menu::-webkit-scrollbar {
  width: 4px;
}

.weight-dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.weight-dropdown-menu::-webkit-scrollbar-thumb {
  background: hsl(var(--border));
  border-radius: 9999px;
}

/* Weight pill and arrow interactions */
.weight-arrow-btn:disabled {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

#weight-pill-arrow.rotated {
  transform: rotate(-180deg);
}

.weight-option {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Profile View Transition */
#profile-view {
  animation: fadeInProfile 180ms ease-out;
}

@keyframes fadeInProfile {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}