/* Fourier decomposition & synthesis tool
   Per-project convention: no inline <style>; shared site.css + refinements.css
   load first, this file adds only tool-specific rules. */

.fd-note { color: var(--muted); font-size: 14px; margin-top: 6px; }
.fd-note a { color: var(--accent); }
.fourier-decomposition .section-head h3 { font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--ink); letter-spacing: .01em; }

.examples-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 10px 0 4px;
  font-size: 14px;
  color: var(--muted);
}
.examples-row .button.secondary { padding: 5px 12px; font-size: 13px; }

.fd-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 22px 0 6px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.fd-controls .button { min-width: 72px; }
.fd-speed { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fd-speed input { accent-color: var(--accent); }
.fd-stage-label {
  margin-left: auto;
  font-family: var(--num);
  font-size: 13px;
  color: var(--accent-dark);
  font-weight: 600;
  letter-spacing: .02em;
  padding: 4px 10px;
  border: 1px solid var(--accent-quiet);
  border-radius: 999px;
  background: var(--accent-quiet);
}

/* Shared chart frame — scoped to the decomposition section so it does not
   override the tool page's other .chart-wrap frames (periodogram, signal). */
.fourier-decomposition .chart-wrap {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 8px;
  overflow-x: auto;
}
.fdg-graph { width: 100%; height: auto; display: block; overflow: visible; }

/* Axes & grid */
.fdg-axis { stroke: var(--line-strong); stroke-width: 1; }
.fdg-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.fdg-zero { stroke: var(--line-dark); stroke-width: 1; }
.fdg-tick { fill: var(--muted); font-family: var(--num); font-size: 11px; }
.fdg-axis-title { fill: var(--muted); font-family: var(--sans); font-size: 12px; }

/* Original signal bars */
.fdg-bar { fill: var(--accent); opacity: .82; }
.fdg-bar-label { fill: var(--accent-dark); font-family: var(--num); font-size: 11px; }

/* Magnitude spectrum */
.fd-spectrum,.fd-orbits,.fd-components,.fd-synthesis { margin-top: 34px; }
.fd-spectrum-bar { opacity: .84; }
.fd-spectrum-value { fill: var(--ink); font: 11px var(--num); }

/* DFT basis orbits: discrete positions only */
.fd-orbit-panel { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; margin-top: 14px; }
.fd-orbit-card { min-width: 0; padding: 8px 5px; border: 1px solid var(--line); background: var(--paper); text-align: center; }
.fd-orbit-card strong { display: block; color: var(--ink); font: 600 12px var(--num); }
.fd-orbit-card svg { display: block; width: 100%; height: auto; }
.fd-orbit-card span { color: var(--muted); font: 10px var(--num); }
.fd-orbit-ring { fill: none; stroke: var(--line-dark); stroke-width: 1; }
.fd-orbit-path { fill: none; stroke: var(--line-dark); stroke-width: 1; stroke-dasharray: 3 3; opacity: .65; }
.fd-orbit-node { fill: var(--paper); stroke: var(--line-dark); stroke-width: 1; }
.fd-orbit-start { fill: #e8eefc; stroke: #275ed7; stroke-width: 2; }
.fd-orbit-active { stroke: #fff; stroke-width: 1.6; }

/* Decomposition animation */
.fd-gallery { margin-top: 12px; }
.fd-decomp-group { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.fd-decomp-group.fd-visible { opacity: 1; pointer-events: auto; }
.fd-decomp-group.fd-dim { opacity: .18; }

.fd-decomp-dots { opacity: 0; transition: opacity .35s ease .05s; }
.fd-decomp-group.show-dots .fd-decomp-dots { opacity: 1; }
.fd-decomp-stems { opacity: 0; transition: opacity .35s ease; }
.fd-decomp-group.show-curve .fd-decomp-stems { opacity: .55; }
.fd-decomp-stem { stroke-width: 1.5; }

.fd-decomp-dot { stroke: #fff; stroke-width: 1.4; }
.fd-decomp-dot.in-set { stroke: var(--ink); stroke-width: 1.6; }
.fd-decomp-ref { fill: var(--line-dark); opacity: .18; }
.fd-decomp-meta {
  font-family: var(--num); font-size: 12px; fill: var(--muted);
}

/* Synthesis animation */
.fd-synth-group { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.fd-synth-group.fd-visible { opacity: 1; pointer-events: auto; }
.fd-synth-group.fd-dim { opacity: .22; }

.fd-synth-dot { stroke: #fff; stroke-width: 1.4; }
.fd-synth-set-dot { stroke: #fff; stroke-width: 1.6; }
.fd-synth-stem { stroke-width: 1.4; opacity: .38; }
.fd-synth-target-bar { fill: var(--line); opacity: .18; }

/* Legend */
.fd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
  font-family: var(--num);
  font-size: 12px;
  color: var(--muted);
}
.fd-legend .item { display: inline-flex; align-items: center; gap: 6px; }
.fd-legend .swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

@media (max-width: 560px) {
  .fd-stage-label { margin-left: 0; width: 100%; text-align: center; }
}

/* Phasor panels: complex-plane view of each Fourier component */
.fd-phasor-panel {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 14px 0 12px;
}
.fd-phasor {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 6px;
  opacity: .28;
  transition: opacity .4s ease, box-shadow .3s ease;
}
.fd-phasor.active {
  opacity: 1;
  box-shadow: 0 0 0 1.5px var(--accent-quiet);
}
.fd-phasor svg { display: block; width: 100%; height: auto; overflow: visible; }
.fd-phasor-title {
  text-align: center;
  font: 600 11px var(--num);
  color: var(--muted);
  margin: 4px 0 2px;
}
.fd-phasor-meta {
  text-align: center;
  font: 10px var(--num);
  color: var(--muted);
  white-space: nowrap;
}
.fdp-axis { stroke: var(--line); stroke-width: .8; }
.fdp-ring { fill: none; stroke: var(--line-dark); stroke-width: .8; stroke-dasharray: 2 2; }
.fdp-vector { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.fdp-vector.animated {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset .7s ease;
}
.fd-phasor.active .fdp-vector.animated { stroke-dashoffset: 0; }
.fdp-head { stroke-width: 0; }
.fdp-proj { stroke: var(--line-dark); stroke-width: .8; stroke-dasharray: 2 2; }
.fdp-label { fill: var(--muted); font: 9px var(--num); }
.fdp-resultant { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 4 3; }

/* Resultant phasor for synthesis */
.fd-resultant-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}
.fd-phasor-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 10px;
}
.fd-phasor-single svg { display: block; width: 100%; height: auto; overflow: visible; }
.fd-phasor-caption {
  margin-top: 8px;
  text-align: center;
  font: 11px var(--num);
  color: var(--muted);
}
.fd-synth-wrap { margin-top: 0; }

@media (max-width: 760px) {
  .fd-phasor-panel { grid-template-columns: repeat(3, 1fr); }
  .fd-orbit-panel { grid-template-columns: repeat(4, 1fr); }
  .fd-resultant-row { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .fd-phasor-panel { grid-template-columns: repeat(2, 1fr); }
  .fd-orbit-panel { grid-template-columns: repeat(2, 1fr); }
}