/* line-list-editor.css — Editor für geordnete Textzeilen (line-list-editor.js).
   Self-scoped über die Wurzelklasse `.lle` (das Modul-JS setzt sie auf den Host). */

.lle { display: flex; flex-direction: column; gap: var(--space-1-5); width: 100%; }

.lle-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }

.lle-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  border: var(--surface-border);
  border-radius: var(--surface-radius-inner);
  background: var(--surface-bg);
  padding: 2px var(--space-1) 2px var(--space-2);
  transition: border-color var(--motion-fast) var(--ease-soft), box-shadow var(--motion-fast) var(--ease-soft);
}
.lle-row:hover { border-color: var(--lod-gray-300); }
.lle-row:focus-within { border-color: var(--brand-default); box-shadow: 0 0 0 2px var(--brand-light); }

/* Reorder-Chevrons — dezent, treten bei Hover/Fokus der Zeile hervor. */
.lle-reorder { display: flex; flex-direction: column; flex: 0 0 auto; }
.lle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; padding: 0;
  border-radius: var(--radius-sm); color: var(--lod-gray-600);
  transition: background var(--motion-instant) var(--ease-soft), color var(--motion-instant) var(--ease-soft), opacity var(--motion-fast) var(--ease-soft);
}
.lle-btn img { width: 14px; height: 14px; display: block; }
.lle-btn:hover { background: var(--lod-gray-100); }
.lle-btn:focus-visible { outline: 2px solid var(--brand-default); outline-offset: 1px; }
.lle-btn:disabled { opacity: 0.25; cursor: default; pointer-events: none; }

.lle-up, .lle-down { width: 20px; height: 15px; opacity: 0; transition: opacity var(--motion-instant, .1s) ease; }
/* Auch die an den Enden deaktivierten Chevrons bleiben im Ruhezustand aus — sonst zeigten
   erste/letzte Zeile dauerhaft einen einzelnen Pfeil (das „mal sichtbar, mal nicht"). */
.lle-up:disabled, .lle-down:disabled { opacity: 0; }
.lle-row:hover .lle-up, .lle-row:hover .lle-down,
.lle-row:focus-within .lle-up, .lle-row:focus-within .lle-down { opacity: 1; }
.lle-row:hover .lle-btn:disabled, .lle-row:focus-within .lle-btn:disabled { opacity: .25; }
.lle-up img { transform: rotate(180deg); }   /* chevron_up existiert nicht → gedreht */

.lle-input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: transparent; outline: none;
  font-family: inherit; font-size: var(--font-size-sm); color: var(--lod-fg-1);
  padding: var(--space-1-5) 0;
  line-height: 1.35;
}
.lle-input::placeholder { color: var(--lod-gray-500, var(--lod-gray-600)); }

.lle-remove { width: 24px; height: 24px; flex: 0 0 auto; }
.lle-remove:hover { background: var(--red-100); color: var(--red-700); }

/* Add-Zeile — visuell abgesetzt (gestrichelt, brand-getönt bei Fokus). */
.lle-add {
  display: flex; align-items: center; gap: var(--space-1);
  border: 1px dashed var(--lod-gray-300);
  border-radius: var(--surface-radius-inner);
  padding: 2px var(--space-1) 2px var(--space-2);
  transition: border-color var(--motion-fast) var(--ease-soft), background var(--motion-fast) var(--ease-soft);
}
.lle-add:focus-within { border-style: solid; border-color: var(--brand-default); background: var(--brand-light); }
.lle-add-input {
  flex: 1 1 auto; min-width: 0;
  border: none; background: transparent; outline: none;
  font-family: inherit; font-size: var(--font-size-sm); color: var(--lod-fg-1);
  padding: var(--space-1-5) 0; line-height: 1.35;
}
.lle-add-input::placeholder { color: var(--lod-gray-500, var(--lod-gray-600)); }
.lle-add-btn {
  flex: 0 0 auto; gap: var(--space-1); padding: 0 var(--space-2); height: 26px;
  border-radius: var(--radius-md); line-height: 1;
  font-size: var(--font-size-xs); font-weight: var(--fw-semibold); color: var(--brand-default);
  background: var(--brand-light); white-space: nowrap;
}
.lle-add-btn img { width: 14px; height: 14px; }
.lle-add-btn:hover { background: color-mix(in srgb, var(--brand-default) 16%, transparent); }