/* ...


 */

@import url('https://cdn.jsdelivr.net/npm/vanilla-cookieconsent@3.1.0/dist/cookieconsent.css');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Overlay scrollbars - don't take up content space */
  html {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
    scrollbar-gutter: stable; /* Prevent layout shift */
  }

  /* For Webkit browsers (Chrome, Safari, Edge) */
  html::-webkit-scrollbar {
    width: 8px;
    /* Position scrollbar as overlay */
  }

  html::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background-color 0.2s ease;
  }

  html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.6);
  }

  /* Force overlay behavior */
  * {
    scrollbar-width: thin;
  }

  /* Modern overlay scrollbars (supported in newer browsers) */
  @supports (scrollbar-gutter: stable) {
    html {
      scrollbar-gutter: stable both-edges; /* Prevent content shift */
    }
  }

  /* Alternative: Use CSS to force overlay positioning */
  body {
    position: relative;
  }

  /* Custom overlay scrollbar for specific containers if needed */
  .overlay-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent;
  }

  .overlay-scroll::-webkit-scrollbar {
    width: 6px;
    position: absolute;
    right: 0;
  }

  .overlay-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 3px;
  }
}

@layer components {
  /* Custom font classes for page titles */
  .font-title-inter {
    font-family: 'Inter', sans-serif;
  }

  .font-title-poppins {
    font-family: 'Poppins', sans-serif;
  }

  .font-title-space {
    font-family: 'Space Grotesk', sans-serif;
  }

  .font-title-mono {
    font-family: 'JetBrains Mono', monospace;
  }

  .font-title-serif {
    font-family: 'Playfair Display', serif;
  }

  /* Page title styles with different fonts */
  .page-title-inter {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: -0.025em;
  }

  .page-title-poppins {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .page-title-space {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .page-title-space-mono {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    letter-spacing: -0.05em;
  }

  .page-title-mono {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  .page-title-serif {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
}
.chart {
    width: 100%;
    height: 128px;
}

.chart canvas {
    width: 100%;
    height: 100%;
}

h1 {
    font-size: 1.5em;
    margin-bottom: 10px;
}
/* app/assets/stylesheets/variant_switcher.css
 *
 * Import this in application.css (development only, or always — it's a no-op
 * in production since the partial only renders in development):
 *
 *   @import "variant_switcher";
 *
 * Or inline it in your layout inside <% if Rails.env.development? %>
 */

/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --vs-bg:           #0f0f10;
  --vs-bg-hover:     #1a1a1e;
  --vs-border:       #2a2a30;
  --vs-accent:       #7c6dff;
  --vs-accent-dim:   rgba(124, 109, 255, 0.15);
  --vs-text:         #e8e8f0;
  --vs-text-muted:   #666680;
  --vs-active-bg:    rgba(124, 109, 255, 0.12);
  --vs-active-border:#7c6dff;
  --vs-shadow:       0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  --vs-radius:       10px;
  --vs-font:         'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --vs-z:            2147483647; /* max z-index */
}

/* ── Panel ─────────────────────────────────────────────────────────────────── */
.vs-panel {
  position:     fixed;
  bottom:       24px;
  right:        24px;
  z-index:      var(--vs-z);
  width:        220px;
  background:   var(--vs-bg);
  border:       1px solid var(--vs-border);
  border-radius: var(--vs-radius);
  box-shadow:   var(--vs-shadow);
  font-family:  var(--vs-font);
  font-size:    11px;
  color:        var(--vs-text);
  user-select:  none;
  overflow:     hidden;
  transition:   box-shadow 0.15s ease;
  /* Ensure it doesn't interfere with the page layout */
  pointer-events: auto;
}

.vs-panel.vs-dragging {
  box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.4);
  cursor: grabbing;
}

/* ── Header / drag handle ──────────────────────────────────────────────────── */
.vs-header {
  display:        flex;
  align-items:    center;
  gap:            7px;
  padding:        9px 12px;
  cursor:         grab;
  border-bottom:  1px solid transparent;
  transition:     border-color 0.15s, background 0.15s;
}

.vs-header:hover {
  background: var(--vs-bg-hover);
}

.vs-panel.vs-expanded .vs-header {
  border-bottom-color: var(--vs-border);
}

.vs-logo {
  color: var(--vs-accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.vs-title {
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--vs-text);
  flex: 1;
  font-size: 10px;
  text-transform: uppercase;
}

.vs-current-badge {
  font-size: 9px;
  padding: 2px 6px;
  background: var(--vs-accent-dim);
  color: var(--vs-accent);
  border-radius: 4px;
  border: 1px solid rgba(124, 109, 255, 0.3);
  letter-spacing: 0.02em;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vs-chevron {
  color: var(--vs-text-muted);
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.vs-panel.vs-expanded .vs-chevron {
  transform: rotate(180deg);
}

/* ── Body (collapsible) ────────────────────────────────────────────────────── */
.vs-body {
  display:        none;
  flex-direction: column;
  padding:        6px;
  gap:            2px;
  max-height:     320px;
  overflow-y:     auto;
}

.vs-body::-webkit-scrollbar       { width: 4px; }
.vs-body::-webkit-scrollbar-track { background: transparent; }
.vs-body::-webkit-scrollbar-thumb { background: var(--vs-border); border-radius: 2px; }

.vs-panel.vs-expanded .vs-body {
  display: flex;
}

/* ── Variant buttons ───────────────────────────────────────────────────────── */
.vs-btn {
  display:        flex;
  align-items:    flex-start;
  gap:            8px;
  padding:        7px 9px;
  background:     transparent;
  border:         1px solid transparent;
  border-radius:  6px;
  color:          var(--vs-text);
  cursor:         pointer;
  text-align:     left;
  font-family:    var(--vs-font);
  font-size:      11px;
  transition:     background 0.1s, border-color 0.1s;
  flex-direction: column;
  gap:            2px;
}

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

.vs-btn.vs-active {
  background:    var(--vs-active-bg);
  border-color:  var(--vs-active-border);
  color:         #b8b0ff;
}

.vs-btn .vs-dot {
  width:        6px;
  height:       6px;
  border-radius: 50%;
  background:   var(--vs-text-muted);
  flex-shrink:  0;
  margin-top:   3px;
  /* Keep dot in a row with label */
  align-self:   flex-start;
  display: inline-block;
}

/* Put dot and label on same row */
.vs-btn {
  flex-direction: row;
  align-items:    flex-start;
  flex-wrap:      wrap;
}

.vs-btn-label {
  flex: 1;
  line-height: 1.4;
}

.vs-btn.vs-active .vs-dot {
  background: var(--vs-accent);
  box-shadow: 0 0 6px rgba(124, 109, 255, 0.6);
}

.vs-btn-desc {
  display:     block;
  width:       100%;
  padding-left: 14px;
  font-size:   9.5px;
  color:       var(--vs-text-muted);
  line-height: 1.4;
  margin-top:  1px;
}

/* ── Keyboard hint ─────────────────────────────────────────────────────────── */
.vs-shortcut {
  font-size:   9px;
  color:       var(--vs-text-muted);
  text-align:  center;
  padding:     6px 6px 4px;
  letter-spacing: 0.03em;
  border-top:  1px solid var(--vs-border);
  margin-top:  4px;
}

/* ── In-page variant badge (overlaid on the active variant block) ─────────── */
.vs-variant-wrapper {
  position: relative;
}

.vs-variant-badge {
  position:    absolute;
  top:         6px;
  left:        6px;
  z-index:     calc(var(--vs-z) - 1);
  font-family: var(--vs-font);
  font-size:   9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding:     3px 8px;
  background:  var(--vs-accent);
  color:       #fff;
  border-radius: 4px;
  pointer-events: none;
  opacity:     0.85;
}

.vs-variant-badge--default {
  background: #3a8a4a;
}