/* =====================================================================
   lab - werkzeuge/farbprobe/app.css
   Oberflaeche der Farbprobe & Palette. Farben nur ueber Variablen aus
   css/colors.css (AGENTS.md §5). Die Farbflecken werden zur Laufzeit
   vom JavaScript gesetzt - sie zeigen Nutzdaten (aufgenommene Farben).
   ===================================================================== */

.lab_fp_karte {
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1.25rem;
  box-shadow: var(--lab-shadow-1);
  margin-bottom: 0;
}

.lab_fp_layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-areas:
    "bild farbe"
    "palette palette"
    "bildfarben sammlung";
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

.lab_fp_bildkarte { grid-area: bild; }
.lab_fp_farbkarte { grid-area: farbe; }
.lab_fp_palette { grid-area: palette; }
.lab_fp_bildfarben { grid-area: bildfarben; }
.lab_fp_sammlung { grid-area: sammlung; }

/* Karten duerfen schmaler als ihr Inhalt werden: die Bildbuehne
   scrollt sonst nicht, sondern weitet die Rasterspur - die Karte
   lief dann am Schirmrand vorbei (gemessen bei 390 px). */
.lab_fp_layout > .lab_fp_karte { min-width: 0; }

@media (max-width: 60rem) {
  .lab_fp_layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "bild"
      "farbe"
      "palette"
      "bildfarben"
      "sammlung";
  }
}

/* ---------- Bild laden und zeigen ---------- */

.lab_fp_laden {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.lab_fp_buehne {
  position: relative;
  border: var(--lab-border);
  border-radius: 8px;
  background: var(--div-color);
  overflow: auto;
  max-height: 30rem;
  padding: 0.5rem;
}

.lab_fp_buehne.is_ueber { border-color: var(--bt-color); }

.lab_fp_buehne canvas {
  display: block;
  max-width: none;
  cursor: crosshair;
}

/* Stark vergrößert: Bildpunkte sichtbar lassen, nicht weichzeichnen */
.lab_fp_buehne canvas.lab_fp_vergroessert { image-rendering: pixelated; }

.lab_fp_buehne canvas:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 2px;
}

.lab_fp_leerhinweis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--grey600-color);
  margin: 0;
  padding: 1rem;
  pointer-events: none;
}

/* Lupe: der Umgebungsausschnitt unter dem Zeiger, mit Farbwert.
   Sie liegt in der Buehne und wird vom JavaScript positioniert. */
.lab_fp_lupe {
  position: absolute;
  z-index: 5;
  padding: 4px;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 8px;
  box-shadow: var(--lab-shadow-2);
  pointer-events: none;
}

.lab_fp_lupe canvas {
  display: block;
  width: 144px;
  height: 144px;
  image-rendering: pixelated;
  border: 1px solid var(--lab-border-color);
  cursor: none;
}

.lab_fp_lupe_wert {
  display: block;
  margin-top: 4px;
  padding: 0.15rem 0.4rem;
  border-radius: 5px;
  font-family: var(--lab-mono);
  font-size: 0.78rem;
  text-align: center;
  border: 1px solid var(--lab-border-color);
}

.lab_fp_zoom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  font-size: 0.92rem;
}

.lab_fp_zoom label { font-weight: 600; }

.lab_fp_zoom input[type="range"] { flex: 1 1 auto; }

.lab_fp_zoom output {
  font-family: var(--lab-mono);
  font-size: 0.88rem;
  min-width: 3.6rem;
  text-align: right;
}

/* ---------- Aufgenommene Farbe ---------- */

.lab_fp_musterzeile {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}

.lab_fp_muster {
  width: 4rem;
  height: 4rem;
  border-radius: 10px;
  border: 1px solid var(--lab-border-color);
  flex: none;
  background: transparent;
}

.lab_fp_werte { margin: 0; }

.lab_fp_wert {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--lab-border-color);
}

.lab_fp_wert:last-of-type { border-bottom: 0; }

.lab_fp_wert dt { font-weight: 600; font-size: 0.9rem; }

.lab_fp_wert code {
  font-family: var(--lab-mono);
  font-size: 0.9rem;
  word-break: break-all;
}

/* Kontrast: zwei Verhaeltnisse (zu Weiss, zu Schwarz) in einer Zeile */
.lab_fp_kontrast_werte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0;
  font-family: var(--lab-mono);
  font-size: 0.85rem;
}

.lab_fp_aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.lab_fp_tippen {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.6rem;
  margin-top: 0.9rem;
  border-top: var(--lab-border);
  padding-top: 0.8rem;
}

.lab_fp_hexfeld {
  width: 8.5rem;
  font-family: var(--lab-mono);
  font-size: 0.9rem;
  text-transform: uppercase;
}

.lab_fp_meldung { margin-top: 0.6rem; }

.lab_fp_klein { font-size: 0.8rem; padding: 0.35rem 0.6rem; }

/* Zweitklick-Zustand von "Sammlung leeren" */
.lab_fp_klein.is_sicher {
  background: var(--lab-beta-bg);
  color: var(--lab-beta-fg);
  border-color: var(--lab-beta-bd);
}

/* ---------- Palette, Bildfarben, Sammlung ---------- */

.lab_fp_palette h3,
.lab_fp_bildfarben h2 + .lab_hinweis,
.lab_fp_sammlung h2 + .lab_hinweis {
  margin-bottom: 0.45rem;
}

.lab_fp_absatzkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.lab_fp_absatzkopf h3 { margin-bottom: 0.45rem; }

.lab_fp_stufenwahl {
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.lab_fp_stufenwahl select { width: auto; }

.lab_fp_reihe {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

/* Bildfarben und Sammlung: sinnvolle Feldbreite, Anzahl frei */
.lab_fp_autoreihe { grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); }

.lab_fp_harmonien { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.lab_fp_huelle {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.lab_fp_fleck {
  height: 2.9rem;
  border: 1px solid var(--lab-border-color);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lab_fp_fleck span {
  font-family: var(--lab-mono);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.lab_fp_fleck:hover { outline: 2px solid var(--bt-color); outline-offset: 1px; }

.lab_fp_fleck:focus-visible {
  outline: 2px solid var(--bt-color);
  outline-offset: 1px;
}

.lab_fp_name {
  font-size: 0.72rem;
  color: var(--grey600-color);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sammlung: das kleine Kreuz zum Wegnehmen sitzt in der Ecke */
.lab_fp_huelle_sammlung { position: relative; }

.lab_fp_weg {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 2;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lab-border-color);
  border-radius: 50%;
  background: var(--ct-color);
  color: var(--grey600-color);
  cursor: pointer;
}

.lab_fp_weg:hover {
  color: var(--blk-color);
  border-color: var(--bt-color);
}

.lab_fp_weg_ikone { display: block; }

.lab_fp_kartenfuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: var(--lab-border);
  padding-top: 0.8rem;
  margin-top: -0.3rem;
}

.lab_fp_kopieren {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.6rem 1rem;
  border-top: var(--lab-border);
  padding-top: 0.9rem;
}

.lab_fp_feld {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

.lab_fp_prefix {
  width: 8rem;
  margin-top: 0.2rem;
  font-family: var(--lab-mono);
  font-size: 0.9rem;
}

/* ---------- Kleine Schirme ---------- */

@media (max-width: 40rem) {
  /* Auf schmalen Schirmen tragen die Flecken keine HEX-Aufschrift mehr,
     der Wert steht im Tooltip und in der Ausgabe. */
  .lab_fp_fleck span { display: none; }
  .lab_fp_harmonien { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab_fp_wert { grid-template-columns: 3.4rem minmax(0, 1fr) auto; }
  .lab_fp_absatzkopf { flex-wrap: wrap; }
}

/* ---------- Aufklappbare Hilfe ---------- */

details.lab_fp_hilfe {
  border: var(--lab-border);
  border-radius: 12px;
  background: var(--ct-color);
  padding: 0.7rem 1rem;
}

details.lab_fp_hilfe summary { cursor: pointer; font-weight: 600; }

details.lab_fp_hilfe ul {
  margin: 0.6rem 0 0.2rem;
  padding-left: 1.2rem;
}

details.lab_fp_hilfe li { margin-bottom: 0.35rem; }