/*
 * .editable — click-to-edit text (title, etc.). The display element and an input
 * swap via the editable controller. Apply alongside the text's own class (e.g.
 * .perma-header__title) so both states share typography.
 */
@layer components {
  .editable__display {
    cursor: text;
    border-radius: var(--radius-1);
  }
  .editable__display:hover { background: var(--accent-soft); }

  .editable__input {
    font: inherit;
    color: inherit;
    inline-size: 100%;
    background: var(--canvas);
    border: var(--border-size-1) solid var(--accent);
    border-radius: var(--radius-ui);
    padding-inline: calc(var(--u-pad) / 3);
    box-shadow: 0 0 0 var(--border-size-2) var(--accent-soft);
  }
  .editable__input:focus-visible { outline: none; }
}