/* Fourier suite — shared styles. Layers on the global /style.css.
   Self-contained (these pages don't load functions.css/trig.css). */

:root {
  --sum: #3b6fe0;     /* blue  — your partial-sum wave / traced output */
  --target: #7c8aa5;  /* slate — the ideal target shape */
  --part: #2fbf71;    /* green — individual harmonics */
  --circ: rgba(160,107,255,.5); /* purple — epicycle circles */
  --vec: #ff8a3d;     /* orange — rotating vectors */
}

.edu-wide { max-width: 820px; }

.crumbs { font-size: 13px; color: var(--muted); margin: -6px 0 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .5; margin: 0 7px; }

.fr-demo { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 20px; margin: 18px 0 26px; }
.fr-demo h3 { margin: 0 0 4px; font-size: 18px; }
.fr-demo .demo-hint { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

.fr-stage { display: flex; justify-content: center; }
svg.fr-svg { width: 100%; height: auto; max-width: 640px; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }

/* SVG primitives */
.fr-axis { stroke: rgba(255,255,255,.22); stroke-width: 1.5; }
.fr-grid { stroke: rgba(255,255,255,.10); stroke-width: 1; }
.fr-target { fill: none; stroke: var(--target); stroke-width: 2.5; stroke-dasharray: 6 6; opacity: .85; }
.fr-sum { fill: none; stroke: var(--sum); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.fr-part { fill: none; stroke: var(--part); stroke-width: 1.5; opacity: .45; }
.fr-circle { fill: none; stroke: var(--circ); stroke-width: 1.2; }
.fr-vector { stroke: var(--vec); stroke-width: 2; stroke-linecap: round; }
.fr-connector { stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fr-tip { fill: var(--vec); stroke: var(--bg-bot); stroke-width: 1.5; }
/* winding machine */
.fr-refcircle { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 1; }
.fr-origin { fill: rgba(255,255,255,.45); }
.fr-wind { fill: none; stroke: var(--sum); stroke-width: 1.6; opacity: .9; stroke-linejoin: round; }
.fr-comline { stroke: var(--vec); stroke-width: 1.5; opacity: .7; }
.fr-com { fill: var(--vec); stroke: var(--bg-bot); stroke-width: 1.5; }
.fr-transform { fill: none; stroke: var(--part); stroke-width: 2.5; stroke-linejoin: round; }
.fr-marker { stroke: rgba(255,255,255,.35); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fr-axislabel { fill: var(--muted); font-size: 11px; font-family: inherit; }
/* live audio spectrum */
.fr-spectrum { fill: rgba(59,111,224,.28); stroke: var(--sum); stroke-width: 1.4; stroke-linejoin: round; }
.fr-anchor-lbl { fill: var(--vec); font-size: 13px; font-weight: 700; font-family: inherit; }

/* series readout */
.fr-series { text-align: center; font-size: 16px; line-height: 1.6; margin: 14px 0 4px; padding: 11px 14px;
  border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); overflow-x: auto;
  font-variant-numeric: tabular-nums; }
.fr-series-lbl { color: var(--muted); font-size: 13px; }

/* harmonic sliders grid */
.fr-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 16px 0 4px; }
@media (max-width: 560px) { .fr-sliders { grid-template-columns: 1fr; } }
.fr-slider { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fr-sl-name { min-width: 64px; color: var(--ink); font-weight: 650; }
.fr-slider input[type=range] { flex: 1; accent-color: var(--accent); height: 26px; }
.fr-sl-val { min-width: 42px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sum); }

/* controls (shared button / toggle / slider look) */
.fn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 16px; }
.fbtn { appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--ink);
  font-size: 14px; font-weight: 650; padding: 9px 13px; border-radius: 10px; transition: border-color .12s, background .12s, transform .1s; }
.fbtn:hover { border-color: var(--accent); transform: translateY(-1px); }
.fbtn.on { border-color: var(--accent); background: var(--accent-soft); }
.fn-slider { flex: 1 1 240px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.fn-slider .sl-name { min-width: 56px; color: var(--ink); }
.fn-slider input[type=range] { flex: 1; accent-color: var(--accent); height: 28px; }
.toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--accent); }

/* formula + callouts (same look as the other maths tools) */
.formula { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px;
  margin: 14px 0; font-size: 17px; line-height: 1.9; overflow-x: auto; }
.formula b { color: var(--accent); }
.usegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
@media (max-width: 540px) { .usegrid { grid-template-columns: 1fr; } }
.usebox { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.03); }
.usebox h4 { margin: 0 0 6px; font-size: 15px; }
.usebox.sum { border-color: rgba(59,111,224,.4); }
.usebox.part { border-color: rgba(47,191,113,.4); }