/* ============================================================
   Roles / permissions controls
   Scoped to .role-select and .role-pill. Lives inside the share
   modal (see sharing.css) and reuses css/style.css design tokens
   so both light and dark themes read correctly. Tints are built
   with color-mix over var-driven colors — no opaque hardcoded hex.
   ============================================================ */

/* ------------------------------ role select ------------------------------ */
.role-select {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  padding: 6px 9px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.role-select:hover { border-color: var(--border-strong); }
.role-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.role-select:disabled { opacity: 0.6; cursor: default; }
.role-select-sep { color: var(--text-faint); }

/* ------------------------------- role pill ------------------------------- */
.role-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.01em;
  padding: 0 7px;
  border-radius: 6px;
  white-space: nowrap;
  /* neutral fallback for browsers without color-mix() */
  background: rgba(120, 124, 160, 0.14);
  color: var(--text-light);
}

/* owner — strong neutral tint */
.role-pill-owner {
  background: color-mix(in srgb, var(--text) 13%, transparent);
  color: color-mix(in srgb, var(--text) 78%, var(--text-light));
}

/* editor — iris accent tint */
.role-pill-editor {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: color-mix(in srgb, var(--accent) 68%, var(--text));
}

/* commenter — distinct amber hue */
.role-pill-commenter {
  background: color-mix(in srgb, var(--star) 20%, transparent);
  color: color-mix(in srgb, var(--star) 52%, var(--text));
}

/* viewer — muted neutral */
.role-pill-viewer {
  background: color-mix(in srgb, var(--text-faint) 15%, transparent);
  color: var(--text-light);
}

/* none / no access — faint, recedes */
.role-pill-none {
  background: color-mix(in srgb, var(--text-faint) 10%, transparent);
  color: var(--text-faint);
}