/* ── Pole Figures module-specific styles ── */

/* Override display-panel centering for tall canvases */
.display-panel {
  justify-content: flex-start;
  padding-top: 12px;
  padding-bottom: 8px;
}

/* ── Disabled section overlay ── */
.pf-disabled {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.25s;
}

/* ── Miller index row ── */
.miller-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.miller-row label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 14px;
  text-align: right;
}
.miller-row input[type="number"] {
  width: 48px;
  padding: 4px 6px;
  background: rgba(108,99,255,0.06);
  border: 1px solid rgba(108,99,255,0.15);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.76rem;
  text-align: center;
}

/* ── Apply buttons ── */
.pf-apply-btn {
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, var(--accent-1, #6c63ff), var(--accent-2, #e94560));
  color: #fff;
  transition: opacity 0.15s;
  margin-left: auto;
}
.pf-apply-btn:hover {
  opacity: 0.85;
}

/* ── Energy selector row ── */
.pf-energy-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pf-energy-row select {
  flex: 1;
  padding: 5px 8px;
  background: var(--bg-card, #242440);
  border: 1px solid rgba(108,99,255,0.18);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.78rem;
}

/* ── Info rows ── */
.pf-info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.pf-info-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}
.pf-info-value {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.74rem;
  color: var(--text-primary);
}

/* ── Reuse step guide from directions ── */
.dir-guide { display: flex; flex-direction: column; gap: 8px; }
.dir-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  opacity: 0.35; transition: opacity 0.25s, background 0.25s;
}
.dir-step.active { opacity: 1; background: rgba(108,99,255,0.08); }
.dir-step.done   { opacity: 0.55; }
.dir-step.done .step-num { background: #33cc33; }

.step-num {
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 50%; background: var(--accent-1, #6c63ff);
  color: #fff; font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.step-text {
  font-size: 0.76rem; color: var(--text-secondary); line-height: 1.4;
}

/* ── Swatch (shared with directions) ── */
.dir-swatch {
  flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%;
}

/* ── About text ── */
.dir-about {
  font-size: 0.72rem; color: var(--text-muted); line-height: 1.55;
}

/* ── Dual canvas layout ── */
.dual-canvas-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 12px;
  width: 100%;
}
.pf-canvas-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  overflow: visible;
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 12px;
  border: 1px solid rgba(108,99,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.pf-canvas-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pf-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 8;
  min-height: 340px;
  max-height: calc(100vh - 180px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0f0f1a;
}
.pf-canvas canvas {
  display: block;
  border-radius: var(--radius-sm);
}

/* ── ODF controls (overlay on Rodrigues canvas) ── */
.odf-controls {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  padding: 2px 0 4px;
}
.odf-btn {
  padding: 3px 8px;
  border: none;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  background: rgba(108,99,255,0.65);
  color: #fff;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.odf-btn:hover { opacity: 0.8; }
.odf-sigma {
  width: 36px;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid rgba(108,99,255,0.25);
  background: rgba(15,15,26,0.5);
  color: var(--text-primary);
  font-size: 0.62rem;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.odf-sigma-label {
  font-size: 0.62rem;
  color: var(--text-muted);
}

/* ── Theme button ── */
.theme-btn {
  width: 100%;
  padding: 10px 0;
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(108,99,255,0.25), rgba(233,69,96,0.18));
  border: 1px solid rgba(108,99,255,0.35);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
  letter-spacing: 0.02em;
}
.theme-btn:hover {
  background: linear-gradient(135deg, rgba(108,99,255,0.4), rgba(233,69,96,0.3));
  border-color: rgba(108,99,255,0.5);
  transform: translateY(-1px);
}