/* ======================
   ROOT / BASE VARIABLES
   ====================== */

:root {
   --line-width: 1px;
 
   --color-page-bg: #f1f4f4;          /* outer page */
   --color-player-bg: #edf3f3;        /* top player row */
   /* Slightly less transparent paper for tabs + cards */
   --color-paper: rgba(255, 255, 255, 0.98);
    --color-card: #ffffff;
    --color-border: #c0c3c4;
    --color-border-strong: #000000;
  --color-text: #111111;
    --color-muted-text: #666666;

  --header-height: 72px;
    --page-max-width: 1466.67px;

  --radius-large: 18px;

  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  --font-family-base: "Arial Narrow", Arial, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-weight-base: 300; /* Thin weight for most text */
  --font-weight-headline: 700; /* Bold for tab headlines only */
  
  /* Paper texture - CSS grain pattern (can be replaced with image URL if needed) */
  --paper-texture-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.4'/%3E%3C/svg%3E");
  /* To use an image instead, change to: --paper-texture-grain: url("assets/paper-texture.jpg"); */
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-page-bg);
  background-image: var(--paper-texture-page, none);
  background-size: 200px 200px;
  background-repeat: repeat;
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--base-font-size, 16px);
  font-weight: var(--font-weight-base);
    line-height: 1.15;
}

  /* permanent left frame line */
body::before {
  content: "";
  position: fixed;
    inset-block: 0;
  left: 0;
    width: var(--line-width);
  background: var(--color-border-strong);
  pointer-events: none;
  z-index: 0;
}

  /* ======================
     PAGE FRAME / GRID
     ====================== */

.page {
  max-width: var(--page-max-width);
  margin: 0 auto;
  min-height: 100vh;
    border-left: var(--line-width) solid var(--color-border);
    border-right: var(--line-width) solid var(--color-border);
  position: relative;
    background: transparent;
  }
  
  /* vertical grid rails inside the page frame */
  .page-grid {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--line-width);
    background: var(--color-border);
    pointer-events: none;
    z-index: 1;
  }
  
  /* left inner rail (matches your side guides) */
  .page-grid--left {
    left: calc((100vw - var(--page-max-width)) / 2); /* same as page left border */
  }
  
  /* position inner rails relative to page width */
  .page-grid--inner-left {
    left: calc((100vw - var(--page-max-width)) / 2 + 60px);
  }
  
  .page-grid--inner-right {
    right: calc((100vw - var(--page-max-width)) / 2 + 60px);
  }
  
  /* horizontal line above header */
  .grid-line--top {
    height: var(--line-width);
    background: var(--color-border-strong);
  }
  
  /* ======================
     HEADER / PLAYER BAR
     ====================== */

.site-header {
  position: sticky;
  top: 0;
    z-index: 30;
  display: grid;
  grid-template-columns: 170px 64px minmax(0, 1.3fr) minmax(0, 1fr) 64px;
  min-height: var(--header-height);
  background: var(--color-player-bg);
    border-bottom: var(--line-width) solid var(--color-border-strong);
}

  /* header grid cells: all lines same thickness */
.header-cell {
  display: flex;
    align-items: center;              /* vertical centering */
    justify-content: flex-start;
  padding: 0 var(--spacing-md);
    font-size: 15px;
    border-left: var(--line-width) solid var(--color-border-strong);
}

.header-cell:first-child {
  border-left: none;
}

  /* logo cell */

.header-cell--logo {
  justify-content: center;
  }

  /* logo image in header bar */
  .logo-image {
    display: block;
    max-height: 40px;
    width: auto;
}

.logo-wordmark {
  text-align: left;
    line-height: 1.1;
}

  /* play button cell */

.header-cell--play {
  justify-content: center;
  padding: 0;
  border: none;
    border-left: var(--line-width) solid var(--color-border-strong);
  background: #ffffff;
  cursor: pointer;
}

.header-cell--play:focus-visible,
.header-cell--menu:focus-visible {
  outline: 2px solid #000;
  outline-offset: -2px;
}

.play-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #000;
  margin-left: 4px;
}

.header-cell--play.is-paused .play-icon {
  border-width: 0;
  border-color: transparent;
  box-shadow: 0 0 0 4px #000 inset, 8px 0 0 4px #000 inset;
}

  /* metadata cells */

.header-cell--now,
.header-cell--next {
    flex-direction: row;
    gap: 6px;
}

.meta-label {
  font-weight: 700;
  flex-shrink: 0;
}

/* Now Playing / Up Next text */
.meta-text {
  white-space: nowrap;
}

/* Wrapper for marquee scrolling */
.meta-text-wrapper {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.meta-text-wrapper--marquee {
  /* No padding - fill entire area */
}

/* Marquee behavior for Now Playing text - continuous scroll */
.meta-text-wrapper--marquee {
  position: relative;
}

.meta-text-wrapper--marquee .meta-text {
  display: inline-block;
  padding-right: 20px; /* 20px gap between repetitions */
  animation: nowPlayingMarquee var(--marquee-duration, 4s) linear infinite;
  will-change: transform;
}

.meta-text-wrapper--marquee:hover .meta-text,
.meta-text-wrapper--marquee:focus .meta-text {
  animation-play-state: paused;
}

@keyframes nowPlayingMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Move by one text instance + gap (1/15th of total width since we repeat 15 times) */
    /* The padding-right is included in each instance, so 1/15th accounts for text + gap */
    transform: translateX(calc(-100% / 15));
  }
}

  /* menu / detach cell */

.header-cell--menu {
  justify-content: center;
  padding: 0;
  border: none;
  border-left: var(--line-width) solid var(--color-border-strong);
  background: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.header-cell--menu:hover {
  background: var(--color-page-bg);
}

.header-cell--info {
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-icon {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}
  
  /* burger icon – exactly 3 lines */

.menu-icon {
  position: relative;
  width: 18px;
  height: 14px;
    display: inline-block;
}

.menu-icon::before,
.menu-icon::after,
  .menu-bar {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
    height: var(--line-width);
  background: #000;
}

.menu-icon::before {
  top: 0;
}

.menu-icon::after {
  bottom: 0;
}

  .menu-bar {
  top: 50%;
    transform: translateY(-50%);
}

  /* floating player state (toggled by player.js) */

.site-header.player--floating {
  position: fixed;
  top: auto;
  bottom: 24px;
  right: 24px;
  left: auto;
  width: min(540px, calc(100% - 48px));
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  cursor: grab;
}

.site-header.player--dragging {
  cursor: grabbing;
}

/* Archive player - floating when archive show is playing */
.archive-player {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: min(540px, calc(100% - 48px));
  background: var(--color-card);
  border: var(--line-width) solid var(--color-border-strong);
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow: hidden;
}

.archive-player[hidden] {
  display: none;
}

.archive-player-image {
  width: 100%;
  height: 200px;
  background: #e3e4e5;
  background-size: cover;
  background-position: center;
}

.archive-player-info {
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.archive-player-title {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archive-player-close {
  width: 32px;
  height: 32px;
  border: var(--line-width) solid var(--color-border-strong);
  background: var(--color-card);
  border-radius: 4px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.archive-player-close:hover {
  background: var(--color-page-bg);
}

  /* ======================
     LOADER OVERLAY
     ====================== */

.loading-overlay {
  position: fixed;
  inset: 0;
    background: rgba(241, 244, 244, 0.94);
    display: none; /* Disabled for now - change to 'flex' to re-enable */
  align-items: center;
  justify-content: center;
  z-index: 50;
}
  
  .loading-overlay:not([hidden]) {
    display: flex;
  }

/* Info Panel (anchored to player bar) */
.info-panel {
  position: fixed;
  top: calc(var(--header-height) + var(--spacing-md));
  right: var(--spacing-lg);
  width: min(400px, calc(100% - var(--spacing-lg) * 2));
  background: var(--color-card);
  border: var(--line-width) solid var(--color-border-strong);
  border-radius: 8px;
  z-index: 100; /* Above hero and panels */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.info-panel[hidden] {
  display: none;
}

.info-panel-close {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  width: 28px;
  height: 28px;
  border: var(--line-width) solid var(--color-border-strong);
  background: var(--color-card);
  border-radius: 4px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 1;
}

.info-panel-close:hover {
  background: var(--color-page-bg);
}

.info-panel-content {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
}

.info-panel-image {
  width: 120px;
  height: 120px;
  background: #e3e4e5;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  border: var(--line-width) solid var(--color-border);
}

.info-panel-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 0;
}

.info-panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--font-weight-headline);
  line-height: 1.2;
}

.info-panel-times {
  font-size: 14px;
  color: var(--color-muted-text);
  font-weight: var(--font-weight-base);
}

.info-panel-description {
  font-size: 14px;
  line-height: 1.5;
  font-weight: var(--font-weight-base);
  color: var(--color-text);
  margin-top: var(--spacing-xs);
}

.loading-inner {
  text-align: center;
}

.loading-box {
  width: 80px;
  height: 80px;
    border: var(--line-width) solid var(--color-border-strong);
  background: #ffffff;
    margin: 0 auto var(--spacing-md);
  animation: loader-jitter 1s infinite steps(4);
}

.loading-text {
  font-size: 14px;
}

@keyframes loader-jitter {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(4px, -2px);
  }
  50% {
    transform: translate(-3px, 3px);
  }
  75% {
    transform: translate(2px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

  /* ======================
     MAIN LAYOUT
     ====================== */

.site-main {
  padding: var(--spacing-lg);
    padding-bottom: 80px; /* breathing room above bottom border */
  }
  
  /* HERO – lowest layer, with parallax effect */
  
  .hero {
    position: relative;
    margin-top: var(--spacing-lg);
    margin-bottom: 15px; /* 15px spacing before archive */
    height: calc((100vh - var(--header-height)) * 0.75); /* 75% of viewport minus header */
    z-index: 1;
    overflow: hidden;               /* contain parallax movement */
  }

.hero-screen {
    position: fixed;                /* fixed for parallax control */
    /* Start under player bar (header) */
    top: calc(var(--header-height) + var(--spacing-lg)); /* under header, same gap as side margin */
    /* Hero is always slightly smaller than cards - add extra margin on both sides */
    left: calc(var(--spacing-lg) + 20px);        /* align with panels but inset 20px */
    /* Width is smaller than panel area - subtract extra margin on both sides */
    width: calc(100% - var(--spacing-lg) * 2 - 40px);
    max-width: calc(var(--page-max-width) - var(--spacing-lg) * 2 - 40px);
    /* Height extends further down so image reaches well below first tab */
    height: calc((100vh - var(--header-height)) * 0.9);
    box-sizing: border-box;
    z-index: 1;                     /* below panels */
  border-radius: var(--radius-large);
    border: var(--line-width) solid var(--color-border);
    background: #dedfe0 url('assets/hero_sample.jpg') center center / cover no-repeat;
    pointer-events: none;           /* allow clicking through to content below */
    will-change: transform;         /* optimize for parallax animation */
    overflow: hidden;
  }
  
  /* Cutout overlay on hero image */
  .hero-cutout-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
  }
  
  .hero-cutout-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Inside shadow for "stamped" effect - using box-shadow on container */
    opacity: 0.9;
  }
  
  /* Use pseudo-element for inside shadow effect */
  .hero-cutout-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
  }
  
  /* Color the SVG to match background - use CSS filters */
  .hero-cutout-svg {
    filter: brightness(0) saturate(100%);
    mix-blend-mode: screen;
  }
  
  /* Adjust cutout color to match page background per theme */
  body.theme-light .hero-cutout-svg,
  body:not(.theme-dark):not(.theme-warm):not(.theme-cool):not(.theme-green) .hero-cutout-svg {
    filter: brightness(0) invert(1);
  }
  
  body.theme-dark .hero-cutout-svg {
    filter: brightness(0) invert(0.1);
  }
  
  body.theme-warm .hero-cutout-svg {
    filter: brightness(0) sepia(1) hue-rotate(20deg) saturate(0.3) brightness(1.1);
  }
  
  body.theme-cool .hero-cutout-svg {
    filter: brightness(0) sepia(1) hue-rotate(200deg) saturate(0.3) brightness(1.1);
  }
  
  body.theme-green .hero-cutout-svg {
    filter: brightness(0) sepia(1) hue-rotate(100deg) saturate(0.3) brightness(1.1);
  }
  
  /* Adjust cutout color to match page background */
  body.theme-dark .hero-cutout-svg {
    filter: drop-shadow(inset 0 0 20px rgba(0, 0, 0, 0.5)) brightness(0) invert(1);
  }
  
  body.theme-warm .hero-cutout-svg {
    filter: drop-shadow(inset 0 0 20px rgba(139, 111, 71, 0.3)) brightness(0) sepia(1) hue-rotate(20deg) saturate(0.5);
  }
  
  body.theme-cool .hero-cutout-svg {
    filter: drop-shadow(inset 0 0 20px rgba(74, 111, 165, 0.3)) brightness(0) sepia(1) hue-rotate(200deg) saturate(0.5);
  }
  
  body.theme-green .hero-cutout-svg {
    filter: drop-shadow(inset 0 0 20px rgba(46, 125, 50, 0.3)) brightness(0) sepia(1) hue-rotate(100deg) saturate(0.5);
  }
  
  /* when archive covers hero, parallax stops - transform is controlled by JS */
  /* .hero-screen.parallax-frozen - JS handles the frozen state */
  
  /* constrain hero-screen to page container on large screens */
  @media (min-width: 1467px) {
    .hero-screen {
      /* On large screens, center the page and add spacing, but keep hero smaller than cards */
      left: calc((100vw - var(--page-max-width)) / 2 + var(--spacing-lg) + 20px);
      /* transform controlled by JS for parallax */
    }
    
    .hero-screen.parallax-frozen {
      transform: none;
    }
  }
  
  /* ======================
     PANELS & TABS
     ====================== */

.section {
  position: relative;
}

/* stacking container for Archive + Upcoming + Artists + About + Genre */
.section--archive {
  position: relative;
  z-index: 2; /* above hero - scrolls over it */
  /* Make section background transparent so tabs don't inherit page bg color.
     This lets the hero or underlying layers show through around the tabs. */
  background: transparent;
  /* CRITICAL: Sticky elements only stick as long as their containing block stays in viewport.
     Once the container's bottom edge passes the sticky position, all sticky elements scroll together.
     
     The spacer div at the end of this section provides enough height to keep the container
     in the viewport long enough for all panels to independently reach and stay at
     the sticky position. Without this, the container scrolls out and all panels move together. */
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2 columns for Artists (2fr) and About (1fr) */
  grid-template-rows: auto auto auto auto auto; /* 5 rows: Archive, Upcoming, Artists/About, Genre, Spacer */
  gap: 0;
  min-height: calc(100vh * 12); /* Ensure section is tall enough for all panels to reach sticky */
}

/* Archive spans both columns, first row */
.section--archive > .panel--archive {
  grid-column: 1 / -1; /* span all columns */
  grid-row: 1;
}

/* Upcoming in right column only (same width as About), second row */
.section--archive > .panel--upcoming {
  grid-column: 2; /* right column only */
  grid-row: 2;
  width: 100%;
  max-width: 100%;
}

/* Artists in first column, third row */
.section--archive > .panel--artists {
  grid-column: 1;
  grid-row: 3;
  width: 100%;
  max-width: 100%;
}

/* About in second column, third row */
.section--archive > .panel--about {
  grid-column: 2;
  grid-row: 3;
  width: 100%;
  max-width: 100%;
}

/* Genre in first column, fourth row (overlays Artists) */
.section--archive > .panel--genre {
  grid-column: 1;
  grid-row: 4;
  width: 100%;
  max-width: 100%;
}

/* Spacer element to keep .section--archive in viewport so sticky panels can stay stuck */
.section--archive-spacer {
  grid-column: 1 / -1; /* Span all columns */
  grid-row: 5; /* Place in a new row after Genre */
  height: calc(100vh * 10); /* Increased to ensure all panels stay sticky - must be tall enough */
  /* CRITICAL: This spacer ensures the container's bottom edge stays below the sticky position
     long enough for all panels (Archive, Upcoming, Artists, About, Genre) to independently reach
     the sticky line and remain stuck, even when stacked on top of each other.
     
     The container must stay in viewport until ALL panels have reached sticky position.
     Once a panel reaches sticky, it should NEVER move up again, even when others stack on top.
     
     The spacer must be in the grid and span all columns to provide proper height. */
}
  
  /* panel is the sheet – tab + body share borders */
  
  .panel {
    position: relative;
    z-index: 2;              /* above hero */
    margin-top: -24px;       /* overlaps hero slightly, like in mockup */
    width: 100%;              /* ensure all panels scale the same */
    max-width: 100%;         /* ensure panels don't exceed container */
  }
  
  /* global rule: multi-panel grids (like bottom-grid) should match single panel width */
  /* This ensures panels + gaps together equal the width of a single panel */
  .panel-grid {
    width: 100%;              /* ensure it takes full available width like archive */
    max-width: 100%;         /* match single panel width */
  }
  
  /* make entire archive panel sticky - initially not sticky, becomes sticky when hero is covered */
  .panel--archive {
    position: sticky;               /* sticky like CodePen cards */
    top: calc(var(--header-height) + var(--spacing-lg)); /* pinned so gap to header matches side margin */
    z-index: 4;                     /* base layer in the stack */
  }

  .panel--upcoming {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg)); /* same pin position as other panels */
    z-index: 5; /* above Archive (4) but below Artists (6) and About (7) */
  }
  
/* Artists and About stack on top of Archive and Upcoming */
.panel--artists {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-lg)); /* same pin position as archive */
  z-index: 6;                             /* above archive and upcoming */
  /* CRITICAL: Each panel must stick independently. Once it reaches sticky position,
     it stays there regardless of what's on top of it. */
}

.panel--about {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-lg)); /* same pin position as archive */
  z-index: 7;                             /* above artists and upcoming */
  /* CRITICAL: Each panel must stick independently. Once it reaches sticky position,
     it stays there regardless of what's on top of it. */
}

.panel--genre {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-lg)); /* same pin position as other panels */
  z-index: 8;                             /* above all other panels */
  /* CRITICAL: Each panel must stick independently. Once it reaches sticky position,
     it stays there regardless of what's on top of it. */
}
  
  .panel-tab {
  display: inline-block;
  background: var(--color-paper);
  background-image: var(--paper-texture-cards, none);
  background-size: 200px 200px;
  background-repeat: repeat;
    border: var(--line-width) solid var(--color-border-strong);
    border-bottom: none;     /* no line where it joins the body */
    border-radius: var(--tab-radius, 8px) var(--tab-radius, 8px) 0 0;
    padding: var(--spacing-xs) var(--spacing-lg) 6px;
  font-weight: var(--font-weight-headline);
    font-size: 22px;
    line-height: 1;
    min-height: 36px;        /* ensure consistent tab height */
    box-sizing: border-box;
    position: relative;
    margin-bottom: calc(-1 * var(--line-width)); /* overlap with body border */
    /* Allow horizontal movement when tabs overlap - smooth transition */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s ease;
    /* Make tabs clickable */
    cursor: pointer;
    user-select: none;
  }
  
  /* Hover state to indicate tabs are clickable */
  .panel-tab:hover {
    background-color: rgba(255, 255, 255, 1);
  }
  
  .panel-tab:focus-visible {
    outline: 2px solid var(--color-border-strong);
    outline-offset: -2px;
  }
  
  .panel-tab:hover {
    background: rgba(255, 255, 255, 1);
  }
  
  .panel-tab:active {
    transform: translateY(1px);
  }
  
  .panel-tab:focus-visible {
    outline: 2px solid var(--color-border-strong);
    outline-offset: 2px;
  }
  
  /* Class for tabs that need to shift right to avoid overlap */
  .panel-tab.shifted {
    transform: translateX(var(--tab-shift, 0));
  }
  
  /* extend tab's right border down to connect with panel body top border */
  .panel-tab::after {
    content: "";
    position: absolute;
    bottom: calc(-1 * var(--line-width));
    right: calc(-1 * var(--line-width));
    width: var(--line-width);
    height: var(--line-width);
    background: var(--color-border-strong);
  }
  
  
  /* sticky class no longer needed - entire panel is sticky now */
  
  .panel-body {
    /* Match the pull-tab's semi-transparent paper look */
    background: var(--color-paper);
    background-image: var(--paper-texture-cards, none);
    background-size: 200px 200px;
    background-repeat: repeat;
    border-style: solid;
    border-color: var(--color-border-strong);
    border-width: 0 var(--line-width) var(--line-width) var(--line-width);
    border-radius: 0 0 var(--tab-radius, 0) var(--tab-radius, 0);
    padding: var(--spacing-lg);
    position: relative;
    /* All panel bodies have the same height: from sticky line to bottom of viewport */
    height: calc(100vh - var(--header-height) - var(--spacing-lg));
    min-height: calc(100vh - var(--header-height) - var(--spacing-lg));
    max-height: calc(100vh - var(--header-height) - var(--spacing-lg));
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    box-sizing: border-box;
  }
  
  .panel-body::before {
    content: "";
    position: absolute;
    top: 0;
    /* Start the top border 1px earlier so it overlaps with pulltab's right border
       and connects cleanly with no gap. JS sets --tab-width on each panel. */
    left: calc(var(--tab-width, 0px) - var(--line-width) - 1px);
    right: 0;
    height: var(--line-width);
    background: var(--color-border-strong);
  }

  /* Nudge About panel left so its left border sits exactly on top of
     the Artists panel's right border (no visible double line) */
  .panel--about {
    margin-left: -1px;
  }
  
  
  /* ======================
     ARCHIVE TABLE
     ====================== */
  
  .panel-body--archive {
    padding-top: var(--spacing-lg);
    position: relative;
  }

  .panel-body--upcoming {
    padding-top: var(--spacing-lg);
    position: relative;
  }
  
  /* Archive/Upcoming scroll container */
  .archive-scroll-wrapper {
    position: relative;
    overflow: hidden;
  }
  
  /* Archive scroll arrows */
  .archive-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: var(--color-card);
    border: var(--line-width) solid var(--color-border-strong);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s ease, transform 0.1s ease;
  }
  
  .archive-scroll-arrow:hover {
    background: var(--color-page-bg);
    transform: translateY(-50%) scale(1.1);
  }
  
  .archive-scroll-arrow:active {
    transform: translateY(-50%) scale(0.95);
  }
  
  .archive-scroll-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }
  
  .archive-scroll-arrow--prev {
    left: var(--spacing-md);
  }
  
  .archive-scroll-arrow--next {
    right: var(--spacing-md);
  }
  
  /* Arrow icon - simple line shape */
  .archive-scroll-arrow-icon {
    width: 12px;
    height: 12px;
    border-style: solid;
    border-color: var(--color-border-strong);
    border-width: 0;
  }
  
  .archive-scroll-arrow--prev .archive-scroll-arrow-icon {
    border-left-width: var(--line-width);
    border-bottom-width: var(--line-width);
    transform: rotate(45deg);
    margin-left: 4px;
  }
  
  .archive-scroll-arrow--next .archive-scroll-arrow-icon {
    border-right-width: var(--line-width);
    border-top-width: var(--line-width);
    transform: rotate(45deg);
    margin-right: 4px;
  }
  
  /* one continuous table grid – only divider lines, no boxes */
  .archive-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    display: block;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  
  .archive-table::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  .archive-table tbody {
    display: table;
    width: 100%;
  }
  
  .archive-table td {
    border-right: none;       /* remove border, we'll use pseudo-element */
    border-bottom: var(--line-width) solid var(--color-border-strong);
    vertical-align: top;
    padding: var(--spacing-sm);
    position: relative;
  }
  
  /* vertical divider lines with 10% gap at top and bottom */
  .archive-table td:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: 0;
    width: var(--line-width);
    background: var(--color-border-strong);
  }
  
  .archive-cell {
  display: grid;
  grid-template-rows: auto auto 1fr;
    row-gap: var(--spacing-xs);
}

.archive-title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--font-weight-base);
    line-height: 1.2;
    /* Keep layout/spacing as if the title were a single line.
       Extra text can wrap to a second line visually, but the block
       only reserves one line of height so surrounding layout is unchanged. */
    min-height: 1.2em;  /* 1 line * 1.2 line-height */
    max-height: 1.2em;
    overflow: visible;
}

.archive-date {
  font-size: 18px;
  text-align: right;
}

.archive-thumb-wrapper {
  position: relative;
  margin-top: var(--spacing-xxs);
}

.archive-thumb {
  border-radius: 6px;
  background: #e3e4e5;
  min-height: 120px;
  width: 100%;
}

.archive-play-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.archive-thumb-wrapper:hover .archive-play-overlay {
  display: flex;
}

.archive-play-overlay:hover {
  background: rgba(0, 0, 0, 0.7);
}

.archive-play-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #ffffff;
  margin-left: 4px;
}

  .archive-thumb--default {
    background: #e3e4e5;
  }

  .archive-cell--placeholder .archive-title,
  .archive-cell--placeholder .archive-date {
    color: var(--color-muted-text);
  }

  .archive-placeholder {
    padding: var(--spacing-lg);
    text-align: center;
    font-size: 18px;
    color: var(--color-muted-text);
  }

  .upcoming-table .archive-cell {
    position: relative;
  }

  .upcoming-time {
    font-size: 16px;
    color: var(--color-muted-text);
    margin-bottom: var(--spacing-xs);
  }
  
/* Bottom panels wrapper - handles layout only, panels inside are sticky */
  /* artists sheet */
  
  .panel-body--artists {
    padding-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
}

.artist-list {
  margin: 0;
  padding: 0;
    list-style: none;
    overflow-y: auto;        /* scrollable when content overflows */
    flex: 1;                 /* take remaining space */
    min-height: 0;           /* allow flex item to shrink below content size */
}

.artist-list li {
    padding: var(--spacing-xs) 0;
    border-bottom: var(--line-width) solid var(--color-border-strong);
  font-size: 22px;
}

  .artist-list li:last-child {
    border-bottom: none;
  }

  .artist-list li.artist-placeholder {
    color: var(--color-muted-text);
  }

  /* Artist name button */
  .artist-name {
    background: none;
    border: none;
    padding: 0;
    font-weight: var(--font-weight-base);
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: color 0.2s ease;
  }

  .artist-name:hover:not(:disabled) {
    color: var(--color-text);
    text-decoration: underline;
  }

  .artist-name:disabled {
    cursor: default;
    color: var(--color-muted-text);
  }

  /* Artist dropdown container */
  .artist-dropdown {
    padding: 0 var(--spacing-md);
    background: var(--color-card);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition:
      max-height 0.25s ease,
      opacity 0.2s ease,
      margin-top 0.25s ease;
  }

  .artist-dropdown.is-open {
    max-height: 500px;
    opacity: 1;
    margin-top: var(--spacing-sm);
    padding-bottom: var(--spacing-md);
  }

  /* Artist info container */
  .artist-info {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--spacing-md);
  }

  .artist-info-image {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: start;
    justify-self: end;
    max-width: 220px;
    width: 220px;
  }

  .artist-info-image img {
    width: 100%;
    height: auto;
    border: none;
  }

  .artist-info-field {
    display: grid;
    gap: var(--spacing-xs);
  }

  .artist-info-field label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--color-muted-text);
  }

  .artist-info-value {
    font-size: 15px;
    line-height: 1.5;
  }

  .artist-info-value a {
    color: var(--color-text);
    text-decoration: none;
    border-bottom: var(--line-width) solid var(--color-border-strong);
    padding-bottom: 1px;
  }

  .artist-info-value a:hover {
    border-bottom-style: dashed;
  }

  .artist-events-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--spacing-xs);
  }

  .artist-events-list li {
    padding: var(--spacing-xs) 0;
    border-bottom: var(--line-width) solid var(--color-border);
    font-size: 14px;
  }

  .artist-events-list li:last-child {
    border-bottom: none;
  }

  .artist-info-loading,
  .artist-info-error {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--color-muted-text);
    font-size: 14px;
  }

  .artist-info-error {
    color: #cc0000;
  }
  
  /* about sheet */
  
  .panel-body--about {
  padding-top: var(--spacing-lg);
  }

  .panel-body--about p {
  margin: 0;
  font-size: 15px;
}

  /* contact block inside About */

  .about-contact {
    margin-top: var(--spacing-lg);
    border-top: var(--line-width) solid var(--color-border-strong);
    padding-top: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .about-contact-top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .contact-toggle-button {
    align-self: flex-start;
    padding: 6px 18px;
    font-size: 15px;
    font-family: inherit;
    border-radius: 999px;
    border: var(--line-width) solid var(--color-border-strong);
    background: #ffffff;
    cursor: pointer;
  }

  .contact-toggle-button:hover {
    background: #f8f9f9;
  }

  .contact-toggle-button:focus-visible {
    outline: 2px solid var(--color-border-strong);
    outline-offset: 2px;
  }

  .contact-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    color: var(--color-muted-text);
  }

  .contact-socials-label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 11px;
  }

  .contact-social-link {
    color: inherit;
    text-decoration: none;
    border-bottom: var(--line-width) solid var(--color-border-strong);
    padding-bottom: 1px;
  }

  .contact-social-link:hover {
    border-bottom-style: dashed;
  }

  .contact-socials-separator {
    opacity: 0.6;
  }

  .contact-form {
    border: var(--line-width) solid var(--color-border-strong);
    background: var(--color-card);
    padding: var(--spacing-md);
    display: grid;
    grid-template-columns: 1fr;
    row-gap: var(--spacing-sm);
  }

  .contact-form-row {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    column-gap: var(--spacing-sm);
    align-items: center;
  }

  .contact-form-row--textarea {
    align-items: flex-start;
  }

  .contact-form-row--actions {
    justify-content: flex-end;
    display: flex;
    grid-column: 1 / -1;
  }

  .contact-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .contact-input {
    font-family: inherit;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 4px;
    border: var(--line-width) solid var(--color-border);
    background: #f9fafb;
  }

  .contact-input--textarea {
    resize: vertical;
    min-height: 80px;
  }

  .contact-input:focus-visible {
    outline: 2px solid var(--color-border-strong);
    outline-offset: 1px;
  }

  .contact-submit-button {
    padding: 6px 18px;
    font-size: 14px;
    font-family: inherit;
    border-radius: 999px;
    border: var(--line-width) solid var(--color-border-strong);
    background: #ffffff;
    cursor: pointer;
  }

  .contact-submit-button:hover {
    background: #f2f4f4;
  }

  .contact-submit-button:focus-visible {
    outline: 2px solid var(--color-border-strong);
    outline-offset: 2px;
  }
  
  /* ======================
     GENRE/FORMAT PANEL
     ====================== */
  
  .panel-body--genre {
    padding-top: var(--spacing-lg);
    /* Height is set by .panel-body to match all other tabs */
  }
  
  .genre-buttons-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
  }
  
  .genre-button {
    padding: 6px 18px;
    font-size: 15px;
    font-family: inherit;
    border-radius: 999px;
    border: var(--line-width) solid var(--color-border-strong);
    background: var(--color-card);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    font-weight: 700;
  }
  
  .genre-button:hover {
    background: var(--color-page-bg);
  }
  
  .genre-button:focus-visible {
    outline: 2px solid var(--color-border-strong);
    outline-offset: 2px;
  }
  
  .genre-button.active {
    background: var(--color-text);
    color: var(--color-card);
    border-color: var(--color-text);
  }
  
  .genre-shows-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
  }
  
  .genre-show-card {
    display: grid;
    grid-template-rows: auto auto 1fr;
    row-gap: var(--spacing-xs);
  }
  
  .genre-show-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    min-height: 1.2em;
    max-height: 1.2em;
    overflow: visible;
  }
  
  .genre-show-date {
    font-size: 18px;
    text-align: right;
  }
  
  .genre-show-thumb {
    margin-top: var(--spacing-xxs);
    border-radius: 6px;
    background: #e3e4e5;
    min-height: 120px;
  }
  
  .genre-shows-empty {
    grid-column: 1 / -1;
    padding: var(--spacing-lg);
    text-align: center;
    font-size: 18px;
    color: var(--color-muted-text);
  }
  
  /* ======================
     JESTER PLACEHOLDERS
     ====================== */

.jester-egg {
  position: fixed;
  pointer-events: none;
  opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: 3;
}

.jester-egg--bottom {
  right: 60px;
  bottom: 40px;
}

.jester-egg--top {
  left: 80px;
  top: 80px;
}

.jester-egg.is-visible {
    opacity: 0.08;
}

.jester-silhouette {
  width: 260px;
  height: 260px;
    background: url("assets/jester_w.svg") center center / contain no-repeat;
  }
  
  /* ======================
     BASIC RESPONSIVE
     ====================== */
  
  @media (max-width: 1200px) {
    .archive-table tr td {
      width: 20%;
    }
  }
  
  @media (max-width: 900px) {
  .site-main {
    padding: var(--spacing-md);
  }

  .site-header {
    grid-template-columns: 60px 64px minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: var(--header-height);
  }

  .header-cell--logo {
    grid-column: 1 / 2;
    grid-row: 1;
    justify-content: center;
    padding: 0 var(--spacing-xs);
  }

  .logo-image {
    max-height: 40px;
    width: auto;
    display: block;
  }

  .header-cell--play {
    grid-column: 2 / 3;
    grid-row: 1;
    justify-content: center;
    padding: 0;
    border-left: var(--line-width) solid var(--color-border-strong);
    background: #ffffff;
  }

  .header-cell--menu {
    display: none; /* Hide detach toggle on mobile */
  }

  .header-cell--now {
    grid-column: 3 / 4;
    grid-row: 1;
    padding: 0 var(--spacing-md);
    font-size: 15px;
    flex-direction: row;
    gap: 6px;
  }

  .header-cell--next {
    display: none; /* Hide Up Next on mobile per point 15 */
  }

  .meta-label {
    font-weight: 700;
  }

  .meta-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .logo-image {
    max-height: 40px;
  }

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

  /* Prevent floating player on mobile */
  .site-header.player--floating {
    position: sticky !important;
    top: 0 !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: default !important;
  }

  /* Archive section - stack panels vertically on mobile */
  .section--archive {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .section--archive > .panel--archive {
    grid-column: 1;
    grid-row: 1;
  }

  .section--archive > .panel--artists {
    grid-column: 1;
    grid-row: 2;
  }

  .section--archive > .panel--about {
    grid-column: 1;
    grid-row: 3;
    margin-left: 0; /* Remove negative margin on mobile */
  }

  /* Archive table - 2 columns per row on mobile */
  .archive-table {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .archive-table tr {
    display: table-row;
  }

  .archive-table td {
    display: table-cell;
    width: 50%; /* 2 columns per row on mobile */
    border-right: none;
    border-bottom: var(--line-width) solid var(--color-border-strong);
    padding: var(--spacing-xs);
    vertical-align: top;
  }

  /* Hide 3rd, 4th, and 5th columns on mobile to ensure 2 per row */
  .archive-table td:nth-child(n+3) {
    display: none;
  }

  /* Remove all vertical dividers on mobile - no divider to the right of right show */
  .archive-table td::after {
    display: none;
  }

  /* Archive panel body - allow scrolling if needed but don't restrict height too much */
  .panel-body--archive {
    /* Height is set by .panel-body to match all other tabs */
    padding: var(--spacing-sm);
  }

  /* Archive cell adjustments for mobile */
  .archive-cell {
    display: grid;
    grid-template-rows: auto auto 1fr;
    row-gap: var(--spacing-xxs);
    height: 100%;
  }

  /* Archive thumb - maintain aspect ratio from desktop */
  .archive-thumb {
    min-height: 0;
    aspect-ratio: 4 / 3; /* Maintain aspect ratio similar to desktop proportions */
    width: 100%;
    height: auto;
  }

  /* Ensure background images maintain aspect ratio */
  .archive-thumb[style*="background-image"] {
    background-size: cover;
    background-position: center;
  }

  /* Hero adjustments for mobile */
  .hero {
    height: calc((100vh - var(--header-height)) * 0.5); /* Smaller hero on mobile */
    margin-bottom: var(--spacing-md);
  }

  .hero-screen {
    left: var(--spacing-md);
    width: calc(100% - var(--spacing-md) * 2);
    max-width: none;
    height: calc((100vh - var(--header-height)) * 0.6);
  }

  /* Panel adjustments */
  .panel {
    margin-top: 0; /* Remove negative margin on mobile */
  }

  .panel-tab {
    font-size: 18px;
    padding: var(--spacing-xs) var(--spacing-md) 6px;
  }

  .panel-body {
    padding: var(--spacing-md);
  }

  /* Contact form adjustments */
  .contact-form-row {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }

  .contact-label {
    margin-bottom: var(--spacing-xxs);
  }

  /* Artist list adjustments */
  .artist-list {
    max-height: none; /* Remove max-height constraint on mobile */
  }

  .artist-name {
    font-size: 18px;
  }

  /* About panel adjustments */
  .panel-body--about p {
    font-size: 14px;
    line-height: 1.4;
  }

  /* Jester eggs - hide on mobile */
  .jester-egg {
    display: none;
  }
  }
  
  /* ======================
     DEV TOOLS
     ====================== */
  
  .dev-tools-toggle {
    position: fixed;
    bottom: 24px;
    left: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-card);
    border: var(--line-width) solid var(--color-border-strong);
    font-size: 20px;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .dev-tools-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  }
  
  .dev-tools-toggle:active {
    transform: scale(0.95);
  }
  
  .dev-tools {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    background: var(--color-card);
    border: var(--line-width) solid var(--color-border-strong);
    border-radius: var(--radius-large);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .dev-tools[hidden] {
    display: none;
  }
  
  .dev-tools-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border-bottom: var(--line-width) solid var(--color-border-strong);
    background: var(--color-paper);
  }
  
  .dev-tools-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
  }
  
  .dev-tools-close {
    width: 32px;
    height: 32px;
    border: var(--line-width) solid var(--color-border-strong);
    background: var(--color-card);
    border-radius: 4px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
  }
  
  .dev-tools-close:hover {
    background: var(--color-page-bg);
  }
  
  .dev-tools-body {
    padding: var(--spacing-md);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .dev-tools-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .dev-tools-label {
    font-size: 14px;
    font-weight: var(--font-weight-base);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }
  
  .dev-tools-theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
  }
  
  .dev-tools-theme-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--line-width) solid var(--color-border-strong);
    background: var(--color-card);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease, transform 0.1s ease;
  }
  
  .dev-tools-theme-btn:hover {
    background: var(--color-page-bg);
    transform: translateY(-1px);
  }
  
  .dev-tools-theme-btn.active {
    background: var(--color-text);
    color: var(--color-card);
    border-color: var(--color-text);
  }
  
  .dev-tools-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  
  .dev-tools-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-border-strong);
    cursor: pointer;
    border: 2px solid var(--color-card);
  }
  
  .dev-tools-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-border-strong);
    cursor: pointer;
    border: 2px solid var(--color-card);
  }
  
  .dev-tools-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-border-strong);
  }
  
  .dev-tools-reset,
  .dev-tools-export {
    padding: var(--spacing-sm) var(--spacing-md);
    border: var(--line-width) solid var(--color-border-strong);
    background: var(--color-card);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
    width: 100%;
  }
  
  .dev-tools-reset:hover,
  .dev-tools-export:hover {
    background: var(--color-page-bg);
  }
  
  .dev-tools-theme-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
  }
  
  .dev-tools-tab-colors {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .dev-tools-color-picker-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs);
  }
  
  .dev-tools-color-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
  }
  
  .dev-tools-color-wrapper {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
  }
  
  .dev-tools-color-picker {
    width: 60px;
    height: 36px;
    border: var(--line-width) solid var(--color-border-strong);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px;
    background: var(--color-card);
  }
  
  .dev-tools-color-reset {
    padding: 6px 12px;
    border: var(--line-width) solid var(--color-border);
    background: var(--color-card);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.2s ease;
    flex: 1;
  }
  
  .dev-tools-color-reset:hover {
    background: var(--color-page-bg);
  }
  
  /* Theme-specific styles */
  body.theme-dark {
    --color-page-bg: #1a1a1a;
    --color-player-bg: #222222;
    --color-paper: rgba(30, 30, 30, 0.98);
    --color-card: #2a2a2a;
    --color-border: #444444;
    --color-border-strong: #ffffff;
    --color-text: #f0f0f0;
    --color-muted-text: #999999;
  }
  
  body.theme-warm {
    --color-page-bg: #f5f0e8;
    --color-player-bg: #f0e8dc;
    --color-paper: rgba(255, 250, 240, 0.98);
    --color-card: #fffaf0;
    --color-border: #d4c4b0;
    --color-border-strong: #8b6f47;
    --color-text: #3d2f1f;
    --color-muted-text: #8b7355;
  }
  
  body.theme-cool {
    --color-page-bg: #e8f0f5;
    --color-player-bg: #dce8f0;
    --color-paper: rgba(240, 248, 255, 0.98);
    --color-card: #f0f8ff;
    --color-border: #b0c4d4;
    --color-border-strong: #4a6fa5;
    --color-text: #1f2f3d;
    --color-muted-text: #5a6f8b;
  }
  
  body.theme-green {
    --color-page-bg: #e8f5e9;
    --color-player-bg: #c8e6c9;
    --color-paper: rgba(240, 255, 240, 0.98);
    --color-card: #f1f8e9;
    --color-border: #a5d6a7;
    --color-border-strong: #2e7d32;
    --color-text: #1b5e20;
    --color-muted-text: #558b2f;
  }
  
  /* Page Frame */
  body.page-frame {
    position: relative;
  }
  
  body.page-frame::before {
    content: "";
    position: fixed;
    inset: 0;
    border: 10px solid var(--color-border-strong);
    outline: 10px solid var(--color-border-strong);
    outline-offset: -20px;
    pointer-events: none;
    z-index: 1000;
    box-sizing: border-box;
  }
  
  body.page-frame .page {
    margin: 10px auto;
    max-width: calc(var(--page-max-width) - 20px);
    position: relative;
    z-index: 1;
  }
  
  body.page-frame .site-header {
    margin-left: 10px;
    margin-right: 10px;
    max-width: calc(var(--page-max-width) - 20px);
  }
  
  /* Grid overlay when enabled */
  body.show-grid .page-grid,
  body.show-grid .grid-line {
    background: rgba(255, 0, 0, 0.3) !important;
  }
  
  @media (max-width: 900px) {
    .dev-tools {
      width: 95%;
      max-height: 85vh;
    }
    
    .dev-tools-toggle {
    bottom: 12px;
      left: 12px;
      width: 40px;
      height: 40px;
      font-size: 18px;
  }
}