/* ===================================
   Oenophile Visual Lab - Sommelier Theme
   =================================== */

/* CSS Custom Properties */
:root {
  --color-background: #F9F7F2;

  /* Active scheme: Cellar Slate (changed 2026-03-22)
     --color-primary: #1C2B3A  (Deep Navy)
     --color-accent:  #C5A059  (Gold)

     Saved alternatives:
     Deep Burgundy (original):
       --color-primary: #4A0E0E
       --color-accent:  #C5A059
     Aged Bordeaux:
       --color-primary: #3D1A0A
       --color-accent:  #B87333
  */
  --color-primary: #1C2B3A;
  --color-accent: #C5A059;

  --color-text: #2D2D2D;
  --color-text-light: #6B6B6B;
  --color-white: #FFFFFF;
  --color-border: #E5E0D5;
  --color-shadow: rgba(28, 43, 58, 0.08);
  --color-shadow-hover: rgba(28, 43, 58, 0.15);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 3px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow);
  --shadow-lg: 0 8px 24px var(--color-shadow);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  --sidebar-width: 240px;
}

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* prevent document-level horizontal expansion */
  scrollbar-gutter: stable; /* prevent layout shift when scrollbar appears/disappears */
}

body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

/* App Layout */
.app-container {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 100;
}

.sidebar-header {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-icon {
  width: 28px;
  height: 28px;
  color: var(--color-accent);
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.logo-pretext {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
}

.nav-menu {
  list-style: none;
  padding: 1rem 0;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  font-weight: 500;
  font-size: 0.9375rem;
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
  background-color: rgba(197, 160, 89, 0.2);
  border-left: 3px solid var(--color-accent);
}

.nav-item svg {
  width: 20px;
  height: 20px;
  opacity: 0.85;
}

.nav-item.active svg {
  color: var(--color-accent);
  opacity: 1;
}

/* Main Content */
.main-content {
  flex: 1;
  min-width: 0;  /* allow flex item to shrink below content size */
  margin-left: var(--sidebar-width);
  padding: 2rem;
  min-height: 100vh;
}

/* Views */
.view {
  display: none;
  animation: fadeIn var(--transition-base);
}

.view.active {
  display: block;
}

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

.view-header {
  margin-bottom: 2rem;
}

.view-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.view-subtitle {
  color: var(--color-text-light);
  font-size: 1rem;
}

/* Cards */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 1.5rem;
  transition: box-shadow var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: #3a0b0b;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background-color: var(--color-background);
  border-color: var(--color-primary);
}

/* ===================================
   Identifier Dashboard
   =================================== */
.identifier-container {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
}

.identifier-grid-card {
  display: flex;
  flex-direction: column;
}

.identifier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex: 1;
}

.identifier-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.identifier-item:hover {
  border-color: var(--color-accent);
  background-color: rgba(197, 160, 89, 0.05);
}

.identifier-item.selected {
  border-color: var(--color-primary);
  background-color: rgba(74, 14, 14, 0.08);
}

.identifier-item svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.identifier-item.selected svg {
  color: var(--color-accent);
}

.identifier-item span {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* Results Card */
.results-card {
  height: fit-content;
  position: sticky;
  top: 2rem;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.results-placeholder {
  color: var(--color-text-light);
  font-style: italic;
  text-align: center;
  padding: 2rem 1rem;
}

.result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: var(--color-background);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
}

.result-item-info h4 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
}

.result-item-info p {
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin-top: 0.25rem;
}

.result-item-type {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
}

.result-item-type.red {
  background-color: rgba(74, 14, 14, 0.1);
  color: var(--color-primary);
}

.result-item-type.white {
  background-color: rgba(197, 160, 89, 0.2);
  color: #8B7355;
}

/* ===================================
   Fruit Map
   =================================== */
.fruit-map-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  align-items: start;
}

.fruit-map-card {
  padding: 2rem;
}

.fruit-map-container {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.fruit-map {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  background:
    /* Grid lines */
    linear-gradient(to right, var(--color-border) 1px, transparent 1px),
    linear-gradient(to top, var(--color-border) 1px, transparent 1px),
    /* Color gradient */
    linear-gradient(
      to top,
      rgba(144, 238, 144, 0.15) 0%,
      rgba(255, 220, 180, 0.1) 50%,
      rgba(100, 20, 40, 0.12) 100%
    );
  background-size: 25% 25%, 25% 25%, 100% 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.axis-label {
  position: absolute;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

.y-axis-top {
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
}

.y-axis-bottom {
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
}

.x-axis-left {
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.x-axis-right {
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
}

.wine-node {
  position: absolute;
  width: 26px;
  height: 26px;
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  transform: translate(-50%, 50%);
  box-shadow: var(--shadow-sm);
}

.wine-node:hover {
  transform: translate(-50%, 50%) scale(1.2);
  box-shadow: var(--shadow-md);
  z-index: 10;
}

.wine-node-label {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-text);
  color: var(--color-white);
  font-size: 0.65rem;
  font-family: var(--font-body);
  white-space: nowrap;
  padding: 3px 6px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 20;
}

.wine-node:hover .wine-node-label {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.wine-node.red {
  border-color: var(--color-primary);
  background-color: rgba(74, 14, 14, 0.1);
}

.wine-node.white {
  border-color: var(--color-accent);
  background-color: rgba(197, 160, 89, 0.15);
}

.wine-node svg {
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.wine-node.red svg {
  color: var(--color-primary);
}

.wine-node.white svg {
  color: var(--color-accent);
}

/* Wine Detail Panel */
.wine-detail-wrapper {
  position: sticky;
  top: 2rem;
}

.wine-detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-text-light);
}

.wine-detail-placeholder svg {
  width: 40px;
  height: 40px;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.wine-detail-placeholder p {
  font-size: 0.9375rem;
}

.wine-detail-placeholder.hidden {
  display: none;
}

.wine-detail-card {
  display: none;
}

.wine-detail-card.visible {
  display: block;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border: none;
  background-color: var(--color-background);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
}

.close-btn:hover {
  background-color: var(--color-border);
}

.close-btn svg {
  width: 18px;
  height: 18px;
  color: var(--color-text-light);
}

.wine-detail-content h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.wine-detail-content .wine-type {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.wine-detail-section {
  margin-bottom: 1.25rem;
}

.wine-detail-section h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  margin-bottom: 0.5rem;
}

.identifier-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.identifier-tag {
  font-size: 0.8125rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--color-background);
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.structure-bars {
  display: flex;
  gap: 1.5rem;
}

.structure-bar {
  flex: 1;
}

.structure-bar-label {
  font-size: 0.8125rem;
  margin-bottom: 0.375rem;
}

.structure-bar-track {
  height: 8px;
  background-color: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.structure-bar-fill {
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 4px;
  transition: width var(--transition-base);
}

.region-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.region-tag {
  font-size: 0.8125rem;
  padding: 0.25rem 0.75rem;
  background-color: rgba(74, 14, 14, 0.08);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
}

/* ===================================
   Flashcards / Quiz
   =================================== */
.flashcard-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  max-width: 600px;
  margin: 0 auto;
}

.quiz-card {
  width: 100%;
  padding: 2rem;
  text-align: center;
}

.quiz-question {
  font-size: 1.125rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.quiz-identifiers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.quiz-identifiers .identifier-tag {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.quiz-option {
  padding: 1rem 1.5rem;
  background-color: var(--color-background);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quiz-option:hover:not(:disabled) {
  border-color: var(--color-primary);
  background-color: rgba(74, 14, 14, 0.05);
}

.quiz-option:disabled {
  cursor: not-allowed;
}

.quiz-option.correct {
  border-color: #2E7D32;
  background-color: rgba(46, 125, 50, 0.15);
  color: #2E7D32;
}

.quiz-option.incorrect {
  border-color: #C62828;
  background-color: rgba(198, 40, 40, 0.1);
  color: #C62828;
}

.quiz-feedback {
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: var(--radius-md);
}

.quiz-feedback.hidden {
  display: none;
}

.quiz-feedback.correct {
  background-color: rgba(46, 125, 50, 0.1);
}

.quiz-feedback.incorrect {
  background-color: rgba(198, 40, 40, 0.08);
}

.feedback-text {
  font-weight: 500;
}

.feedback-text.correct {
  color: #2E7D32;
}

.feedback-text.incorrect {
  color: #C62828;
}

.flashcard-controls .hidden {
  display: none;
}

.flashcard-answer {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}

.flashcard-controls {
  display: flex;
  gap: 1rem;
}

.quiz-score {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  color: var(--color-text-light);
  padding: 0.75rem 1.5rem;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.score-value {
  font-weight: 600;
  color: var(--color-primary);
}

/* ===================================
   Progress
   =================================== */
.progress-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 600px;
  margin: 2rem auto 0;
}

.progress-container > .btn {
  align-self: center;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background-color: var(--color-background);
  border-radius: var(--radius-md);
}

.stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.stat-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-light);
  margin-top: 0.5rem;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.history-placeholder {
  color: var(--color-text-light);
  font-style: italic;
  text-align: center;
  padding: 2rem 1rem;
}

.history-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: var(--color-background);
  border-radius: var(--radius-md);
}

.history-item-date {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.history-item-score {
  font-weight: 600;
  color: var(--color-primary);
}

/* ===================================
   Grape Varieties
   =================================== */
.grape-varieties-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 1.5rem;
  align-items: start;
}

.grape-list-sidebar {
  position: sticky;
  top: 2rem;
}

.grape-list-card {
  padding: 1rem;
}

.grape-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
}

.grape-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.grape-list-item:hover {
  background-color: var(--color-background);
  border-color: var(--color-border);
}

.grape-list-item.active {
  background-color: rgba(74, 14, 14, 0.08);
  border-color: var(--color-primary);
}

.grape-list-item svg:first-child {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.grape-list-item.active svg:first-child {
  color: var(--color-accent);
}

.grape-list-item span {
  flex: 1;
  font-weight: 500;
  font-size: 0.9375rem;
}

.grape-list-item svg:last-child {
  width: 16px;
  height: 16px;
  color: var(--color-text-light);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.grape-list-item.active svg:last-child {
  opacity: 1;
}

/* Grape Content Area */
.grape-content-area {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;          /* prevent grid item from blowing out */
  overflow-x: auto;      /* wide tables scroll instead of inflating layout */
}

.grape-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #6B1E1E 100%);
  color: var(--color-white);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.grape-hero-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.grape-hero-subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

.grape-hero-meta {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.grape-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}

.grape-hero-meta-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}

/* Color Swatches */
.wine-color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.color-dot.ruby        { background: linear-gradient(135deg, #9D2B3F 0%, #722233 100%); }
.color-dot.garnet      { background: linear-gradient(135deg, #7D2736 0%, #541C26 100%); }
.color-dot.inky        { background: linear-gradient(135deg, #2D0B2E 0%, #0F0518 100%); }
.color-dot.deep-purple { background: linear-gradient(135deg, #4A1060 0%, #2D0840 100%); }
.color-dot.violet      { background: linear-gradient(135deg, #6A2080 0%, #4A1060 100%); }
.color-dot.tawny       { background: linear-gradient(135deg, #B05020 0%, #7A3010 100%); }
.color-dot.amber       { background: linear-gradient(135deg, #C07820 0%, #8A5010 100%); }
.color-dot.golden      { background: linear-gradient(135deg, #D4A850 0%, #A07830 100%); }
.color-dot.pale-gold   { background: linear-gradient(135deg, #EED890 0%, #C8B060 100%); }
.color-dot.straw       { background: linear-gradient(135deg, #F0E8A0 0%, #D4CC70 100%); }
.color-dot.rose        { background: linear-gradient(135deg, #E87090 0%, #C84070 100%); }
.color-dot.salmon      { background: linear-gradient(135deg, #E89070 0%, #C86050 100%); }

.color-text {
  font-size: 0.9375rem;
  opacity: 0.9;
}

/* Content Sections */
.grape-section {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.grape-section-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-border);
}

.grape-section-subtitle {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.grape-section p {
  line-height: 1.8;
  margin-bottom: 1rem;
  color: var(--color-text);
}

.grape-section ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0;
}

.grape-section li {
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  position: relative;
  line-height: 1.7;
}

.grape-section li::before {
  content: "•";
  color: var(--color-accent);
  font-weight: bold;
  position: absolute;
  left: 0.5rem;
}

/* Feature Grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.feature-card {
  background: var(--color-background);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
}

.feature-card-title {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
}

.feature-card-text {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.6;
}

.memory-aid-card {
  background: linear-gradient(135deg, #FDF8EE 0%, #F5EDD5 100%);
  border: 1px solid var(--color-accent);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
}

.memory-aid-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--color-primary);
}

.memory-aid-card-header h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.memory-aid-card-header i {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--color-accent);
}

.memory-aid-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.memory-aid-list li {
  font-size: 0.95rem;
  color: var(--color-text);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.memory-aid-label {
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  font-size: 0.85rem;
  min-width: 80px;
}

/* Comparison Table */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
}

.comparison-table thead {
  background: var(--color-primary);
  color: var(--color-white);
}

.comparison-table th {
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.875rem;
}

.comparison-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.comparison-table tbody tr:hover {
  background: var(--color-background);
}

.comparison-table tbody tr:last-child td {
  border-bottom: none;
}

/* Region Map */
/* Google Maps globe link on region h4 subtitles */
.region-globe-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.6rem;
  padding: 0.2rem 0.5rem;
  color: #1a73e8;
  background: rgba(26, 115, 232, 0.08);
  border: 1px solid rgba(26, 115, 232, 0.3);
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.region-globe-link:hover {
  background: rgba(26, 115, 232, 0.15);
  border-color: rgba(26, 115, 232, 0.6);
  text-decoration: none;
  color: #1a73e8;
}

.region-globe-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Flavor Profile Chart */
.flavor-profile {
  background: var(--color-background);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
}

.flavor-category {
  margin-bottom: 1.5rem;
}

.flavor-category:last-child {
  margin-bottom: 0;
}

.flavor-category-title {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.flavor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flavor-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text);
}

.flavor-tag svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
}

/* Structure Bars (Enhanced) */
.structure-showcase {
  background: var(--color-background);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
}

.structure-showcase .structure-bars {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.structure-showcase .structure-bar {
  flex: auto;
}

.structure-showcase .structure-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.structure-showcase .structure-bar-track {
  height: 12px;
  background-color: var(--color-border);
  border-radius: 6px;
}

.structure-showcase .structure-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 6px;
}

/* ── Broken grape template compatibility fixes ───────────────────────
   44 grapes were generated with a different HTML template. Rather than
   editing each one, these rules make the alternate class names render
   identically to the canonical ones.
   ------------------------------------------------------------------ */

/* 1. Hero: force correct gradient (overrides per-grape inline style) */
.grape-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #6B1E1E 100%) !important;
}

/* 2. Grape cluster inside hero → hide (correct template puts it below) */
.grape-hero .grape-cluster-illustration {
  display: none;
}

/* 3. Meta badges (alternate class for grape-hero-meta-item) */
.meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.meta-badge svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}

/* 4. Sensory profile bars (alternate layout: label | bar | value in one row) */
.structure-bar-item {
  display: grid;
  grid-template-columns: 80px 1fr 90px;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.structure-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
}
.structure-bar-item .structure-bar {
  height: 12px;
  background: var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  flex: unset;
}
.structure-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent)) !important;
  border-radius: 6px;
}
.structure-value {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: right;
}

/* 5. Flavor category headings (alternate uses <h4> instead of .flavor-category-title) */
.flavor-category h4 {
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ===================================
   Responsive
   =================================== */
@media (max-width: 1024px) {
  .identifier-container {
    grid-template-columns: 1fr;
  }

  .results-card {
    position: static;
  }

  .fruit-map-layout {
    grid-template-columns: 1fr;
  }

  .wine-detail-wrapper {
    position: static;
  }

  .grape-varieties-layout {
    grid-template-columns: 1fr;
  }

  .grape-list-sidebar {
    position: static;
  }

  .grape-list {
    flex-direction: row;
    overflow-x: auto;
  }

  .grape-list-item {
    flex-shrink: 0;
    min-width: 160px;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-width: 200px;
  }

  .main-content {
    padding: 1.5rem;
  }

  .view-title {
    font-size: 1.5rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    top: auto;
    flex-direction: row;
  }

  .sidebar-header {
    display: none;
  }

  .nav-menu {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px)) 0;
    width: 100%;
    gap: 0;
  }

  .nav-menu::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    flex: 0 0 84px;
    min-width: 84px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    padding: 0.625rem 0.5rem;
    font-size: 0.6875rem;
  }

  .nav-item.active {
    border-left: none;
    border-top: 3px solid var(--color-accent);
  }

  .main-content {
    margin-left: 0;
    margin-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    padding: 1rem;
  }

  .identifier-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Collapse fixed-width two-column layouts to single column.
     minmax(0, 1fr) is critical — plain 1fr = minmax(auto, 1fr) which
     lets tracks expand to fit content, blowing out the layout. */
  .identifier-container {
    grid-template-columns: minmax(0, 1fr);
  }

  .fruit-map-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .grape-varieties-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .wine-pairing-container {
    gap: 1rem;
  }

  /* Remove sticky positioning — no fixed header to anchor against on mobile */
  .results-card,
  .wine-detail-wrapper,
  .grape-list-sidebar {
    position: static;
  }

  /* Limit grape list height so it doesn't dominate the screen */
  .grape-list {
    max-height: 200px;
  }

  /* Reduce card padding */
  .card {
    padding: 1rem;
  }

  /* Scale down large grape hero headings */
  .grape-hero {
    padding: 1.5rem;
  }

  .grape-hero-title {
    font-size: 1.75rem;
  }

  .grape-section {
    padding: 1.5rem;
  }

  .memory-aid-card {
    padding: 1.25rem 1.5rem;
  }

  /* Increase touch target sizes to meet 44px minimum */
  .btn {
    padding: 0.875rem 1.25rem;
  }

  .grape-list-item {
    padding: 0.875rem 1rem;
  }

  /* Make tables self-contained scrollable blocks — the standard
     responsive table technique. The table renders at its natural
     width inside a block box that scrolls horizontally. */
  .comparison-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.8125rem;
    max-width: 100%;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.625rem 0.75rem;
  }

  /* Belt-and-suspenders: prevent the content area from inflating the
     grid track. The table fix above is the real solution. */
  .grape-content-area {
    min-width: 0;
    overflow-x: hidden;
  }

  /* Replace min-width-based auto-fit grids with explicit columns —
     minmax(200px) and minmax(180px) would overflow a ~343px container */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* ===================================
   Wine Pairing Calculator
   =================================== */
.wine-pairing-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.pairing-selection-card,
.pairing-results-card {
  height: fit-content;
}

/* Quick Picks */
.quick-picks-section {
  margin-bottom: 1.5rem;
}

.section-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.quick-picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
}

.quick-pick-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
}

.quick-pick-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-white);
}

.quick-pick-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.quick-pick-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Category Selectors */
.category-selectors {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.category-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.category-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.category-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 0.8125rem;
  color: var(--color-text);
}

.category-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.category-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.category-btn svg {
  width: 14px;
  height: 14px;
}

/* Pairing Results */
.pairing-results {
  min-height: 200px;
}

.pairing-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-text-light);
}

.pairing-placeholder svg {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  opacity: 0.4;
}

.pairing-placeholder p {
  font-size: 0.9375rem;
  max-width: 280px;
}

/* Wine Recommendations */
.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wine-recommendation {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  position: relative;
}

.wine-recommendation.top-pick {
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.1), rgba(74, 14, 14, 0.05));
  border-color: var(--color-accent);
}

.top-pick-badge {
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
}

.top-pick-badge svg {
  width: 12px;
  height: 12px;
}

.recommendation-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.wine-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.wine-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-primary);
}

.wine-type {
  font-size: 0.75rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.match-score {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.score-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* Match Bar */
.match-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.match-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Flavor Bridges */
.flavor-bridges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.flavor-bridge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--color-text);
}

.flavor-bridge svg {
  width: 12px;
  height: 12px;
  color: var(--color-accent);
}

/* More Options */
.more-options {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.btn-text {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.btn-text:hover {
  color: var(--color-accent);
}

.btn-text svg {
  width: 16px;
  height: 16px;
}

.additional-wines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.additional-wines.hidden {
  display: none;
}

.wine-recommendation-compact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

.wine-recommendation-compact .wine-name {
  font-size: 0.875rem;
}

.match-score-small {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Wine Pairing Responsive */
@media (max-width: 1024px) {
  .wine-pairing-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .quick-picks-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .category-buttons {
    gap: 0.375rem;
  }

  .category-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
  }

  .category-btn svg {
    width: 12px;
    height: 12px;
  }
}

/* ===================================
   Wine Comparison
   =================================== */

/* Grape selector */
.comparison-selector {
  background: #fff;
  border: 1px solid #E5E0D5;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}

.comparison-selector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.comparison-selector-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.comparison-count {
  font-size: 0.8125rem;
  color: #6B6B6B;
}

.comparison-grape-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.comparison-grape-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid #E5E0D5;
  border-radius: 20px;
  background: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6B6B6B;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}

.comparison-grape-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.comparison-grape-pill.selected {
  border-color: var(--slot-color, var(--color-primary));
  background: color-mix(in srgb, var(--slot-color, var(--color-primary)) 10%, white);
  color: var(--slot-color, var(--color-primary));
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--slot-color, var(--color-primary));
}

.comparison-grape-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.comparison-grape-dot--red   { background: #4A0E0E; }
.comparison-grape-dot--white { background: #C5A059; }

/* Hint */
.comparison-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 3rem 1rem;
  color: #6B6B6B;
  font-size: 0.9375rem;
}

.comparison-hint svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.5;
}

/* Comparison cards grid */
.comparison-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}

.comparison-cards[data-count="3"] {
  grid-template-columns: repeat(3, 1fr);
}

/* Individual card */
.comparison-card {
  background: #fff;
  border: 1px solid #E5E0D5;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.comparison-card:hover {
  box-shadow: 0 4px 16px rgba(74, 14, 14, 0.08);
}

.comparison-card-header {
  padding: 1rem 1.125rem 0.875rem;
  background: #FAFAF8;
  border-bottom: 1px solid #E5E0D5;
}

.comparison-card-type {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.comparison-card-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.25;
}

/* Sections inside card */
.comparison-section {
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid #F0EDE8;
}

.comparison-section:last-child {
  border-bottom: none;
}

.comparison-section-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6B6B6B;
  margin: 0 0 0.625rem;
}

/* Structure bars */
.comparison-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.comparison-bar-row:last-child {
  margin-bottom: 0;
}

.comparison-bar-label {
  width: 58px;
  font-size: 0.8125rem;
  color: var(--color-text);
  flex-shrink: 0;
}

.comparison-bar-track {
  flex: 1;
  height: 6px;
  background: #E5E0D5;
  border-radius: 3px;
  overflow: hidden;
}

.comparison-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.comparison-bar-value {
  width: 18px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B6B6B;
  text-align: right;
  flex-shrink: 0;
}

/* Flavour tags */
.comparison-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.comparison-tag {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  background: rgba(74, 14, 14, 0.06);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 500;
}

/* Regions */
.comparison-regions {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.comparison-region {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  gap: 0.5rem;
}

.comparison-region strong {
  font-weight: 600;
  color: var(--color-text);
}

.comparison-region span {
  color: #6B6B6B;
  flex-shrink: 0;
}

/* ===================================
   Home View
   =================================== */
.home-intro-card {
  margin-bottom: 0;
}

.home-intro-card p {
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.home-intro-card p:last-child {
  margin-bottom: 0;
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.home-greeting-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
}

.home-greeting-text {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--color-primary);
  flex: 1;
}

.home-greeting-edit {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.home-greeting-edit:hover {
  opacity: 1;
}

.home-greeting-edit svg {
  width: 14px;
  height: 14px;
}

.home-greeting-setup-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 0.875rem;
  font-family: var(--font-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}

.home-greeting-setup-btn:hover {
  color: var(--color-primary);
}

.fact-of-day-card {
  border-left: 3px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.fact-of-day-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.fact-of-day-label svg {
  width: 13px;
  height: 13px;
}

.fact-of-day-text {
  color: var(--color-text);
  line-height: 1.65;
  font-size: 0.9375rem;
  margin: 0;
}

.home-explore-heading {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 1.5rem 0 1rem;
}

.home-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.home-section-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.home-section-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.home-section-card svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.home-section-card-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-primary);
}

.home-section-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

.home-about-card {
  margin-top: 1.5rem;
}

.home-about-card p {
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.home-about-card p:last-child {
  margin-bottom: 0;
}

.home-about-link {
  color: #1a6bb5;
  font-weight: 600;
  text-decoration: none;
}

.home-about-link:hover {
  text-decoration: underline;
}

.home-about-disclaimer {
  color: var(--color-text-light) !important;
  font-size: 0.875rem !important;
}

/* ===================================
   Blind Tasting Trainer
   =================================== */
.blind-tasting-container {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.blind-start-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.blind-start-icon svg {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
}

.blind-start-card > p {
  color: var(--color-text-light);
  line-height: 1.6;
  max-width: 420px;
  margin: 0;
}

.blind-scoring-table {
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
}

.blind-score-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--color-text-light);
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--color-border);
}

.blind-score-row:last-child {
  border-bottom: none;
}

.blind-pts {
  font-weight: 700;
  color: var(--color-primary);
}

.blind-score-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--color-text);
}

.blind-score-bar strong {
  color: var(--color-primary);
}

.blind-clues-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.blind-clue-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: fadeSlideIn 0.25s ease;
}

.blind-clue-number {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent);
  min-width: 42px;
}

.blind-clue-icon svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.blind-clue-label {
  font-size: 0.8rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  min-width: 110px;
}

.blind-clue-value {
  font-size: 0.9375rem;
  color: var(--color-text);
  font-weight: 500;
}

.blind-guess-heading {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0;
}

.blind-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.blind-option-btn {
  padding: 1rem 1.25rem;
  background: var(--color-background);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.blind-option-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-white);
}

.blind-option-btn:disabled {
  cursor: not-allowed;
}

.blind-option-btn.correct {
  border-color: #2E7D32;
  background: rgba(46, 125, 50, 0.1);
  color: #2E7D32;
}

.blind-option-btn.incorrect {
  border-color: #C62828;
  background: rgba(198, 40, 40, 0.08);
  color: #C62828;
}

.blind-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
}

.blind-result-icon svg {
  width: 48px;
  height: 48px;
}

.blind-result-icon.correct svg { color: #2E7D32; }
.blind-result-icon.incorrect svg { color: #C62828; }

.blind-result-grape {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 700;
}

.blind-result-score {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.blind-result-score-label {
  font-size: 0.875rem;
  color: var(--color-text-light);
  margin-top: 0.25rem;
}

.blind-result-total {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.blind-result-total strong {
  color: var(--color-primary);
}

.blind-result-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

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

/* Seasonal Calendar */
.month-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.month-pill {
  padding: 0.3rem 0.6rem;
  border: 1.5px solid var(--color-border, #E8E2D5);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted, #6B7280);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.month-pill:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.month-pill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.seasonal-dishes {
  margin-bottom: 0.25rem;
}

.seasonal-theme-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.seasonal-theme-label svg {
  width: 13px;
  height: 13px;
}

.occasion-group {
  margin-bottom: 1rem;
}

.occasion-group:last-child {
  margin-bottom: 0;
}

.occasion-group-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.occasion-group-label svg {
  width: 13px;
  height: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .comparison-cards,
  .comparison-cards[data-count="3"] {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   Wine Glossary
   =================================== */

.glossary-controls {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.glossary-top-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.glossary-search-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.glossary-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #6B6B6B;
  pointer-events: none;
}

.glossary-search {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid #E5E0D5;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.glossary-search:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74, 14, 14, 0.08);
}

.glossary-view-toggle {
  display: flex;
  border: 1px solid #E5E0D5;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.glossary-toggle-btn {
  padding: 0.5rem 1rem;
  border: none;
  background: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6B6B6B;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.glossary-toggle-btn + .glossary-toggle-btn {
  border-left: 1px solid #E5E0D5;
}

.glossary-toggle-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.glossary-toggle-btn:not(.active):hover {
  background: rgba(74, 14, 14, 0.04);
  color: var(--color-primary);
}

/* Category filter chips */
.glossary-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.glossary-chip {
  padding: 0.3125rem 0.75rem;
  border: 1px solid #E5E0D5;
  border-radius: 20px;
  background: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #6B6B6B;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.glossary-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.glossary-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Letter bar */
.glossary-letter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.glossary-letter-btn {
  width: 2rem;
  height: 2rem;
  border: 1px solid #E5E0D5;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #6B6B6B;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.glossary-letter-btn[data-gletter="all"] {
  width: auto;
  padding: 0 0.625rem;
  font-weight: 500;
}

.glossary-letter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.glossary-letter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Stats line */
.glossary-stats {
  font-size: 0.8125rem;
  color: #6B6B6B;
  margin: 0 0 1rem;
}

/* Section headers */
.glossary-section {
  margin-bottom: 2rem;
}

.glossary-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #E5E0D5;
}

.glossary-section-title--letter {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Card grid */
.glossary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Individual card */
.glossary-card {
  background: #fff;
  border: 1px solid #E5E0D5;
  border-radius: 8px;
  padding: 1rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 0.15s, transform 0.15s;
}

.glossary-card:hover {
  box-shadow: 0 4px 16px rgba(74, 14, 14, 0.09);
  transform: translateY(-1px);
}

.glossary-card-top {
  display: flex;
  align-items: center;
}

.glossary-term {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.3;
}

.glossary-definition {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
  flex: 1;
}

.glossary-example {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  padding-top: 0.5rem;
  border-top: 1px solid #E5E0D5;
  font-size: 0.8125rem;
  color: #6B6B6B;
  font-style: italic;
  line-height: 1.4;
}

.glossary-example-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-accent);
}

/* Empty state */
.glossary-empty {
  text-align: center;
  color: #6B6B6B;
  font-size: 0.9375rem;
  padding: 3rem 0;
}

/* Category badge colours */
.glossary-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1875rem 0.5rem;
  border-radius: 4px;
  line-height: 1.4;
}

.glossary-badge--structure      { background: rgba(74, 14, 14, 0.08);   color: #4A0E0E; }
.glossary-badge--tasting        { background: rgba(130, 85, 10, 0.1);   color: #7B5000; }
.glossary-badge--winemaking     { background: rgba(20, 90, 60, 0.1);    color: #115C3C; }
.glossary-badge--viticulture    { background: rgba(40, 100, 30, 0.1);   color: #285C1E; }
.glossary-badge--classification { background: rgba(28, 58, 140, 0.1);   color: #1C3A8C; }
.glossary-badge--styles         { background: rgba(110, 30, 120, 0.1);  color: #6E1E78; }
.glossary-badge--faults         { background: rgba(170, 50, 20, 0.1);   color: #AA3214; }
.glossary-badge--measurements   { background: rgba(25, 80, 150, 0.1);   color: #195096; }

@media (max-width: 600px) {
  .glossary-cards {
    grid-template-columns: 1fr;
  }

  .glossary-top-row {
    flex-direction: column;
    align-items: stretch;
  }

  .glossary-view-toggle {
    align-self: flex-start;
  }
}

/* ===================================
   Wine Style Recommender
   =================================== */

.recommender-picker {
  background: #fff;
  border: 1px solid rgba(197, 160, 89, 0.25);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.recommender-picker-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6B6B6B;
  margin-bottom: 1rem;
}

.recommender-grape-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.recommender-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.recommender-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #aaa;
  min-width: 3rem;
  padding-top: 0.4rem;
}

.recommender-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recommender-pill {
  padding: 0.3125rem 0.875rem;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
  background: none;
}

.recommender-pill[data-type="red"] {
  background: rgba(74, 14, 14, 0.07);
  color: #4A0E0E;
  border-color: rgba(74, 14, 14, 0.15);
}

.recommender-pill[data-type="red"]:hover {
  background: rgba(74, 14, 14, 0.14);
}

.recommender-pill[data-type="red"].active {
  background: #4A0E0E;
  color: #fff;
  border-color: #4A0E0E;
}

.recommender-pill[data-type="white"] {
  background: rgba(197, 160, 89, 0.1);
  color: #7B5000;
  border-color: rgba(197, 160, 89, 0.3);
}

.recommender-pill[data-type="white"]:hover {
  background: rgba(197, 160, 89, 0.2);
}

.recommender-pill[data-type="white"].active {
  background: #C5A059;
  color: #fff;
  border-color: #C5A059;
}

.recommender-hint {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  padding: 3rem 1rem;
  color: #aaa;
  font-size: 0.9375rem;
}

.recommender-hint svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  opacity: 0.5;
}

.recommender-results-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: 1.25rem;
}

.recommender-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.recommender-card {
  background: #fff;
  border: 1px solid rgba(197, 160, 89, 0.25);
  border-radius: 12px;
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.recommender-card:hover {
  box-shadow: 0 4px 16px rgba(74, 14, 14, 0.1);
  transform: translateY(-2px);
}

.recommender-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.recommender-card-name-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.recommender-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
}

.recommender-type-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
}

.recommender-type-badge--red {
  background: rgba(74, 14, 14, 0.08);
  color: #4A0E0E;
}

.recommender-type-badge--white {
  background: rgba(197, 160, 89, 0.15);
  color: #7B5000;
}

.recommender-match-pct {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

.recommender-match-bar-bg {
  height: 4px;
  background: rgba(197, 160, 89, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.recommender-match-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.recommender-description {
  font-size: 0.8125rem;
  color: #6B6B6B;
  line-height: 1.5;
  margin: 0;
}

.recommender-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.recommender-region {
  font-size: 0.75rem;
  background: var(--color-background);
  color: var(--color-text);
  border-radius: 4px;
  padding: 0.125rem 0.5rem;
  border: 1px solid rgba(0,0,0,0.08);
}

.recommender-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 0.25rem;
  letter-spacing: 0.03em;
  opacity: 0.65;
  transition: opacity 0.15s;
}
.recommender-explore-btn:hover { opacity: 1; }
.recommender-explore-btn svg { width: 0.875rem; height: 0.875rem; }

@media (max-width: 600px) {
  .recommender-group {
    flex-direction: column;
    gap: 0.375rem;
  }

  .recommender-group-label {
    padding-top: 0;
  }

  .recommender-cards {
    grid-template-columns: 1fr;
  }
}

/* Wine Wheel & Encyclopedia iframe views — full bleed, no internal padding */
#wine-wheel-view,
#wine-encyclopedia-view {
  margin: -2rem;
  height: 100vh;
  overflow: hidden;
}

@media (max-width: 640px) {
  #wine-wheel-view,
  #wine-encyclopedia-view {
    height: calc(100vh - 80px - env(safe-area-inset-bottom, 0px));
    margin: -1rem -1rem 0 -1rem;
  }
}

#wine-wheel-view iframe,
#wine-encyclopedia-view iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ===================================
   Serving & Glassware (Grape Varieties)
   =================================== */
.serving-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.serving-card {
  background: var(--color-background);
  border: 1px solid #E8E2D5;
  border-radius: 8px;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.serving-glass-icon {
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.serving-card-icon {
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.serving-card-icon svg {
  width: 36px;
  height: 36px;
}

.serving-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #6B7280);
}

.serving-card-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3;
}

.serving-temp-bar-wrap {
  width: 100%;
  background: linear-gradient(to right, #93c5fd, #6ee7b7, #fbbf24, #f87171);
  height: 6px;
  border-radius: 999px;
  position: relative;
  margin-top: 0.25rem;
}

.serving-temp-marker {
  position: absolute;
  top: -5px;
  width: 16px;
  height: 16px;
  background: white;
  border: 2.5px solid var(--color-primary);
  border-radius: 50%;
  transform: translateX(-50%);
}

.serving-temp-scale {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.65rem;
  color: var(--color-text-muted, #6B7280);
  margin-top: 0.2rem;
}

@media (max-width: 640px) {
  .serving-cards {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* ===================================
   Vintage Guide (Glossary tab)
   =================================== */
.vintage-region-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.vintage-region-btn {
  padding: 0.35rem 0.75rem;
  border: 1.5px solid #E8E2D5;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted, #6B7280);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.vintage-region-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.vintage-region-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.vintage-region-subtitle {
  font-size: 0.8rem;
  color: var(--color-text-muted, #6B7280);
  margin-bottom: 1.25rem;
}

.vintage-table {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vintage-row {
  display: grid;
  grid-template-columns: 3rem 7rem 7rem 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #E8E2D5;
}

.vintage-year {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-primary);
}

.vintage-stars {
  color: var(--color-accent);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.vintage-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
}

.vintage-r5 { background: rgba(197,160,89,0.2);  color: #8a6620; }
.vintage-r4 { background: rgba(39,103,73,0.15);  color: #1e5e3e; }
.vintage-r3 { background: rgba(43,108,176,0.15); color: #1e4d8c; }
.vintage-r2 { background: rgba(221,107,32,0.15); color: #9c4a10; }
.vintage-r1 { background: rgba(229,62,62,0.15);  color: #9b1c1c; }

.vintage-note {
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .vintage-row {
    grid-template-columns: 3rem 1fr;
    grid-template-rows: auto auto;
    gap: 0.25rem 0.75rem;
  }
  .vintage-stars { grid-column: 2; }
  .vintage-badge { grid-column: 1; grid-row: 2; }
  .vintage-note  { grid-column: 2; grid-row: 2; }
}

.hidden { display: none !important; }