/* Viewport for timeline — on narrow screens it clips the rotated canvas */
.timeline-viewport {
  width: 100%;
  position: relative;
  background-color: #000;  /* Gaps between canvas and edge stripes */
  margin-top: -2px;       /* Remove subpixel gap between header and canvas at intermediate widths (~1050px) */
}

/* Timeline Canvas - 16:9 aspect ratio, centered on desktop when viewport > max-width */
#timeline {
  position: relative;
  width: 100%;
  max-width: var(--canvas-max-width);
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: var(--canvas-aspect-ratio);
  max-height: var(--canvas-max-height);
  overflow: hidden;
  container-type: inline-size;  /* Enable container queries for child scaling */
}

/* RWD: below this width rotate canvas 90° left so 16:9 lays vertically */
@media (max-width: 480px) {
  html {
    overflow-x: hidden;
    width: 100%;
  }

  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
  }

  #app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .timeline-viewport {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    align-self: stretch;
    height: calc(100vw * 16 / 9);
    overflow: hidden;
    position: relative;
  }

  #timeline {
    position: absolute;
    width: calc(100vw * 16 / 9);
    height: 100vw;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
  }

  /* Keep data glitch text readable: rotate 90° right so it stays horizontal on portrait screen */
  .data-glitch-layer .data-glitch {
    transform: rotate(90deg);
    transform-origin: left center;
  }
}

/* Visualization layers: fade-in when first painted (reduces jarring load) */
.viz-layer-fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.viz-layer-fade.ready {
  opacity: 1;
}

/* Data glitches: RWD font size (scales with canvas), optional random scale via --glitch-scale */
.data-glitch-layer .data-glitch {
  font-size: calc(var(--glitch-scale, 1) * clamp(0.75rem, 0.6cqi, 0.8rem)); /* min 12px, scales with canvas, max 0.8rem */
}

/* Stripes - canvas area only (inside #timeline) */
.stripes-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    var(--stripe-light) 50%,
    var(--stripe-dark) 50%
  );
  background-size: 100% calc(100% / 27);
}


/* Dark overlay on grid area only (dims the stripes in grid, not margins) */
/* Layer 2: Mask overlay */
.grid-overlay {
  position: absolute;
  top: 0;
  left: var(--canvas-margin);
  right: var(--canvas-margin);
  bottom: 0;
  z-index: 2;
  background-color: #000;
  opacity: var(--grid-overlay-opacity);
  pointer-events: none;
}

/* Day/Night background layer - shows daylight hours */
/* Layer 3: Day/Night */
.day-night-layer {
  position: absolute;
  top: 0;
  left: var(--canvas-margin);
  right: var(--canvas-margin);
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 0;  /* No gap - white separators come from hour-column borders */
  pointer-events: none;
  z-index: 3;
  opacity: 0.8;
}

/* Gwiazdy nocne – overlay wewnątrz każdej kolumny day-night (ta sama warstwa co niebo) */
.day-night-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.day-night-star {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
}

/* Air quality gradient - inside .timeline-grid: above viz (6), below hour labels (8) */
/* @property --header-bg-color allows CSS to interpolate the color inside the gradient,
   so header and canvas gradient transition in perfect sync without mask workarounds. */
.air-quality-gradient {
  position: absolute;
  top: 0;
  left: var(--canvas-margin);
  right: var(--canvas-margin);
  height: calc(100% * 8 / 27);  /* 8 stripes: opacity drops ~25% every 2 stripes */
  z-index: 7;
  background: linear-gradient(
    to bottom,
    var(--header-bg-color) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.timeline-grid .air-quality-gradient {
  left: 0;
  right: 0;
}

/* Grid sits on top with margins */
/* Layer 5: Grid container */
.timeline-grid {
  position: absolute;
  top: 0;
  left: var(--canvas-margin);
  right: var(--canvas-margin);
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: 0;  /* No gap - separators come from border-left on hour-column */
  z-index: 5;
}

.hour-column {
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, var(--grid-opacity, 1));
  background: none !important;  /* No background - overlay on gradient */
  background-color: transparent !important;
  z-index: 8;  /* Above visualizations (7), below news keywords (9) */
  transition: background-color var(--transition-normal) ease, border-color 0.2s ease;
}

/* Layer 8: Hour labels (inside hour-column, same stacking context) */
/* RWD: scale down on narrow canvas so labels don’t overlap */
.hour-label {
  text-align: center;
  font-size: clamp(0.4rem, 0.6cqi, 0.66rem);
  font-family: 'Oswald', sans-serif;
  padding: 0.25rem 0;
  background: none !important;  /* No background - overlay on gradient */
  background-color: transparent !important;
  color: rgba(255, 255, 255, var(--hour-labels-opacity, 1));
  position: relative;
  z-index: 8;
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Hide hour labels when toggled off */
.hour-label.hidden {
  opacity: 0 !important;
}