/*
 * Seezeit · Ranking in zwei Schritten (Paket M3, Grundfassung).
 *
 * Gestaltung der Oberfläche, die scripts/seezeit-ranking.js in Fragen vom Fragetheme ranking_advanced aufbaut (Konzept: konzept/M3-ranking.md).
 *   Schritt 1  Auswahl: Checkbox-Liste mit denselben Klassen wie die Mehrfachauswahl (ul.answers-list, li.checkbox-item); Fläche, Marker,
 *              Zustände und Fokus kommen aus seezeit-formulare.css und müssen hier nicht wiederholt werden.
 *   Schritt 2  Reihenfolge: Zeilen mit Platznummer, Eintrag und zwei Knöpfen (Auf, Ab, je mindestens 44 x 44 px).
 * Knöpfe sind die vorhandenen .btn.btn-outline-secondary (Sekundär: weiß mit 1 px Dunkelblau, alle Zustände aus seezeit-aktionen.css und der
 * Variante). Hier steht keine gefüllte Aktion: Auf der Seite gibt es genau eine, den Weiter-Knopf der Seite. Nur Rollen-Tokens, keine eigenen Farben.
 * Die Regeln beginnen mit #dynamicReloadContainer .question-container (ID-Präfix, siehe BRIEF.md 4).
 */

/* ========================================================================== Native Bedienung weicht (erst wenn die Oberfläche steht) */
/* Ziehflächen des Controllers und sein Hilfetext zum Ziehen ("Ziehe die Bilder ... oder doppelklicke darauf"); der unsichtbare Satz für Screenreader und
   der Hinweis zur Höchstzahl (.em_num_answers) bleiben. Die Rangfelder blendet das Skript selbst aus (sie bleiben im Formular). */
#dynamicReloadContainer .question-container.sz-ranking-aktiv .container-center,
#dynamicReloadContainer .question-container.sz-ranking-aktiv .ls-em-tip.em_default > [aria-hidden="true"] {
  display: none;
}
/* Höchstzahl erreicht: Der Hinweis von LimeSurvey (kein eigener Text) tritt hervor */
#dynamicReloadContainer .question-container.sz-ranking-aktiv[data-sz-max="1"] .em_num_answers {
  font-weight: 700;
  color: var(--kern-color-layout-text-default);
}

/* ========================================================================== Gemeinsames */
#dynamicReloadContainer .question-container .sz-ranking {
  margin: 0;
}
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-intro {
  max-width: 70ch;
  margin: 0 0 var(--kern-space-12);
  font-size: var(--kern-font-size-16);
  line-height: 1.5;
  color: var(--kern-color-layout-text-default);
}
/* Ziel des programmatischen Fokus beim Schritt-Wechsel (tabindex -1, nicht in der Tab-Reihenfolge): kein Ring */
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-intro:focus {
  outline: none;
}
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-aktionen {
  margin-top: var(--kern-space-12);
}
/* schmale Fenster: der Knopf unter der Liste füllt die Breite (großes Ziel) */
@media (max-width: 550px) {
  #dynamicReloadContainer .question-container .sz-ranking .sz-rk-aktionen > .btn {
    width: 100%;
  }
}

/* ========================================================================== Schritt 1: Zähler */
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-zaehler {
  margin: var(--kern-space-12) 0 0;
  font-size: var(--kern-font-size-14);
  font-weight: 600;
  line-height: 1.5;
  color: var(--kern-color-layout-text-default);
}
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-zaehler:empty {
  display: none;
}

/* ========================================================================== Schritt 2: Reihenfolge */
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-liste {
  display: grid;
  gap: var(--sz-answer-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Zeile: Platznummer, Eintrag (nimmt den Rest), Knöpfe. Fläche wie eine Antwortfläche: weiß, 1 px Eingabekontur, 4 px Radius, mindestens 48 px hoch */
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-eintrag {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--kern-space-8);
  min-height: var(--sz-tile-h);
  margin: 0;
  padding: var(--kern-space-4) var(--kern-space-4) var(--kern-space-4) var(--kern-space-12);
  background: var(--color-surface-active);
  border: 1px solid var(--color-input-border);
  border-radius: var(--kern-radius-m);
}
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-platz {
  min-width: 1.5rem;
  font-size: var(--kern-font-size-18);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: var(--kern-color-layout-text-default);
}
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-text {
  min-width: 0;
  font-size: var(--kern-font-size-16);
  font-weight: 400;
  line-height: 1.4;
  color: var(--kern-color-layout-text-default);
  overflow-wrap: break-word;
  hyphens: auto;
}
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-knoepfe {
  display: flex;
  gap: var(--kern-space-4);
}
/* Auf und Ab: quadratisch, 44 x 44 px (BRIEF.md 7, Kriterium 4); überschreibt Mindesthöhe und Polster der allgemeinen Knopfgeometrie */
#dynamicReloadContainer .question-container .sz-ranking .btn.sz-rk-knopf {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  gap: 0;
}

/* ========================================================================== Schritt 2: Ziehen (M3b, zusätzlich zu Auf und Ab) */
/* Die Zeilen sind nur ziehbar, wenn das Skript SortableJS eingerichtet hat (.sz-rk-ziehbar an der Liste). Die Knöpfe bleiben Knöpfe. Kein Markieren
   von Text und kein Textmenü beim langen Drücken mit dem Finger (dort beginnt das Ziehen nach kurzem Halten). Rückmeldung nur mit Zeiger, Transparenz
   und gestrichelter Kontur: keine neue Farbe, kein Schatten (Gestaltungslücke, siehe Bericht). */
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-ziehbar .sz-rk-eintrag {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-ziehbar .sz-rk-eintrag .sz-rk-knopf {
  cursor: pointer;
}
/* Platzhalter: der gezogene Eintrag an seinem Platz in der Liste, bis er losgelassen wird */
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-eintrag.sz-rk-platzhalter {
  opacity: 0.5;
  border-style: dashed;
}
/* der Eintrag am Zeiger (Ersatz-Zeiger von SortableJS, hängt während des Ziehens als letztes Kind in der Liste) */
#dynamicReloadContainer .question-container .sz-ranking .sz-rk-eintrag.sz-rk-zieht {
  cursor: grabbing;
}