@layer components {
  /* Tag chips — rendered by shared/_tag_chips and inline labels on entries. */
  .chip {
    background-color: var(--color-ink-lightest);
    border-radius: 99rem;
    color: var(--color-ink);
    display: inline-block;
    font-size: var(--text-small);
    font-weight: 500;
    line-height: 1.6;
    padding-block: 0.05em;
    padding-inline: 0.75em;
    text-decoration: none;

    @media (any-hover: hover) {
      &:is(a):hover {
        background-color: var(--color-ink-lighter);
      }
    }
  }

  .chip--active {
    background-color: var(--color-ink);
    color: var(--color-ink-inverted);
  }

  .tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
  }

  /* Person show page */
  .person-header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
    justify-content: space-between;
  }

  /* Timeline of entries */
  .timeline__entry {
    --panel-padding-block: var(--block-space-half);
    --panel-padding-inline: var(--block-space);

    position: relative;

    .record-menu {
      inset-block-start: var(--block-space-half);
      inset-inline-end: var(--block-space-half);
      position: absolute;
    }
  }

  .timeline__body {
    margin-block-end: 0.25em;
    overflow-wrap: anywhere;
  }

  .timeline__comment {
    border-inline-start: 2px solid var(--color-ink-lighter);
    font-style: italic;
    margin-block-end: 0.25em;
    padding-inline-start: 0.75em;
  }

  /* Tag picker (shared/_tag_picker) */
  .tag-picker {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);

    /* An empty chips row must not add a phantom flex gap — without this the
       label-to-input spacing doubles compared to a regular fieldset. */
    .tag-chips:empty {
      display: none;
    }
  }

  /* Wraps the search input so the dropdown (anchored inset-inline: 0) always
     matches it. Mirrors .input's own sizing — fills the fieldset but capped
     by the same --input-max-width — so the pair behaves exactly like any
     regular input: full width on narrow forms, capped on wide ones. */
  .tag-picker__control {
    inline-size: 100%;
    max-inline-size: var(--input-max-width, 30em);
    position: relative;
  }

  /* The options list is a native popover: top-layer rendering overlays open
     modals instead of being clipped into their overflow scroll. Pinned under
     its input (top/left/width set by picker_dropdown.js). Display stays
     scoped to :popover-open so the UA's closed state isn't overridden. */
  .tag-picker__options {
    --panel-padding-block: var(--block-space-half);
    --panel-padding-inline: var(--block-space-half);

    max-block-size: 14rem;
    overflow-y: auto;

    &:popover-open {
      display: flex;
      flex-direction: column;
      inset: auto; /* clear the popover UA inset: 0 */
      margin: 0;   /* clear the popover UA margin: auto */
      position: fixed;
    }

    /* When nothing matches, only "+ New tag…" is left — keep it visible. */
    &.tag-picker__options--empty .tag-picker__new {
      display: block;
    }
  }

  /* Person picker's selected state — looks like a regular input (uses the
     .input class for border/padding), just not editable; ✕ dismisses. */
  .person-picker__selected {
    align-items: center;
    display: flex;
    gap: 0.5em;
    justify-content: space-between;

    span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  /* Copy-to-clipboard icon next to phones/emails — sits inline with text. */
  .copy-button {
    font-size: 0.9em;
    vertical-align: middle;
  }

  .chip__remove {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 0.85em;
    margin-inline-start: 0.35em;
    padding: 0;
  }
}