/*
 * .invite-code — the invite-code card on personal settings: the code large and
 * transcribable on the left, actions on the right, and a "Copied" overlay the
 * clipboard controller reveals by toggling .is-copied (see broadcast.css for
 * the same pattern).
 * Structure: .invite-code > code.invite-code__code + .invite-code__actions
 *            + .invite-code__copied
 */
@layer components {
  .invite-code {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--u-pad);
    padding: var(--u-pad);
    background: var(--canvas);
    border: var(--border-size-1) solid var(--line);
    border-radius: var(--radius-ui);
    overflow: hidden;
  }

  .invite-code__code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-6);
    letter-spacing: 0.08em;
    color: var(--ink);
  }

  .invite-code__actions {
    display: flex;
    align-items: center;
    gap: calc(var(--u-pad) / 2);
    flex-shrink: 0;
  }

  .invite-code__copied {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-strong);
    color: #fff;
    font-weight: var(--font-weight-6);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
  }

  .invite-code.is-copied .invite-code__copied { opacity: 1; }
}