/**
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║  FIELD VIEW - STRUCTURAL CSS ONLY                                        ║
 * ╠═══════════════════════════════════════════════════════════════════════════╣
 * ║                                                                           ║
 * ║  🎯 COLORS ARE NOT DEFINED HERE                                          ║
 * ║     All colors come from: static/js/config/disk_registry/*.json          ║
 * ║     Applied by: static/js/modules/disk_styler.js                         ║
 * ║                                                                           ║
 * ║  This CSS handles STRUCTURE ONLY:                                        ║
 * ║     • fill: none (prevent black disk bug)                                ║
 * ║     • display: none/inline (visibility toggling)                         ║
 * ║     • pointer-events (interaction control)                               ║
 * ║                                                                           ║
 * ║  WHY: CSS !important rules were overriding JS-applied styles,            ║
 * ║       creating competing systems that caused bugs. Now there is          ║
 * ║       ONE source of truth for colors: DiskRegistry JSON files.           ║
 * ║                                                                           ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 */

/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURAL: Prevent black disk fill bug
   These elements are STROKES, not filled shapes
   ═══════════════════════════════════════════════════════════════════════════ */
.field-view #spiralPreview .lanyard-outline,
.field-view #spiralPreview .bezel-grip-outline,
.field-view #spiralPreview .cord-hole-outline,
.field-view #spiralPreview .center-axle-outline {
  fill: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURAL: Cord hole is a pass-through cutout (shows background)
   ═══════════════════════════════════════════════════════════════════════════ */
.field-view #spiralPreview .cord-hole-cutout {
  fill: transparent !important;
  stroke: none !important;
  pointer-events: none;
}