/*
  Fourier page CSS for the exact HTML structure using:

  <div class="interactive-grid two-col">
    <div class="panel">
      <canvas id="circleCanvas" ...></canvas>
    </div>
    <div class="panel">
      <canvas id="waveCanvas" ...></canvas>
    </div>
  </div>

  This file should be loaded after assets/styles.css.
*/


/* Page-specific aliases, because the original Fourier page used eyebrow/subtitle/equation */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--accent-2);
  margin: 0 0 12px;
  font-size: 0.82rem;
}

.subtitle {
  max-width: 850px;
  font-size: 1.18rem;
  color: var(--muted);
  margin-bottom: 0;
}

.text-block {
  max-width: 980px;
}

.equation {
  display: inline-block;
  margin: 8px 0 18px;
  font-size: 1.08rem;
}


/* Restore the original side-by-side animation layout */
.interactive-grid {
  display: grid;
  gap: 18px;
  align-items: stretch;
  width: 100%;
  margin-top: 18px;
}

.interactive-grid.two-col {
  grid-template-columns: minmax(320px, 0.9fr) minmax(460px, 1.1fr);
}


/* Panels around canvases */
.panel {
  background: linear-gradient(180deg, #ffffff, #f5f7f5);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

.panel.wide-panel {
  min-height: 320px;
}


/* Canvas rules scoped to this Fourier page */
#circleCanvas,
#waveCanvas,
#signalCanvas,
#spectrumCanvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: transparent;
}


/* Keep the unit circle panel visually compact and square-ish */
#circleCanvas {
  aspect-ratio: 1 / 1;
}


/* Keep traces and spectra wide rather than tall */
#waveCanvas {
  aspect-ratio: 64 / 42;
}

#signalCanvas,
#spectrumCanvas {
  aspect-ratio: 2 / 1;
}

.takeaway-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.takeaway,
.teaching-note,
.step-list,
.summary-list {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding: 1rem 1.2rem;
}

.takeaway h3,
.teaching-note h3,
.step-list h3 {
  margin-top: 0;
}

.teaching-note {
  margin-top: 1.25rem;
}

.small-equation {
  font-size: 1.05rem;
  opacity: 0.9;
}

.frequency-band-table {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.frequency-band-table div {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  padding: 1rem;
}

.frequency-band-table strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.frequency-band-table span {
  display: block;
  font-size: 0.95rem;
  opacity: 0.75;
  margin-bottom: 0.5rem;
}

.frequency-band-table p,
.summary-list p {
  margin-bottom: 0;
}

.step-list ol {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .takeaway-grid,
  .frequency-band-table {
    grid-template-columns: 1fr;
  }
}

/* Controls for this original Fourier page */
.controls {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}

.controls label {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-weight: 750;
  color: var(--ink);
}

.controls input[type="range"] {
  width: min(320px, 52vw);
}

.controls span {
  min-width: 54px;
  color: var(--accent);
  font-weight: 850;
}

.stacked-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.stacked-controls label {
  display: grid;
  gap: 7px;
  align-items: start;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

.stacked-controls input[type="range"] {
  width: 100%;
}


/* Four small equation cards */
.mini-explainer {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.mini-explainer > div {
  background: #fbfcfb;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}

.mini-explainer h3 {
  margin: 0 0 8px;
  color: var(--accent);
}

.mini-explainer p {
  margin: 0;
  color: var(--muted);
}


/* Lab link section */
.lab-link {
  background: linear-gradient(135deg, rgba(39, 76, 94, 0.08), rgba(107, 143, 113, 0.12));
}


/* Responsive fallback */
@media (max-width: 850px) {
  .interactive-grid.two-col {
    grid-template-columns: 1fr;
  }

  .stacked-controls,
  .mini-explainer {
    grid-template-columns: 1fr;
  }

  .controls {
    align-items: stretch;
  }

  .controls label {
    width: 100%;
  }

  .controls input[type="range"] {
    width: 100%;
  }
}