/* Common styles for modulation and tessalation tools */
:root {
  /* Core Brand Colors */
  --guardian: oklch(0.23 0.0855 262.75);
  --sentinel: oklch(0.56 0.0708 242);
  --shield: oklch(0.71 0.0447 215.19);
  --alert: oklch(0.65 0.1826 24.35);
  --safety: oklch(0.65 0.12 150);
  --authority: oklch(0.65 0.13 300);
  --caution: oklch(0.70 0.16 60);

  /* Guardian Series */
  --guardian-100: oklch(0.85 0.02 262.75);
  --guardian-200: oklch(0.75 0.03 262.75);
  --guardian-300: oklch(0.65 0.045 262.75);
  --guardian-400: oklch(0.55 0.055 262.75);
  --guardian-500: oklch(0.45 0.07 262.75);
  --guardian-600: oklch(0.35 0.08 262.75);
  --guardian-700: oklch(0.23 0.0855 262.75);

  /* Sentinel Series */
  --sentinel-100: oklch(0.85 0.025 242);
  --sentinel-200: oklch(0.75 0.04 242);
  --sentinel-300: oklch(0.65 0.055 242);
  --sentinel-400: var(--sentinel);
  --sentinel-500: oklch(0.45 0.06 242);
  --sentinel-600: oklch(0.35 0.055 242);
  --sentinel-700: oklch(0.23 0.05 242);

  /* Shield Series */
  --shield-100: oklch(0.90 0.02 215.19);
  --shield-200: oklch(0.85 0.03 215.19);
  --shield-300: oklch(0.80 0.04 215.19);
  --shield-400: var(--shield);
  --shield-500: oklch(0.60 0.045 215.19);
  --shield-600: oklch(0.50 0.04 215.19);
  --shield-700: oklch(0.23 0.04 215.19);

  /* Alert Series */
  --alert-100: oklch(0.90 0.07 24.35);
  --alert-200: oklch(0.85 0.10 24.35);
  --alert-300: oklch(0.75 0.15 24.35);
  --alert-400: var(--alert);
  --alert-500: oklch(0.55 0.17 24.35);
  --alert-600: oklch(0.45 0.15 24.35);
  --alert-700: oklch(0.23 0.14 24.35);

  /* Safety Series */
  --safety-100: oklch(0.90 0.07 150);
  --safety-200: oklch(0.85 0.09 150);
  --safety-300: oklch(0.75 0.10 150);
  --safety-400: var(--safety);
  --safety-500: oklch(0.55 0.13 150);
  --safety-600: oklch(0.45 0.11 150);
  --safety-700: oklch(0.23 0.10 150);

  /* Authority Series */
  --authority-100: oklch(0.90 0.05 300);
  --authority-200: oklch(0.85 0.08 300);
  --authority-300: oklch(0.75 0.11 300);
  --authority-400: var(--authority);
  --authority-500: oklch(0.55 0.15 300);
  --authority-600: oklch(0.35 0.12 300);
  --authority-700: oklch(0.23 0.10 300);

  /* Caution Series */
  --caution-100: oklch(0.90 0.08 60);
  --caution-200: oklch(0.85 0.12 60);
  --caution-300: oklch(0.75 0.14 60);
  --caution-400: var(--caution);
  --caution-500: oklch(0.55 0.17 60);
  --caution-600: oklch(0.45 0.15 60);
  --caution-700: oklch(0.23 0.10 65);

  /* Neutral Scale */
  --white: oklch(1.0 0 0);
  --neutral-100: oklch(0.85 0 0);
  --neutral-200: oklch(0.75 0 0);
  --neutral-300: oklch(0.65 0 0);
  --neutral-400: oklch(0.55 0 0);
  --neutral-500: oklch(0.45 0 0);
  --neutral-600: oklch(0.35 0 0);
  --neutral-700: oklch(0.23 0 0);
  --black: oklch(0 0 0);

}

body {
  font-family: 'PF DIN Serif', Georgia, serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 20px;
  background-color: #1e1e1e;
  color: #f0f0f0;
  user-select: none;
}

h1 {
  font-family: 'PF DIN Stencil Pro', sans-serif;
  margin-bottom: 30px;
  font-weight: normal;
  text-align: center;
}

h2, h3, h4, h5, h6 {
  font-family: 'PF DIN Display Pro', sans-serif;
  font-weight: normal;
  margin-top: 2rem;
}

/* Container für alle Eingabefelder - jetzt horizontale Reihe */
.input-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1px;
  width: 100%;
  margin: 0 auto 30px auto;
  padding: 0 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #555 #333;
  justify-content: center;
}

/* Scrollbar-Styling für Chrome/Edge/Safari */
.input-container::-webkit-scrollbar {
  height: 6px;
}

.input-container::-webkit-scrollbar-track {
  background: #333;
}

.input-container::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 3px;
}

/* Basisstil für alle Eingabegruppen */
.input-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0;
  position: relative;
  min-width: 100px;
  max-width: 120px;
  flex-shrink: 0;
  padding: 5px;
}

/* Labels für alle Eingabefelder */
label, .knob-value, .dynamic-label-display  {
  font-family: 'PF DIN Mono Pro', monospace;
  text-transform: uppercase;
  color: var(--neutral-300);
  font-size: 10px;
  font-weight: normal;
  margin: 5px 0;
  text-align: center;
  letter-spacing: 0.5px;
  width: 100%;
  white-space: nowrap;
  min-height: 12px; /* Ensure space even if empty initially */
  display: block; 
  width: 100%;
}

/* Clickable value displays (open knob edit dialog) */
.input-group label:hover,
.knob-value:hover,
.dynamic-label-display:hover {
  color: var(--neutral-100);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Number Inputs speziell für Breite/Höhe */
.number-group {
  min-width: 100px;
}

input[type="number"] {
  width: 100%;
  padding: 8px;
  background-color: #333;
  color: #e0e0e0;
  border: 1px solid #444;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}


/* Button Container - bleibt zentriert */
.button-container {
  display: flex;
  gap: 15px;
  margin: 0 0 30px 0;
  justify-content: center;
}

/* Button-Stile */
button {
  font-family: 'PF DIN Mono Pro', monospace;
  background-color: var(--guardian-600);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: normal;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover {
  background-color: var(--guardian-500);
}

/* SVG-Container - nur horizontal zentriert */
#svgContainer {
  width: 100%;
  max-width: 1200px;
  height: auto;
  aspect-ratio: 16 / 9; /* Standard-Seitenverhältnis, wird per JS geändert */
  border: 1px solid var(--neutral-700);
  background-color: transparent;
  overflow: hidden;
  border-radius: 4px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Standard-Selects */
select {
  padding: 4px 8px;
  background-color: var(--neutral-700);
  color: #e0e0e0;
  border: 1px solid var(--neutral-600);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
  min-width: 90px;
  text-align: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
}

/* Kleinere Schrift für Optionen in Selects */
select option {
    font-size: 11px;
}

/* Knob Styling - perfekt kreisförmig */
.knob-container {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 5px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.knob {
  width: 60px;
  height: 60px;
  aspect-ratio: 1; /* Enforce square shape */
  box-sizing: border-box; /* Include border/padding in dimensions */
  background-color: var(--neutral-600);
  border-radius: 50%;
  position: relative;
  cursor: ns-resize; /* Up/down arrow cursor for knob potentiometers */
  /* Copied hover shadow for default state */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 
              inset -1px -1px 2px rgba(0, 0, 0, 0.4), /* Adjusted inset slightly */ 
              inset 1px 1px 1px rgba(255, 255, 255, 0.1);
  border: 1px solid var(--neutral-700);
  transition: background-color 0.3s ease; 
}

.knob:hover {
  /* Removed shadow properties, only keep if other hover effects needed */
}

.knob-indicator {
  position: absolute;
  left: 50%; /* Start horizontal center */
  top: 50%;  /* Start vertical center (top edge) */
  width: 45%; /* Slightly shorter than edge */
  height: 2px; /* Thickness of the line */
  background-color: white;
  transform-origin: 0 50%; /* Rotate around left-center */
  /* Apply ONLY the vertical translation to center the line */
  transform: translateY(-50%); 
  border-radius: 1px;
  /* Adjusted shadow opacity */
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

/* Farb-Auswahl-Elemente */
.color-selector {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  margin-bottom: 5px;
}

select.color-dropdown {
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.4;
  min-width: 120px;
}

.color-preview {
  display: none; /* Farbvorschau-Quadrate ausblenden */
  min-width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #555;
  flex-shrink: 0;
}

/* Controls Container für Blend Mode und Pattern Mode */
.controls-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.controls-container .input-group {
  min-width: 150px;
  max-width: 300px;
}

/* Spezielle Behandlung für Hue-Knobs */
.knob[data-name="hue"] {
  background: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}

/* Verstecken der Range-Inputs, die durch Knobs ersetzt werden */
.knob-container input[type="range"] { /* Be specific to knobs */
  display: none;
}

/* Diskrete Button-Knobs für select-Elemente */
.discrete-button-container,
.mode-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-top: 5px;
  width: 100%;
}

.discrete-knob-button,
.mode-knob-button {
  padding: 5px 8px;
  background-color: #333;
  border: 1px solid #444;
  color: #e0e0e0;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.2s;
}

.discrete-knob-button:hover,
.mode-knob-button:hover {
  background-color: #444;
}

.discrete-knob-button.active,
.mode-knob-button.active {
  background-color: var(--guardian-600);
  color: white;
  border-color: var(--guardian-500);
}

/* Spezifischere Regel für Farb-Dropdowns, falls diese abweichen sollen */
/* select.color-dropdown { ... } */

/* Spezifischere Regel für Ratio/Mode Dropdowns */
#mod-aspectRatio, #tess-aspectRatio, #mod-blendMode, #tess-patternMode {
    /* Ggf. spezifische Breitenanpassungen hier, falls nötig */
    /* min-width: 110px; */ 
}

/* Responsives Design */
@media (max-width: 768px) {
  .input-container {
    gap: 8px;
  }
  
  .input-group {
    min-width: 70px;
  }
  
  .knob-container {
    width: 40px;
    height: 40px;
  }
  
  .knob {
    width: 40px;
    height: 40px;
  }
  
  .knob-indicator {
    height: 14px;
  }
  
  label, .knob-value, .dynamic-label-display {
    font-size: 10px;
  }
  
  button {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* Hide the static label if a dynamic span follows */
/* REMOVED by AI - This rule hides labels when the span exists, but we now update the label directly.
.input-group label:has(+ span.dynamic-label-display) {
    display: none;
}
*/

.dynamic-label-display {
    font-size: 0.9em;
}

/* Transition for SVG element colors */
#mod-svgStage polygon,
#tess-svgStage .hexagon-group polygon {
  transition: fill 0.3s ease, stroke 0.3s ease;
}

/* Transition for SVG background colors */
#tess-svgStage > g > rect:first-child {
  transition: fill 0.3s ease;
}

/* Remove default link focus outline, handle focus states manually */

/* Styling für SVG-Container in beiden Tabs */
#mod-svgContainer,
#tess-svgContainer {
  width: 100%; /* Nimmt die volle Breite des Elternelements ein */
  /* height wird durch aspect-ratio oder spezifische Styles gesetzt */
  /* aspect-ratio: 16 / 9; /* Default, wird dynamisch überschrieben */
  background-color: var(--neutral-800); /* Dunkler Hintergrund für den Container */
  border-radius: var(--radius-3); 
  /* border: 1px solid var(--neutral-700); /* Optionaler Rand */
  box-shadow: var(--inner-shadow-4); /* Innenschatten */
  position: relative; /* Wichtig für absolute Positionierung von Overlays */
  overflow: hidden; /* ÄLTERER STANDARD, versuchen statt clip */
}

/* Styling für die SVG-Elemente selbst */
#mod-svgStage,
#tess-svgStage {
  display: block; /* Verhindert extra Leerraum unter dem SVG */
  width: 100%;
  height: 100%;
  border-radius: inherit; /* Übernimmt Radius vom Container */
  transition: background-color 0.3s ease; /* Add transition for background (Applies to mod, redundant for tess rect)*/
}

/* Add transition for polygon fill in modulation */
#mod-svgStage polygon {
  transition: fill 0.3s ease; /* Transition for hex color changes */
  /* mix-blend-mode is generally not animatable smoothly */
}

/* --- ADDED Fieldset and Legend Styles --- */
fieldset {
  border: 1px solid var(--neutral-600, #444); /* Subtler border */
  border-radius: var(--radius-3, 6px); /* Use existing radius variable */
  padding: 15px 20px; /* Adjust padding */
  margin-bottom: 20px; /* Space below fieldset */
  margin-top: 10px; /* Space above fieldset */
  background-color: var(--neutral-800, #2a2a2a); /* Slightly different background */
}

legend {
  padding: 0 10px; /* Spacing around legend text */
  font-weight: 600; /* Make legend bolder */
  color: var(--neutral-200, #ddd); /* Lighter color for legend */
  font-size: 0.9em; /* Slightly smaller font size */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 10px; /* Align slightly with padding */
}
/* --- END Fieldset and Legend Styles --- */

/* --- ADDED Styles for Vertical Tone Slider --- */
.color-input-group {
  /* Revert to original input-group sizing */
  min-width: 100px;
  max-width: 120px;
}

/* Styling for Horizontal Tone Slider */
.tone-slider-container {
  width: 100%; /* Take full width of the group */
  margin-top: 5px; /* Space below knob */
  text-align: center; /* Center the display span */
}

.tone-slider {
  width: 80%; /* Make slider slightly narrower than group */
  height: 6px; /* Make slider thin */
  cursor: ew-resize; /* Left/right arrow cursor for horizontal sliders */
  appearance: none; /* Reset default appearance */
  background: var(--neutral-600); /* Track background */
  border-radius: 3px;
  outline: none;
  border: 1px solid var(--neutral-700);
  margin-bottom: 2px; /* Space before text */
}

.tone-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--neutral-200);
  border-radius: 50%;
  cursor: ew-resize; /* Left/right arrow cursor for horizontal slider thumbs */
  margin-top: -4px; /* Center thumb vertically */
  border: 1px solid var(--neutral-400);
}

.tone-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--neutral-200);
  border-radius: 50%;
  cursor: ew-resize; /* Left/right arrow cursor for Firefox horizontal slider thumbs */
  border: none;
}

/* Style for the tone value text display below the slider */
.tone-value-display {
  display: block;
  text-align: center;
  font-size: 9px; /* Even smaller */
  color: var(--neutral-400);
  margin-top: 0; /* Remove top margin, added bottom margin to slider */
  min-height: 10px; /* Ensure space */
  width: 100%; /* Take width of container */
}

/* Knob Edit Dialog */
.knob-edit-dialog {
  position: fixed;
  z-index: 10000;
  background: var(--neutral-800, #2a2a2a);
  border: 1px solid var(--neutral-600, #555);
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  min-width: 160px;
  /* Override browser default dialog centering */
  margin: 0;
  inset: unset;
}

.knob-edit-dialog::backdrop {
  background: transparent;
}

.knob-edit-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--neutral-600, #555);
  cursor: grab;
  user-select: none;
}

.knob-edit-dialog .dialog-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-200, #ddd);
  margin: 0;
}

.knob-edit-dialog .dialog-close {
  background: none;
  border: none;
  color: var(--neutral-400, #888);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}

.knob-edit-dialog .dialog-close:hover {
  color: var(--neutral-200, #ddd);
}

.knob-edit-dialog .dialog-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.knob-edit-dialog select,
.knob-edit-dialog input[type="number"],
.knob-edit-dialog input[type="range"] {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--neutral-700, #333);
  border: 1px solid var(--neutral-500, #666);
  border-radius: 4px;
  color: var(--neutral-100, #eee);
  box-sizing: border-box;
}

.knob-edit-dialog input[type="range"] {
  padding: 4px 0;
  cursor: pointer;
}

.knob-edit-dialog select:focus,
.knob-edit-dialog input:focus {
  outline: none;
  border-color: var(--accent-color, #6ea8fe);
}

.knob-edit-dialog .value-display {
  text-align: center;
  font-size: 11px;
  color: var(--neutral-300, #bbb);
  margin-top: 4px;
}

/* End of file or other styles */

.poti-lock {
  font-family: 'Noto Emoji', sans-serif;
}