/* components.css — All reusable UI components */

.section-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-faint);
}

#theme-toggle { display: none; }

#graphs-list { display: flex; flex-direction: column; gap: var(--space-2); }

.graph-entry {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.graph-entry:focus-within { border-color: #000; }
.graph-entry-top { display: flex; align-items: center; gap: var(--space-2); }

.color-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  cursor: pointer; border: 2px solid transparent;
  transition: transform var(--transition);
}
.color-dot:hover { transform: scale(1.25); }

.fn-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-text); min-width: 0;
}
.fn-input::placeholder { color: var(--color-text-faint); }

.graph-entry-actions { display: flex; gap: var(--space-1); justify-content: flex-end; }

.btn-icon {
  width: 22px; height: 22px; display: flex; align-items: center;
  justify-content: center; border-radius: var(--radius-sm);
  color: var(--color-text-faint); background: #fff;
  border: 1px solid var(--color-border);
}
.btn-icon:hover { color: #000; background: var(--color-surface-offset); border-color: #000; }
.btn-icon.danger:hover { color: var(--color-error); border-color: var(--color-error); }

.fn-error {
  font-size: var(--text-xs); color: var(--color-error);
  font-family: var(--font-mono); padding: 0 2px; display: none;
}
.fn-error.visible { display: block; }

.btn-add-graph {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  color: #000; font-size: var(--text-sm);
  border: 1px dashed var(--color-border); background: #fff;
  width: 100%; justify-content: center; margin-top: var(--space-1); cursor: pointer;
}
.btn-add-graph:hover { border-color: #000; background: var(--color-surface-offset); }

.control-group { display: flex; flex-direction: column; gap: var(--space-3); }
.control-row { display: flex; align-items: center; gap: var(--space-3); }
.control-label {
  font-size: var(--text-xs); color: var(--color-text-muted);
  min-width: 62px; font-weight: 500;
}
.range-wrap { flex: 1; display: flex; align-items: center; gap: var(--space-2); }

input[type="range"] {
  flex: 1; height: 3px; -webkit-appearance: none; appearance: none;
  background: var(--color-border); border-radius: var(--radius-full);
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: #000; cursor: pointer; transition: transform var(--transition);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: #000; border: none; cursor: pointer;
}

.range-value {
  font-size: var(--text-xs); color: var(--color-text-muted);
  min-width: 32px; text-align: right; font-family: var(--font-mono);
}

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.toggle-label { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
.toggle { position: relative; width: 34px; height: 18px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute; inset: 0; background: var(--color-border);
  border-radius: var(--radius-full); cursor: pointer; transition: background var(--transition);
}
.toggle input:checked + .toggle-track { background: #000; }
.toggle-thumb {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  background: white; border-radius: 50%; transition: transform var(--transition); pointer-events: none;
}
.toggle input:checked ~ .toggle-thumb { transform: translateX(16px); }

.presets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.preset-btn {
  padding: var(--space-2) var(--space-3); background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-xs); color: #000; text-align: left;
  font-family: var(--font-mono); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.preset-btn:hover { border-color: #000; background: var(--color-surface-offset); }

.canvas-btn {
  width: 34px; height: 34px; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #000; box-shadow: var(--shadow-sm); cursor: pointer;
}
.canvas-btn:hover { border-color: #000; background: var(--color-surface-offset); }
.canvas-btn.active { border-color: #000; background: var(--color-surface-offset); }

.axis-badge {
  padding: 2px var(--space-2); background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-family: var(--font-mono); font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.axis-badge.x { color: #cc3333; }
.axis-badge.y { color: #228844; }
.axis-badge.z { color: #3355cc; }

#color-picker-popup {
  position: fixed; background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-3);
  box-shadow: var(--shadow-lg); display: none; z-index: 200;
  flex-wrap: wrap; gap: var(--space-2); width: 144px;
}
#color-picker-popup.open { display: flex; }

.color-option {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; transition: transform var(--transition), border-color var(--transition);
}
.color-option:hover { transform: scale(1.15); }
.color-option.selected { border-color: #000; }

#intersection-list { display: flex; flex-direction: column; gap: var(--space-2); }
.intersection-item {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs); font-family: var(--font-mono);
  color: var(--color-text-muted); display: flex;
  justify-content: space-between; gap: var(--space-3);
}
.intersection-item .int-label { color: #000; font-weight: 700; }

.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); background: #fff; color: #000;
  border: 1px solid #000; border-radius: var(--radius-md);
  font-size: var(--text-xs); font-weight: 600; width: 100%; cursor: pointer;
}
.btn-primary:hover { background: #000; color: #fff; }
.btn-primary:active { background: #222; color: #fff; }

.btn-secondary {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); background: #fff;
  border: 1px solid var(--color-border); color: #000;
  border-radius: var(--radius-md); font-size: var(--text-xs);
  font-weight: 500; width: 100%; cursor: pointer;
}
.btn-secondary:hover { border-color: #000; background: var(--color-surface-offset); }

.result-empty {
  font-size: var(--text-xs); color: var(--color-text-faint);
  text-align: center; padding: var(--space-3) 0; font-style: italic;
}
/* Sculpt Your Shape sidebar button */
.btn-sculpt-open {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, var(--color-primary-highlight), var(--color-surface-offset));
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-interactive), box-shadow var(--transition-interactive);
}
.btn-sculpt-open:hover {
  background: var(--color-primary-highlight);
  box-shadow: var(--shadow-md);
}