/* =========================================================================
   MeshType — gemeinsame Formsprache
   =========================================================================

   Diese Datei liegt als IDENTISCHE KOPIE in mehreren Repos:

       MeshType Configurator/src/ui/meshtype-ui.css
       MeshType Editor/src/ui/meshtype-ui.css

   Je ein Test pro Repo vergleicht die Pruefsumme mit der Gegenstelle. Laufen
   die Kopien auseinander, schlaegt er an und nennt den anderen Pfad. Eine
   Aenderung hier heisst also: in ALLEN Kopien aendern. Das ist bewusst
   unbequem — es ist der Preis dafuer, kein gemeinsames Paket zu bauen.

   Warum kein Paket: ECOSYSTEM.md schliesst Monorepo und geteiltes Framework
   ohne neue Entscheidung aus, und der Configurator ist absichtlich buildless —
   er wird statisch ausgeliefert, ohne npm-Schritt. Eine Datei mit einem
   Waechter kostet nichts davon.

   Die Werte sind aus dem Configurator AUSGELESEN, nicht erfunden: er ist die
   aeltere und oeffentlich sichtbare Oberflaeche, also gibt er den Ton an.

   Hell ist die Voreinstellung (Configurator-Katalog), dunkel haengt an
   `body.dark-mode` — dieselbe Mechanik, die der Configurator fuer sein
   Preview-Panel schon benutzt. Der Editor setzt die Klasse dauerhaft.
   ========================================================================= */

:root {
  /* ── Kreise ─────────────────────────────────────────────────────────────
     Drei Groessen, mehr nicht. 48 ist das Hauptraster (.control-grid),
     44 sind Aktionen, 28 ist die kleine Variante fuer Nebensachen.        */
  --mt-circle-lg: 48px;
  --mt-circle:    44px;
  --mt-circle-sm: 28px;
  --mt-circle-gap: 12px;

  /* ── Linien ─────────────────────────────────────────────────────────────
     Alles ist 1px. Die Deckkraft traegt die Betonung, nicht die Dicke.    */
  --mt-line-w: 1px;
  --mt-line:        rgba(0, 0, 0, 0.45);
  --mt-line-soft:   rgba(0, 0, 0, 0.28);
  --mt-line-faint:  rgba(0, 0, 0, 0.14);

  /* ── Flaechen und Schrift ───────────────────────────────────────────── */
  --mt-ink:        #111;
  --mt-ink-invert: #fff;
  --mt-surface:    transparent;
  --mt-hover:      rgba(0, 0, 0, 0.08);

  --mt-shadow:       0 2px 5px rgba(20, 31, 43, 0.12);
  --mt-shadow-halo:  0 0 0 2px rgba(0, 0, 0, 0.2);

  /* ── Regler ─────────────────────────────────────────────────────────────
     Die Schiene ist so duenn wie die Raender der uebrigen Bedienelemente;
     der Knopf ist ein Kreis wie alles andere auch.                        */
  --mt-track:  2px;
  --mt-thumb:  14px;
  --mt-thumb-fill: #fff;

  /* ── Schrift ───────────────────────────────────────────────────────────
     Arial, weil der Configurator sie benutzt und keine Webfont-Ladung
     rechtfertigt: die Oberflaeche muss sofort da sein, auch offline.      */
  --mt-font: Arial, sans-serif;
  --mt-text-btn:   12px;   /* Beschriftung IM Kreis                        */
  --mt-text-btn-s:  9px;   /* dieselbe, wenn drei Zeichen hineinmuessen    */
  --mt-text-label: 10px;   /* Beschriftung NEBEN einem Bedienelement       */
  --mt-text-body:  11px;
  --mt-weight-btn: 700;
  --mt-track-label: 0.03em;
  --mt-label-fade: 0.55;

  /* ── Icons ──────────────────────────────────────────────────────────────
     20px im 44er- wie im 48er-Kreis. Die Zeichnung selbst ist immer
     `viewBox 0 0 24 24`, `stroke #111`, Strichstaerke 1.8, ohne Fuellung --
     siehe die README neben den Dateien. Nur so laesst sich ein Icon
     austauschen, ohne dass es neben den anderen fremd aussieht.            */
  --mt-icon: 20px;

  --mt-radius:    8px;     /* fuer alles, was kein Kreis ist               */
  --mt-ease: 0.2s ease;
}

/* ── Dunkel ────────────────────────────────────────────────────────────────
   Nur die Farben kehren sich um. Groessen, Abstaende und Schriftgrade sind
   in beiden Varianten dieselben — sonst waere es eine zweite Sprache.     */
body.dark-mode {
  --mt-line:       rgba(255, 255, 255, 0.45);
  --mt-line-soft:  rgba(255, 255, 255, 0.30);
  --mt-line-faint: rgba(255, 255, 255, 0.14);

  --mt-ink:        #fff;
  --mt-ink-invert: #111;
  --mt-hover:      rgba(255, 255, 255, 0.10);

  --mt-shadow:      0 2px 5px rgba(0, 0, 0, 0.35);
  --mt-shadow-halo: 0 0 0 2px rgba(255, 255, 255, 0.22);

  --mt-thumb-fill: #1f1f1f;
}

/* =========================================================================
   Bausteine

   Der Configurator hat seine eigenen, historisch gewachsenen Klassen und
   benutzt von hier nur die Werte oben. Diese Bausteine sind fuer alles
   Neue — im Editor also fuer die gesamte Oberflaeche.
   ========================================================================= */

/* Ein runder Knopf. `aria-pressed="true"` schaltet ihn ein; das ist kein
   Schmuck, sondern das, was ein Screenreader vorliest. Eine eigene
   .is-active-Klasse waere eine zweite Wahrheit ueber denselben Zustand.   */
.mt-btn {
  width: var(--mt-circle);
  height: var(--mt-circle);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: var(--mt-line-w) solid var(--mt-line);
  background: var(--mt-surface);
  color: var(--mt-ink);
  font-family: var(--mt-font);
  font-size: var(--mt-text-btn);
  font-weight: var(--mt-weight-btn);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--mt-shadow);
  transition: background-color var(--mt-ease), color var(--mt-ease),
              border-color var(--mt-ease), box-shadow var(--mt-ease);
  -webkit-tap-highlight-color: transparent;
}

.mt-btn--lg { width: var(--mt-circle-lg); height: var(--mt-circle-lg); }
.mt-btn--sm {
  width: var(--mt-circle-sm); height: var(--mt-circle-sm);
  font-size: var(--mt-text-btn-s);
  box-shadow: none;
}

.mt-btn:hover:not(:disabled) { background: var(--mt-hover); }

.mt-btn[aria-pressed='true'] {
  background: var(--mt-ink);
  color: var(--mt-ink-invert);
  border-color: var(--mt-ink);
  box-shadow: var(--mt-shadow-halo);
}

.mt-btn:disabled,
.mt-btn[aria-disabled='true'] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tastaturbedienung sichtbar lassen — aber nur fuer die Tastatur, damit ein
   Mausklick keinen Ring stehen laesst.                                     */
.mt-btn:focus-visible {
  outline: var(--mt-line-w) solid var(--mt-ink);
  outline-offset: 2px;
}

/* Ein Icon in einem Knopf.

   Die SVGs sind schwarz auf durchsichtig. Im Hellmodus stimmt das direkt; im
   Dunkelmodus werden sie umgekehrt, und auf einem EINGESCHALTETEN Knopf noch
   einmal zurueck, weil dessen Flaeche dann hell ist. Ohne die letzte Regel
   verschwindet das Icon auf dem aktiven Knopf -- weiss auf weiss. */
.mt-icon {
  display: block;
  width: var(--mt-icon);
  height: var(--mt-icon);
  flex-shrink: 0;
  pointer-events: none;
}

.mt-btn[aria-pressed='true'] .mt-icon { filter: invert(1); }
body.dark-mode .mt-icon { filter: invert(1); }
body.dark-mode .mt-btn[aria-pressed='true'] .mt-icon { filter: invert(0); }

/* Das Raster, in dem Kreise stehen. */
.mt-grid {
  display: grid;
  grid-template-columns: repeat(3, var(--mt-circle-lg));
  gap: var(--mt-circle-gap);
  justify-content: center;
}

/* ── Regler ─────────────────────────────────────────────────────────────── */
.mt-slider {
  width: 100%;
  height: var(--mt-track);
  appearance: none;
  -webkit-appearance: none;
  background: var(--mt-line-soft);
  border-radius: var(--mt-track);
  outline: none;
  cursor: pointer;
}

.mt-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--mt-thumb);
  height: var(--mt-thumb);
  border-radius: 50%;
  background: var(--mt-thumb-fill);
  border: var(--mt-line-w) solid var(--mt-line);
  box-shadow: var(--mt-shadow);
  cursor: pointer;
}

/* Firefox nennt denselben Knopf anders und zeichnet sonst seinen eigenen. */
.mt-slider::-moz-range-thumb {
  width: var(--mt-thumb);
  height: var(--mt-thumb);
  border-radius: 50%;
  background: var(--mt-thumb-fill);
  border: var(--mt-line-w) solid var(--mt-line);
  box-shadow: var(--mt-shadow);
  cursor: pointer;
}

/* ── Beschriftungen ─────────────────────────────────────────────────────── */
.mt-label {
  font-family: var(--mt-font);
  font-size: var(--mt-text-label);
  letter-spacing: var(--mt-track-label);
  opacity: var(--mt-label-fade);
  color: var(--mt-ink);
}

/* Zahlen, die sich beim Ziehen aendern. `tabular-nums` haelt die Ziffern auf
   fester Breite — sonst zappelt die Zeile bei jedem Reglerschritt.        */
.mt-value {
  font-family: var(--mt-font);
  font-size: var(--mt-text-label);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--mt-ink);
}

.mt-divider {
  border: 0;
  border-top: var(--mt-line-w) solid var(--mt-line-faint);
  margin: 10px 0;
}

/* Wer die Bewegung abbestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .mt-btn { transition: none; }
}