/* Prevent horizontal scroll globally */
body, html {
  overflow-x: hidden !important;
  overflow-y: scroll !important; /* MUST be scroll (not auto) for sticky to work */
  max-width: 100vw;
  box-sizing: border-box;
  height: 100% !important; /* Full height for scrolling */
  position: relative !important;
}

/* Highlight tokens in interpretation and stable patterns text */
/* Remove old highlight-token class - now using hl classes */

/* Reset browser default mark styles */
mark {
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

*, *::before, *::after {
  box-sizing: border-box;
}

#test-wrapper {
  font-family: 'Inter', sans-serif;
  display: flex;
  gap: 0;
  padding: 0;
  padding-top: 0;
  max-width: 100%;
  margin-right: 0;
  align-items: flex-start;
  border: 0px solid orange;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  #test-wrapper {
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

#sidebar {
  flex-shrink: 0;
  width: 300px;
  text-align: left;
  align-self: flex-start;
  padding-top: 0;
  margin-right: 100px;
  padding-right: 0;
  border: 0px solid red;
}


h1 {
  margin-bottom: 16px;
  margin-top: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}

#round-info {
  color: #666;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 16px;
}

#description {
  color: #000000;
  font-size: 20px;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0;
}

#content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 0;
  margin-left: 0px !important;
  padding-left: 0 !important;
  min-width: 0;
  width: 100%;
  border: 0px solid blue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  row-gap: 8px;
  column-gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  --image-height: 200px;
  border: 0px solid green;
}

/* Desktop: ensure grid fits within viewport height - all 6 images visible */
@media (min-width: 769px) {
  .grid {
    align-content: start;
  }
  
  .grid {
    width: fit-content !important; /* Let grid width be determined by image widths */
    margin: 0 auto !important; /* Center the grid */
  }
  
  .grid .card {
    height: var(--image-height, auto) !important; /* Height calculated from viewport */
    width: var(--image-width, auto) !important; /* Width = height * (2/3) */
    aspect-ratio: none !important; /* Disable aspect-ratio, use explicit dimensions */
    min-height: 0;
  }
  
  .grid .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Mobile: 2 columns */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
  }
  
  #grid {
    gap: 8px !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
  }
}

.card {
  width: 100%;
  aspect-ratio: 2/3 !important;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.3s;
  background: white;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

.card:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Disable hover effect on mobile/touch devices */
@media (hover: none) and (pointer: coarse) {
  .card:hover {
    transform: none;
    box-shadow: none;
  }
}

.card.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Mobile: instant opacity change to prevent wave effect - all images fade at once */
@media (max-width: 768px) {
  .card {
    transition: transform 0.2s, opacity 0s !important;
  }
  
  .card.disabled {
    transition: opacity 0s !important;
  }
}

.card.selected {
  opacity: 1;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Desktop: Scale down animation after selection */
.card.scaling-down {
  opacity: 1 !important;
  transform: scale(1) !important;
  box-shadow: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* ============================================
   RESULT CONTAINER - STYLING PARAMETERS
   ============================================ */
#result-container {
  margin-top: 0; /* Top margin - adjust here */
  text-align: left; /* Text alignment - adjust here */
  width: 100%; /* Width - adjust here */
  max-width: 100%; /* Max width - adjust here */
  display: block; /* Display - React controls visibility */
  flex: 1; /* Flex grow - adjust here */
  padding: 0; /* Padding - adjust here */
  padding-bottom: 0; /* Explicitly set padding-bottom to 0 */
  margin-bottom: 0; /* Bottom margin - prevent extra spacing */
  box-sizing: border-box;
  overflow-x: hidden !important; /* Prevent horizontal scroll */
  overflow-y: visible !important; /* Allow vertical scroll for sticky - MUST be visible */
  position: relative !important; /* Relative positioning */
  height: auto !important; /* Don't restrict height */
  min-height: 100vh; /* Ensure container has height */
}

/* Mobile: ensure no horizontal scroll */
@media (max-width: 768px) {
  #result-container {
    padding-left: 0; /* Left padding - adjust here */
    padding-right: 0; /* Right padding - adjust here */
    margin-left: 0; /* Left margin - adjust here */
    margin-right: 0; /* Right margin - adjust here */
  }
}

/* ============================================
   SELECTED IMAGES GALLERY - STYLING PARAMETERS
   ============================================ */
#selected-images-gallery {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important; /* All screens: 5 columns = 2 rows of images */
  gap: 3px; /* Gap between thumbnails - adjust here */
  width: 100% !important; /* Width - adjust here */
  max-width: 100% !important; /* Max width - adjust here */
  box-sizing: border-box;
  background-color: #ffffff !important; /* Background color - adjust here */
  padding: 0; /* Padding - adjust here */
  margin: 0; /* Remove margins - container handles spacing */
  transform-origin: top center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transition - adjust here */
  column-gap: 3px; /* Horizontal gap - will be overridden on desktop */
  row-gap: 3px; /* Vertical gap - will be overridden on desktop */
}

/* Force 5 columns on mobile - override any Tailwind classes */
@media (max-width: 768px) {
  #selected-images-gallery {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 3px !important;
  }
}

/* Desktop: 5 columns, sticky, shadow, max-width 720px, constrained image heights */
@media (min-width: 769px) {
  #images-gallery-container {
    /* Sticky will be applied dynamically via JavaScript after scrolling starts */
    position: relative !important;
    top: 0 !important;
    z-index: 1000 !important;
    align-self: flex-start !important;
    width: 100% !important;
    max-width: 720px !important;
  }
  
  /* When scrolled and scaled, make it sticky */
  #images-gallery-container.scrolled-scaled {
    position: sticky !important;
  }
  
  #selected-images-gallery {
    grid-template-columns: repeat(5, 1fr) !important; /* 5 columns = 2 rows */
    gap: 3px !important;
    width: 100% !important;
    max-width: 720px !important; /* Same width as text block */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    background-color: #ffffff !important;
    padding: 12px !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    height: auto !important;
    border-radius: 12px !important; /* Rounded corners for desktop */
  }
  
  /* Ensure thumbnails maintain 2:3 aspect ratio on desktop */
  #selected-images-gallery .thumbnail {
    aspect-ratio: 2/3 !important;
    width: 100% !important;
    height: auto !important;
  }
}

#selected-images-gallery::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--bg-left, 0);
  width: 100vw;
  height: 100%;
  background-color: #ffffff;
  z-index: -1;
  box-shadow: none;
  pointer-events: none;
}

/* Mobile: fix 100vw causing horizontal scroll */
@media (max-width: 768px) {
  #selected-images-gallery::before {
    width: 100%;
    left: 0;
  }
}

/* Desktop: hide ::before pseudo-element - not needed for constrained width */
@media (min-width: 769px) {
  #selected-images-gallery::before {
    display: none;
  }
}

#selected-images-gallery.sticky-scaled {
  transform: scale(0.8);
}

/* Disable scaling animation on mobile - just keep sticky */
@media (max-width: 768px) {
  #selected-images-gallery.sticky-scaled {
    transform: none;
  }
}

.thumbnail {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 2/3; /* Maintain 2/3 aspect ratio */
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile: thumbnail size - STYLING PARAMETERS */
@media (max-width: 768px) {
  .thumbnail {
    aspect-ratio: 2/3; /* Maintain 2/3 aspect ratio on mobile */
    border-radius: 4px; /* Border radius - adjust here */
  }
}

/* H2 styling now controlled by Tailwind classes in Results.jsx */
/* Removed to allow Tailwind to work */

#profile-result {
  background: #ffffff;
  padding: 0;
  padding-left: 20px;
  padding-bottom: 0;
  border-radius: 0;
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ============================================
   MOBILE RESULT PAGE - STYLING PARAMETERS
   ============================================
   All font sizes, weights, margins, and padding for mobile result page.
   Adjust values here to match your design.
   ============================================ */
@media (max-width: 768px) {
  /* Profile result container - PADDING */
  #profile-result {
    padding-left: 20px; /* Left padding - adjust here */
    padding-right: 40px; /* Right padding - adjust here */
    padding-top: 0; /* Top padding - adjust here */
  }
  
  /* Text styling now controlled by Tailwind classes in Results.jsx */
  /* Removed all !important font/text rules to allow Tailwind to work */
}

/* H3 and P styling now controlled by Tailwind classes in Results.jsx */
/* Removed to allow Tailwind to work - ID selectors have higher specificity than utility classes */

/* ============================================
   DESKTOP RESULT PAGE - STYLING PARAMETERS
   ============================================ */
@media (min-width: 769px) {
  /* Text styling now controlled by Tailwind classes in Results.jsx */
  /* Removed all !important font/text rules to allow Tailwind to work */
  
  /* Keep only layout rules that Tailwind can't easily handle */
  .direction-charts {
    margin-top: 20px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .charts-content {
    padding-left: 0 !important;
  }
}

#brands-result {
  margin-top: 24px;
}

#brands-result h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
}

.brand-card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-card .brand-name {
  font-weight: bold;
  font-size: 18px;
}

.brand-card .brand-meta {
  color: #666;
  font-size: 14px;
  margin-top: 4px;
}

.brand-card .brand-score {
  font-size: 24px;
  font-weight: bold;
  color: #007bff;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* 1. WHERE TO ADD MARGIN MANUALLY:
   - Sidebar margin-right: line 25 (#sidebar margin-right)
   - Content-area margin-left: line 55 (#content-area margin-left)
   - Grid margin: line 68 (.grid margin)
   - Card margin: Add to .card class if needed
*/

/* Tablet and smaller screens - stack vertically */
@media (max-width: 1024px) {
  #test-wrapper {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding: 0;
  }
  
  #sidebar {
    width: 100% !important;
    margin-right: 0;
    margin-bottom: 0;
    order: 2; /* Move sidebar below images */
  }
  
  #sidebar h1 {
    display: block !important; /* Show header on mobile */
  }
  
  #content-area {
    width: 100% !important;
    align-items: flex-start;
    order: 1; /* Images first */
    min-width: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100%;
    min-height: 0;
  }
  
  /* When grid is hidden, collapse content-area on mobile */
  #content-area:has(#grid[style*="display: none"]) {
    min-height: 0 !important;
    height: auto !important;
  }
  
  .grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, 1fr) !important;
    display: grid !important;
  }
  
  .card {
    aspect-ratio: 2/3 !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  
  .card img {
    aspect-ratio: 2/3 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Mobile screens - adjust text and images */
@media (max-width: 768px) {
  /* Hide sidebar (title and description) when test is active (grid is visible) */
  #sidebar {
    display: none !important;
  }
  
  /* Mobile round number display - shown below images */
  .mobile-round-number {
    display: none; /* Hidden by default, shown via JS when grid is visible */
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 12px;
    margin-bottom: 0;
    padding: 0;
  }
  
  #test-wrapper {
    padding: 0;
    gap: 0;
  }
  
  h1 {
    font-size: 32px;
  }
  
  #round-info {
    font-size: 18px;
  }
  
  #description {
    font-size: 16px;
  }
  
  .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 8px !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
  }
  
  #grid {
    gap: 8px !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
  }
  
  .card img {
    aspect-ratio: 2/3 !important;
  }
}

/* Desktop: hide mobile round number, show sidebar */
@media (min-width: 769px) {
  .mobile-round-number {
    display: none !important;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  h1 {
    font-size: 28px;
  }
  
  #round-info {
    font-size: 16px;
  }
  
  #description {
    font-size: 14px;
  }
  
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
  }
  
  #grid {
    gap: 8px !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
  }
  
  .card img {
    aspect-ratio: 2/3 !important;
  }
}

/* === 0. Base highlight class === */
/* You wrap <mark class="hl random-hl-X">word</mark> */
mark.hl {
  padding: 0 4px !important;
  border-radius: 3px !important;
  background: none !important;
  color: inherit !important;
}

/* === 1. Soft Marker (classic highlighter look) === */
mark.hl.hl-soft {
  background: #7E7BFF55 !important;
}

/* === 2. Gradient Marker (a smoother, blended stroke) === */
/* mark.hl.hl-gradient {
  background: linear-gradient(
    110deg,
    #7E7BFF55 10%,
    #7E7BFF33 45%,
    #7E7BFF55 90%
  ) !important;
}*/

/* === 3. Blurred Marker (felt-tip "bleeding" effect) === */
/*
mark.hl.hl-blur {
  background: #7E7BFF44 !important;
  box-shadow:
    0 0 6px #7E7BFF55,
    0 0 12px #7E7BFF33 !important;
  border-radius: 4px !important;
}*/

/* === 4. Skewed Marker (hand-drawn skew) === */
/*mark.hl.hl-skew {
  background: #7E7BFF55 !important;
  padding: 1px 5px 2px !important;
  border-radius: 4px !important;
  transform: skew(-3deg) !important;
}*/

/* === 5. Rotated Marker (slight "human" imperfection) === */
/*mark.hl.hl-rotate {
  background: #7E7BFF44 !important;
  border-radius: 3px 5px 3px 5px !important;
  padding: 1px 6px 2px !important;
  transform: rotate(-1.2deg) !important;
}*/

/* === 6. Marker Underline (not filled, very elegant) === */
mark.hl.hl-underline {
  background-image: linear-gradient(#706ef939 0 0) !important;
  background-size: 100% 45% !important;
  background-position: 0 80% !important;
  background-repeat: no-repeat !important;
  padding: 0 2px !important;
  background-color: transparent !important;
}

/* === 7. Underline Blurred (soft neon ink under text) === */
/*mark.hl.hl-underline-blur {
  background-image: linear-gradient(#7E7BFF55 0 0) !important;
  background-size: 100% 50% !important;
  background-position: 0 85% !important;
  background-repeat: no-repeat !important;
  padding: 0 2px !important;
  box-shadow: inset 0 -4px 6px #7E7BFF33 !important;
  background-color: transparent !important;
}*/

/* mark.hl.hl-messy {
  background: #7E7BFF55 !important;
  border-radius: 6px 10px 7px 11px !important;
  box-shadow:
    0 0 6px #7E7BFF55,
    0 0 12px #7E7BFF44,
    inset 0 -4px 8px #7E7BFF44 !important;
  padding: 2px 6px !important;
  transform: rotate(-1deg) !important;
}*/

mark.hl.hl-handwritten {
  background: none !important;
  position: relative !important;
}

mark.hl.hl-handwritten:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  height: 3px !important;
  background: #5856f555 !important;
  border-radius: 1px !important;
  transform: rotate(0deg) !important;
  box-shadow:
    0 0 1px #5856f555,
    0 0 2px #7E7BFF33 !important;
}

/* Animated three-dot loader for screenshot export */
.dot-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: 0;
  animation: revealDots 1s steps(4, end) infinite;
}

@keyframes revealDots {
  0%   { width: 0; }
  25%  { width: 0.4em; }
  50%  { width: 0.8em; }
  75%  { width: 1.2em; }
  100% { width: 0; }
}