/* Visual feedback for the shared editable-title library
   (frontend/js/app-editable.js). Any element with
   `data-editable-key="X"` gets the `.editable-title` class once wired. */

.editable-title {
  outline: none;
  cursor: text;
  border-radius: 3px;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.18);
}

.editable-title:hover {
  background-color: rgba(251, 191, 36, 0.10);
  border-bottom-color: rgba(251, 191, 36, 0.85);
}

.editable-title.editable-active,
.editable-title:focus {
  background-color: rgba(251, 191, 36, 0.20);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.65);
  border-bottom-style: solid;
  border-bottom-color: rgba(251, 191, 36, 0.95);
}