/* Layout specific to the Fourier <-> Control Theory demo. */

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl) var(--spacing-2xl);
}

/* ============ Transport bar (shared play/scrub/speed, above the tabs) ============ */

.transport-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.transport-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-sm) var(--spacing-xl);
}

.transport-scrub {
  flex: 1;
  min-width: 120px;
}
.transport-scrub input[type='range'] { width: 100%; }

/* ============ Tabs ============ */

.tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0 var(--spacing-md);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}

.tab-btn {
  padding: 0.75rem 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--primary-accessible); border-bottom-color: var(--primary-accessible); }

.tab-panel { display: none; flex-direction: column; gap: var(--spacing-lg); }
.tab-panel.active { display: flex; }

/* ============ View grid (arm tab, control tab) ============ */

.view-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--spacing-lg);
  align-items: stretch;
}

/* Grid items default to min-width:auto (their min-content size), which can
   force a track wider than its minmax() ceiling and blow out the grid even
   though the track itself is correctly sized — the fix has to apply to the
   item, not just the track. Same story for .draw-layout below. */
.view-grid > *, .draw-layout > * {
  min-width: 0;
}

/* The Components card stretches to match the left column's (canvas + spectrum)
   height instead of leaving an empty gap below it; its own list scrolls. */
.components-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.components-card .card-header-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); }

/* The Control tab's right column (Bandwidth & tracking) has far less content
   than the left column (arm canvas + joint/spectrum plot), so the grid's
   default align-items:stretch left a large blank strip below its content.
   Size it to its own content instead of stretching to match. */
#panel-control .view-grid > .card {
  align-self: start;
}

.view-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 420px;
  border-radius: var(--radius-md);
  background: var(--bg-color);
  touch-action: none;
}

.view-canvas-wrap.small canvas { height: 260px; }

/* ============ Editor list ============ */

#editor {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  flex: 1 1 auto;
  min-height: 180px;
  max-height: 700px;
  overflow-y: auto;
  padding-right: var(--spacing-xs);
}

.editor-empty-hint {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
}

.editor-row {
  display: grid;
  grid-template-columns: 18px repeat(3, minmax(0, 1fr)) auto;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-color);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.editor-label {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.editor-row.selected { border-color: var(--primary-color); background: var(--surface-hover); }

.editor-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
}

.editor-field { display: flex; flex-direction: column; gap: 2px; }
.editor-field label { font-size: 0.65rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.editor-field input[type='number'] {
  width: 100%;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-color);
  color: var(--text-primary);
}
.editor-field input[type='range'] { width: 100%; height: 4px; }

.editor-header-row {
  display: grid;
  grid-template-columns: 18px repeat(3, minmax(0, 1fr)) auto;
  gap: var(--spacing-sm);
  padding: 0 var(--spacing-sm);
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.editor-footer { display: flex; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }

/* ---- Gesture-mode joint editor: mean angle + compact harmonic fields ---- */

.gesture-joint-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-areas: "swatch label" "mean mean" "harm harm";
  align-items: center;
  gap: var(--spacing-xs) var(--spacing-sm);
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--surface-color);
  margin-bottom: var(--spacing-xs);
}
.gesture-joint-row .editor-swatch { grid-area: swatch; }
.gesture-joint-row .editor-label { grid-area: label; grid-column: auto; margin-bottom: 0; }
.gesture-joint-row .editor-field { grid-area: mean; flex-direction: row; align-items: center; gap: var(--spacing-xs); }
.gesture-joint-row .editor-field input[type='number'] { width: 4.2rem; flex: none; }
.gesture-joint-row .editor-field input[type='range'] { flex: 1; }
.gesture-joint-row.selected { border-color: var(--primary-color); background: var(--surface-hover); }

.editor-harmonics { grid-area: harm; display: flex; flex-wrap: wrap; gap: 2px var(--spacing-xs); align-items: center; }
.editor-harmonics .harm-label { font-size: 0.65rem; color: var(--text-secondary); text-transform: uppercase; }
.editor-harmonics input[type='number'] {
  width: 3.4rem;
  padding: 0.2rem 0.3rem;
  font-size: 0.78rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-color);
  color: var(--text-primary);
}

.editor-finger-section {
  margin-bottom: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs);
}
.editor-finger-section > summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  padding: var(--spacing-xs);
}
.editor-finger-section .gesture-joint-row { margin: var(--spacing-xs) 0 0; }

/* ============ Draw tab ============ */

.draw-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--spacing-lg); align-items: start; }

.draw-canvas-wrap { position: relative; }
.draw-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 480px;
  border-radius: var(--radius-md);
  background: var(--bg-color);
  touch-action: none;
  cursor: crosshair;
}

.draw-hint {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  padding: 0.4rem 0.8rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  pointer-events: none;
}

.draw-panel { display: flex; flex-direction: column; gap: var(--spacing-md); }
.draw-panel .btn-row { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }

.stat-row { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--text-secondary); }
.stat-row strong { color: var(--text-primary); }

/* ============ Bandwidth / control panel ============ */

.bode-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: 140px;
  border-radius: var(--radius-md);
  background: var(--bg-color);
}

/* ============ Tutorial ============ */

#tutorial {
  line-height: 1.7;
}
#tutorial h2 { margin-top: var(--spacing-xl); }
#tutorial h2:first-child { margin-top: 0; }
#tutorial ul, #tutorial ol { margin: var(--spacing-sm) 0 var(--spacing-md) var(--spacing-xl); color: var(--text-secondary); }
#tutorial .katex-display { overflow-x: auto; overflow-y: hidden; padding: var(--spacing-sm) 0; }

/* ============ Responsive ============ */

/* Short viewports (e.g. 1280x720 laptops): the hero + transport + tabs +
   controls chrome above the arm canvas otherwise pushes it past y=500,
   leaving barely half a screen for the actual demo. Compact every band of
   chrome a bit so the canvas lands well within the first screenful. */
@media (max-height: 800px) {
  .demo-nav { padding: 6px var(--spacing-xl); }
  .demo-nav .theme-toggle { width: 34px; height: 34px; font-size: 1.05rem; }
  body:has(.demo-nav) { padding-top: 48px; }
  .hero-header { padding: 0.4rem 0 0.35rem; }
  .hero-title { font-size: 1.3rem; margin-bottom: 0.2rem; }
  .hero-subtitle { font-size: 0.75rem; max-width: 600px; }
  .transport-bar-inner { padding: 6px var(--spacing-xl); }
  .tabs { margin: 6px 0; }
  .tab-btn { padding: 0.4rem 1rem; }
  .controls-panel { padding: 10px var(--spacing-lg); gap: var(--spacing-md); }
  .tab-panel { gap: 10px; }
  .view-canvas-wrap { padding-top: 10px; }
}

@media (max-width: 900px) {
  .view-grid, .draw-layout { grid-template-columns: minmax(0, 1fr); }
  .container { padding: 0 var(--spacing-md) var(--spacing-xl); }
  .components-card { min-height: 0; }
}

@media (max-width: 480px) {
  .demo-nav { padding: var(--spacing-sm) var(--spacing-md); }
  .view-canvas-wrap canvas, .draw-canvas-wrap canvas { height: 320px; }
  .editor-row, .editor-header-row { grid-template-columns: 14px repeat(3, minmax(0, 1fr)) auto; gap: var(--spacing-xs); }
  .controls-panel { gap: var(--spacing-sm); padding: var(--spacing-sm); }
  input[type='range'] { width: 90px; }
  .transport-bar-inner { flex-wrap: wrap; padding: var(--spacing-sm) var(--spacing-md); gap: var(--spacing-sm); }
  .transport-scrub { min-width: 100%; order: 3; }

  /* A section of tutorial content is itself wrapped in .card elements, nested
     inside #tutorial (also a .card): the doubled padding/border squeezes the
     text column down to ~250px on narrow phones. Flatten the nesting here. */
  #tutorial.card { padding: var(--spacing-md); }
  #tutorial .card {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
    margin-bottom: var(--spacing-lg);
  }
}

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