/* ─────────────────────────────────────────────────────────────────────────
   LINK ROWS — repeatable rows for one multi-value link slot.

   Used by the person contact editor and the holon links editor. One
   definition, two callers: a Person copy and a Holon copy is the fork this
   project keeps paying for. specs/more-links.md, docs/dev/web/design-system.md §3.4.

   Anatomy:
     .link-rows            the slot: its rows, the add button
     .link-row             one link: optional label input, url input, actions
     .link-row-label       label input (rendered only for a labelled slot)
     .link-row-url         url input
     .link-row-actions     move up / move down / remove
     .link-rows-add        the add-a-row button

   Reordering is by buttons, not drag: the same affordance for keyboard, touch
   and pointer, and there is no per-item id that would make drag reliable.
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  .link-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: 100%;
  }

  .link-row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
  }

  /* The label is the smaller half: it names the link, the URL is the link. */
  .link-row-label {
    flex: 0 1 30%;
    min-width: 0;
  }

  .link-row-url {
    flex: 1 1 auto;
    min-width: 0;
  }

  .link-row-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 2px;
  }

  .link-row-icon {
    width: 14px;
    height: 14px;
  }

  /* The move buttons are secondary to typing: quiet until the row is worked
     on, so a slot with several links doesn't read as a wall of controls. */
  .link-row-actions .btn {
    opacity: 0.55;
    transition: opacity var(--transition-fast);
  }

  .link-row:hover .link-row-actions .btn,
  .link-row:focus-within .link-row-actions .btn {
    opacity: 1;
  }

  .link-rows-add {
    align-self: flex-start;
  }

  @media (max-width: 640px) {
    /* Stack rather than squeeze: a 30% label input on a phone is unusable. */
    .link-row {
      flex-wrap: wrap;
    }

    .link-row-label {
      flex-basis: 100%;
    }
  }
}