/* =====================================================================
   lab - werkzeuge/qrwerkstatt/app.css
   QR-Werkstatt: links Inhalt und Einstellungen, rechts Vorschau und Ausgabe.

   Konventionen (AGENTS.md §5):
     - Alle Klassen mit Prefix .lab_ (hier .lab_qw_ fuer QR-Werkstatt)
     - Keine harten Farben, nur Variablen aus css/colors.css
     - Das Code-Blatt bleibt in beiden Modi hell (wie Papier in der
       Textverarbeitung) - deshalb --lab-qr-papier/--lab-qr-tinte.
   ===================================================================== */

.lab_qw_layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.25rem;
}

@media (min-width: 62rem) {
  .lab_qw_layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 1fr);
    align-items: start;
  }
  .lab_qw_ausgabe {
    position: sticky;
    top: 4.5rem;
  }
}

.lab_qw_karte {
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 14px;
  padding: 1.25rem 1.3rem 1.3rem;
  box-shadow: var(--lab-shadow-1);
  min-width: 0;
}

.lab_qw_karte > h2 {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: var(--lab-border);
  font-size: 1.15rem;
}

.lab_qw_karte > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- Felder ---------- */
.lab_qw_feld {
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}

.lab_qw_feld > label,
.lab_qw_regler > label {
  font-weight: 600;
  font-size: 0.95rem;
}

.lab_qw_teil {
  display: grid;
  gap: 0.55rem;
  margin-bottom: 0.2rem;
}

.lab_qw_teil > label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 0.5rem;
}

.lab_qw_teil .lab_hinweis {
  margin: 0;
}

.lab_qw_reihe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

@media (min-width: 34rem) {
  .lab_qw_reihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lab_qw_reihe_drei {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.lab_qw_regler {
  display: grid;
  gap: 0.3rem;
  margin: 0.9rem 0;
}

.lab_qw_regler input[type="range"] {
  width: 100%;
  accent-color: var(--bt-color);
}

.lab_qw_regler output {
  font-family: var(--lab-mono);
  font-weight: 700;
}

.lab_qw_feldgruppe {
  border: var(--lab-border);
  border-radius: 10px;
  padding: 0.4rem 0.8rem 0.6rem;
  margin: 0;
}

.lab_qw_feldgruppe legend {
  font-family: var(--lab-mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grey600-color);
  padding: 0 0.4rem;
}

.lab_qw_wahl {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.95rem;
  cursor: pointer;
  margin: 0.45rem 0 0;
}

.lab_qw_wahl input {
  flex: none;
  accent-color: var(--bt-color);
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
}


/* ---------- Code-Blatt (Vorschau und Druck) ---------- */
/* Erlaubte Ausnahme (wie die Druckregel in css/layout.css): Das Blatt ist
   Papier und bleibt in beiden Modi weiss. Die Fallback-Kette sorgt dafuer,
   dass es auch weiss bleibt, wenn --lab-qr-* fehlt (alter Cache oder
   vergessen hochgeladene colors.css) - sonst wird der Code im Dunkelmodus
   dunkel auf dunkel und ist nicht mehr lesbar. */
.lab_qw_blatt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin: 0.3rem 0 0.9rem;
  padding: 0.9rem;
  background: var(--lab-qr-papier, var(--lab-tv-blatt, #FFFFFF));
  border: var(--lab-border);
  border-radius: 10px;
}

.lab_qw_blatt canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  image-rendering: pixelated;
}

.lab_qw_blatt_beschriftung {
  margin: 0;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--lab-qr-tinte, var(--lab-tv-blatt-text, #1A1C1A));
  word-break: break-word;
}

/* ---------- Probefelder fuer die Farben des Codes ----------
   Unsichtbar; app.js liest daraus die Werte aus colors.css. */
.lab_qw_probe {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

.lab_qw_probe_tinte {
  color: var(--lab-qr-tinte, var(--lab-tv-blatt-text, #1A1C1A));
}

.lab_qw_probe_akzent {
  color: var(--lab-qr-akzent, var(--lab-tv-blatt-text, #1A1C1A));
}

/* ---------- Meldungen ---------- */
.lab_qw_info {
  margin: 0 0 0.35rem;
}

.lab_qw_meldung {
  margin: 0 0 0.7rem;
}

.lab_qw_meldung.is_fehler {
  color: var(--lab-fehler-fg);
  font-weight: 600;
}

.lab_qw_meldung:empty {
  display: none;
}

.lab_qw_knopfzeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.4rem 0 0.2rem;
}

/* ---------- Rohinhalt ---------- */
.lab_qw_rohtext {
  margin-top: 1.1rem;
  border-top: var(--lab-border);
  padding-top: 0.8rem;
}

.lab_qw_rohtext summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
}

.lab_qw_rohtext pre {
  margin: 0.6rem 0 0;
  padding: 0.7rem;
  background: var(--div-color);
  border: var(--lab-border);
  border-radius: 8px;
  max-height: 12rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
}

.lab_qw_hilfe {
  margin: 0;
  padding-left: 1.2rem;
}

.lab_qw_hilfe li {
  margin-bottom: 0.35rem;
}

/* ---------- Kleine Schirme ---------- */
@media (max-width: 30rem) {
  .lab_qw_karte {
    padding: 1rem 1rem 1.1rem;
  }
  .lab_qw_knopfzeile .lab_btn {
    flex: 1 1 auto;
  }
}

/* ---------- Drucken: nur das Code-Blatt kommt aufs Papier ----------
   Die Breite setzt app.js als --lab_qw_druckbreite (in mm). */
@media print {
  .lab_qw_bedienung,
  .lab_qw_knopfzeile,
  .lab_qw_rohtext,
  .lab_qw_hilfe,
  .lab_qw_info,
  .lab_qw_meldung,
  .lab_ueber,
  .lab_qw_karte > h2,
  .lab_main h1 {
    display: none !important;
  }

  .lab_qw_layout {
    display: block;
  }

  .lab_qw_karte {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    position: static;
  }

  .lab_qw_blatt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4mm;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    min-height: 200mm;
    background: var(--lab-qr-papier, var(--lab-tv-blatt, #FFFFFF));
    page-break-inside: avoid;
  }

  .lab_qw_blatt canvas {
    width: var(--lab_qw_druckbreite, 60mm);
    height: auto;
    max-width: none;
  }

  .lab_qw_blatt_beschriftung {
    font-size: 12pt;
    max-width: var(--lab_qw_druckbreite, 60mm);
  }
}