/* fourier.css - migrated (.ui) page. Typography, sections, links, math, the demo control
 * system, tabs, callouts, and the footer come from the archetype. This file keeps the three
 * image canvases, the 3D canvas, the two 4-up control bands, the custom Image dropdown, and the
 * reconstruction-formula tooltip. */

/* --- Demo sub-headers (Demo 1 / Demo 2) --- */
.ui.fourier .fourier-demo-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.ui.fourier .fourier-demo-head .eyebrow { margin: 0; }
.ui.fourier .fourier-demo-head h3 { margin: 0; }

/* --- Three image canvases --- */
.ui.fourier .fourier-canvases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ui.fourier .fourier-canvas-card { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ui.fourier .fourier-canvas-card .figcap { margin: 0; }
.ui.fourier .fourier-canvas { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: var(--radius-md); background: #060607; border: 1px solid var(--hairline); }

/* --- Full-width control block (override the demo-controls grid, like pca) --- */
.ui.fourier .fourier-controls.demo-controls { display: block; margin-top: 20px; }

/* 4-up control band collapsing 4 -> 2 -> 1 by container width */
.ui.fourier .fourier-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 30px; align-items: start; }
@container (max-width: 780px) { .ui.fourier .fourier-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 460px) { .ui.fourier .fourier-band { grid-template-columns: 1fr; } }

/* --- Slider with inline readout --- */
.ui.fourier .fourier-slabel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ui.fourier .fourier-slabel .demo-label { margin: 0; }
.ui.fourier .fourier-out { font: 500 12px/1 var(--font-mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
.ui.fourier .fourier-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 2px; background: var(--hairline-strong); margin: 12px 0 2px; cursor: pointer; }
.ui.fourier .fourier-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); cursor: pointer; }
.ui.fourier .fourier-slider::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; }
.ui.fourier .fourier-subitem { margin-top: 16px; }

/* --- Checkboxes and radios --- */
/* .fourier-check is a <label> directly inside .demo-group, so it would otherwise pick up the
   uppercase, wide-tracked treatment that article-ui.css gives demo-group labels. Reset that so
   the checkbox text reads as a normal sentence-case option. */
.ui.fourier .fourier-check { display: flex; align-items: center; gap: 10px; font: 500 13px/1.35 var(--font-sans); letter-spacing: normal; text-transform: none; color: var(--text-2); cursor: pointer; }
.ui.fourier .fourier-check + .fourier-check { margin-top: 8px; }
.ui.fourier .fourier-check input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; cursor: pointer; }
.ui.fourier .fourier-radios { display: flex; flex-direction: column; gap: 8px; }
.ui.fourier .fourier-radio { display: flex; align-items: center; gap: 9px; font: 500 13px/1.3 var(--font-sans); color: var(--text-2); cursor: pointer; }
.ui.fourier .fourier-radio input { accent-color: var(--accent); width: 14px; height: 14px; flex: none; cursor: pointer; }
.ui.fourier .fourier-hint { font: 400 12px/1.45 var(--font-sans); color: var(--text-muted); margin: 7px 0 0; max-width: 44ch; }

/* --- Custom Image dropdown (real <select> hidden, custom UI on top) --- */
.ui.fourier .fourier-preset-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.ui.fourier .fourier-dd-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font: 500 13px/1.3 var(--font-sans); color: var(--text-2); background: none; border: 0; border-bottom: 1px solid var(--hairline-strong); padding: 6px 2px; cursor: pointer; }
.ui.fourier .fourier-dd-trigger .chev { width: 9px; height: 6px; flex: none; }
.ui.fourier .fourier-dd-wrap { position: relative; }
.ui.fourier .fourier-dd-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 100%; background: var(--surface-strong); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); padding: 5px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.ui.fourier .fourier-dd-menu[hidden] { display: none; }
.ui.fourier .fourier-dd-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: 500 13px/1.2 var(--font-sans); color: var(--text-2); background: none; border: 0; border-radius: 6px; padding: 9px 10px; cursor: pointer; }
.ui.fourier .fourier-dd-item:hover { background: rgba(255,255,255,.05); }
.ui.fourier .fourier-dd-item.sel { background: var(--accent-muted); color: #fff; }
.ui.fourier .fourier-dd-item.sel::after { content: ""; margin-left: auto; width: 4px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); }
.ui.fourier .fourier-dd-sep { height: 1px; background: var(--hairline); margin: 5px 6px; }
.ui.fourier .fourier-dd-upload { color: var(--text-2); }
.ui.fourier .fourier-dd-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* --- 3D surface canvas --- */
.ui.fourier .fourier-3d-canvas { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: #060607; cursor: grab; }
.ui.fourier .fourier-3d-canvas:active { cursor: grabbing; }

/* --- Basis-not-periodic warning --- */
.ui.fourier .fourier-warning { margin: 7px 0 0; padding: 6px 9px; border-left: 3px solid #c79a3a; background: rgba(199,154,58,.10); color: #e0bd6e; font: 400 12px/1.4 var(--font-sans); border-radius: 2px; max-width: 44ch; }

/* --- Reconstruction formula box + info tooltip --- */
.ui.fourier .fourier-formula-box { font-variant-numeric: tabular-nums; }
/* Info chip: a soft periwinkle fill (no hard border) tucked close to the formula label, matching
   the accent system. Brightens to a solid accent on hover/focus. */
.ui.fourier .fourier-info { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-muted); color: var(--accent-link); font: 600 9px/1 var(--font-sans); cursor: help; margin-left: 7px; vertical-align: middle; }
.ui.fourier .fourier-info:hover { background: var(--accent); color: #fff; }
.fourier-tip { position: fixed; max-width: 320px; background: var(--surface-strong); border: 1px solid rgba(255,255,255,.22); color: #e8e8ec; font: 400 12px/1.45 var(--font-sans); padding: 9px 11px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .1s; z-index: 1000; white-space: pre-line; box-shadow: 0 6px 24px rgba(0,0,0,.5); }

/* --- Canvas grid responsive --- */
/* The three panels are a comparison set (original / spectrum / reconstruction), so they stay
   side by side across the article column and only stack when the demo is genuinely narrow. */
@container (max-width: 560px) { .ui.fourier .fourier-canvases { grid-template-columns: 1fr; } }