/* styles.css */
[x-cloak] {
    display: none !important;
  }
  .measure {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
  }

/* Helper classes for share-card workflow */

/* Tab panels */
.tab-panel {
  position: relative;
  margin-bottom: 3rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
              0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Tab buttons */
.tab-button {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  transition: all 0.2s;
  border: 2px solid transparent;
}
.tab-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(139, 104, 70, 0.5);
}

/* Overview cards */
.overview-card {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transform: scale(1);
  transition: all 0.3s;
}
.overview-card:hover,
.overview-card:focus {
  transform: scale(1.05);
}

/* Modal backdrop and container */
.hidden {
  display: none;
}
#share-modal {
  display: none;           /* hidden by default */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0; /* cover full viewport */
  background: rgba(0, 0, 0, 0.75); /* darker backdrop */
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10000;          /* ensure on top of all content */
  overflow-y: auto;        /* scroll if content taller than viewport */
}
/* only show modal when visible */
#share-modal:not(.hidden) {
  display: flex;
}
#share-modal .modal-content {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  border-radius: 0.5rem;
  overflow: hidden;
  max-width: 360px;
  width: 100%;
}


/* Social icons in share modal */
#share-modal .modal-content > div:last-child {
  display: flex;
  justify-content: center;
  gap: 1rem;
  background: transparent;
  padding-bottom: 1rem;
}

#share-modal .modal-content > div:last-child button img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Remove extra gap below the card in the modal */
#share-modal #card-preview .tab-panel {
  margin-bottom: 1rem;
}

/* Enable smooth scroll snapping for tab list on mobile */
.tablist-wrapper {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
}
.tablist-wrapper .tab-button {
  scroll-snap-align: center;
}