/* ---------------------------------------------------------------------------
   Skin Creator

   Der Bildschirm gehoert der Farbe. Frueher trug ein Kreis von 34 Pixeln die
   eigentliche Information, waehrend Zahlenkolonnen den Platz einnahmen, und
   sieben Farbzeilen in zwei Spalten liessen die siebte allein stehen. Beides
   ist hier strukturell geloest:

   * Eine Kachel ist die Farbe. Name und Hexwert sitzen darunter auf ruhigem
     Grund, die Zahlen bleiben lesbar, ohne die Flaeche zu beherrschen.
   * Der Koerperton bekommt eine breite Kachel, die sechs weiteren stehen zu
     dritt darunter. 1 + 3 + 3 geht immer auf, es entsteht nie eine Luecke.
   * Beide Spalten der Arbeitsflaeche sind gleich hoch, der untere Rand ist
     dadurch buendig statt ausgefranst.

   Farben kommen ausschliesslich aus den Marken-Merkmalen in portal.css.
--------------------------------------------------------------------------- */

.page-skin .site-nav a.is-active {
  color: var(--accent);
}

.skin-page {
  /* width 100% ist noetig: der Rumpf ist ein Flex-Container, und `margin: 0 auto`
     auf einem Flex-Kind schaltet das Dehnen ab. Ohne diese Zeile ist der Kasten
     nur so breit wie sein Inhalt, die Seite wechselt also die Breite, sobald sich
     ein Text darin aendert. */
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1rem, 3vw, 2rem) 2.5rem;
  display: grid;
  gap: 0.9rem;
}

/* ------------------------------------------------------------- Kopfleiste */

.skin-toolbar {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem 1.6rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.skin-toolbar-title h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.skin-toolbar-title .status-line {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
}
.skin-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
}
.skin-toolbar-meta .muted {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.skin-toolbar-meta strong {
  font-size: 0.95rem;
  font-weight: 600;
}
.skin-sync-line {
  color: var(--accent);
  font-weight: 600;
}

.skin-offline-msg {
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--accent-soft);
  border-radius: var(--r);
  background: rgba(224, 169, 74, 0.08);
  color: var(--ink);
  line-height: 1.45;
  font-size: 0.92rem;
}

/* ---------------------------------------------------------- Arbeitsflaeche */

.skin-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 316px;
  gap: 0.9rem;
  align-items: stretch;
}
.skin-workspace.is-disabled {
  opacity: 0.42;
  pointer-events: none;
}

.skin-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem;
  display: grid;
  gap: 0.85rem;
  align-content: start;
  min-width: 0;
}

.skin-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.85rem;
}
.skin-section-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
}
.chip-row-inline {
  justify-content: flex-end;
}

/* Schmales Band ueber den Kacheln: die ganze Faerbung auf einen Blick. */
.live-swatches {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
}
.live-swatch {
  flex: 1 1 0;
  min-width: 0;
}
.live-swatch span {
  display: block;
  height: 100%;
}
.live-swatch em {
  display: none;
}

/* ------------------------------------------------------------- Farbkacheln */

.color-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}
/* Der Koerperton fuehrt und nimmt die volle Breite ein. */
.color-row[data-key="body"] {
  grid-column: 1 / -1;
}

.color-row {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  /* portal.css polstert die alte Zeilenform, die Farbflaeche muss buendig sein. */
  padding: 0;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.color-row:hover {
  border-color: var(--accent-soft);
}
.color-row:focus-within {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Die Flaeche traegt die Farbe, sonst nichts. */
.swatch-wrap {
  position: relative;
  display: block;
  /* portal.css setzt hier 42 px fuer die alte Kreisform, das muss weg. */
  width: 100%;
  /* Die Farbflaeche muss den Textblock darunter deutlich ueberragen, sonst
     wirkt die Kachel gedrueckt. Der Text braucht rund 78 px. */
  height: 132px;
  margin: 0;
  flex: none;
}
.color-row[data-key="body"] .swatch-wrap {
  height: 168px;
}
.swatch-disc {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.swatch-disc svg {
  display: none;
}
.swatch-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.color-info {
  display: grid;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem 0.6rem;
  min-width: 0;
}
/* Der Name der Farbregion fuehrt, der Zahlenwert steht darunter. Vorher war es
   umgekehrt, dadurch las man zuerst den Hexwert und suchte den Namen. */
.color-name {
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
}
.color-rgb {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.color-lin {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  /* Ein Umbruch hier verschiebt den Textblock und laesst gleich hohe Kacheln
     ungleich aussehen. Lieber abschneiden als umbrechen. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------- Muster und Saetze */

.preset-block {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.preset-block + .preset-block {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
.preset-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.preset-head strong {
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.34rem 0.72rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.chip:hover { border-color: var(--accent-soft); }
.chip.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(224, 169, 74, 0.12);
}

/* Die rechte Spalte darf nicht mit der Zahl der belegten Plaetze wachsen.
   Muster steht fest oben, die Liste bekommt den Rest und scrollt darin. */
.skin-col-side {
  align-content: stretch;
  grid-template-rows: auto minmax(0, 1fr);
  /* Die Hoehe gibt allein die Farbspalte vor: height 0 nimmt diese Spalte aus
     der Zeilenberechnung heraus, min-height 100% dehnt sie danach auf genau
     die so entstandene Hoehe. Die Liste bekommt dadurch den ganzen Rest. */
  height: 0;
  min-height: 100%;
}
.preset-block-slots {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
}
/* Eine Spalte: in zwei Spalten war die Karte so schmal, dass Speichern,
   Laden und Loeschen untereinander rutschten und jede Karte hoch wurde. */
.skin-preset-slots {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0.45rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.skin-preset-slots::-webkit-scrollbar { width: 8px; }
.skin-preset-slots::-webkit-scrollbar-track { background: transparent; }
.skin-preset-slots::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}
.skin-preset-slots::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); }
.skin-preset-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: 0.5rem;
}
/* Freie Plaetze treten zurueck, statt die Spalte zu fuellen. */
.skin-preset-card.is-empty {
  border-style: dashed;
  background: transparent;
}
.skin-preset-swatches {
  grid-column: 1 / -1;
  display: flex;
  gap: 1px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
}
.skin-preset-swatches span {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  height: 100%;
}
/* Ohne gespeicherten Satz bleibt der Streifen leer, statt Farbe vorzutaeuschen. */
.skin-preset-card.is-empty .skin-preset-swatches {
  height: 0;
}
.skin-preset-meta {
  display: grid;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
}
.skin-preset-meta strong {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.skin-preset-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.25rem;
}
.skin-preset-actions .chip {
  min-width: 0;
  padding: 0.22rem 0.5rem;
  font-size: 0.7rem;
}

.skin-result-line {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------------ Schmal */

@media (max-width: 1020px) {
  .skin-workspace { grid-template-columns: 1fr; }
  /* Ohne Nachbarspalte fehlt das Hoehenmass, deshalb ein fester Deckel. */
  .skin-col-side { grid-template-rows: none; align-content: start; }
  .skin-preset-slots { max-height: 22rem; }
  .color-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skin-preset-slots { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .skin-toolbar { grid-template-columns: 1fr; justify-items: start; }
  .color-channels { grid-template-columns: 1fr; }
  .swatch-wrap, .color-row[data-key="body"] .swatch-wrap { height: 120px; }
  .chip { min-height: 36px; }
  .skin-preset-actions .chip { min-height: 32px; }
}