/* ...


 */

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

:root {
  /* Brand */
  --navy:       #0d1b5e;
  --blue:       #3b9fe8;
  --green:      #22c55e;
  --yellow:     #eab308; /* slightly richer than pure F5C400 for legibility on white */
  --red:        #e83b3b;
  --purple:     #7c4ddb;

  /* Bar colors */
  --bar-fast:   #22c55e;
  --bar-medium: #eab308;
  --bar-slow:   #e83b3b;
  --bar-down:   #fecaca;
}

.btn-add {
  background-color: var(--navy);
}

.btn-add:hover {
  opacity: 0.9;
}

.btn-add:active {
  transform: scale(0.98);
}
@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;
}